SVGを最適化してファイルサイズを減らす方法

結論：ImgovoのSVG最適化ツールを開き、SVG（3MBまで）を追加して、コメントとエディターのデータを削除をオンのままにします。必要なら数値を丸め、プレビューを元の画像と見比べてください。そのあとSVGをダウンロードするか、コードをコピーします。ファイルはお使いのブラウザの中で処理され、アップロードされません。

SVGが大きくなる理由

シンプルなロゴは、ほんの数行のコードでできています。ところが、Inkscape、Sketch、Illustratorなどの描画ソフトは、コメント、エディターの設定、空のグループ、空の属性、広い空白、小数点以下の桁数が多い座標など、たくさんのものを加えることがよくあります。どれも見た目には影響しませんが、すべてダウンロードされます。アイコンの多いサイトでは、それが積み重なります。ファイルが軽いとページの表示も速くなります。全体像はウェブサイト用に画像を最適化する方法：サイズ、形式、画質をご覧ください。

最適化ツールがすること

• コメントとエディターのデータを取り除きます。
• 空のグループと空の属性を取り除きます。
• 不要な空白を取り除きます。
• 長い数値を小数点以下3桁、2桁、1桁に丸められます。そのままにすることもできます。
• スクリーンリーダーが使うタイトルと説明を残せます。
• viewBox、図形、グラデーション、クリップパス、マスク、ファイル内の他の部分が参照しているidは残します。

手順

1. SVG最適化ツールを開き、SVGファイルをページにドロップするか、クリックして選ぶか、貼り付けます。
2. 数値の精度で、数値をそのままにする小数点以下3桁小数点以下2桁小数点以下1桁のいずれかを選びます。
3. コメントとエディターのデータを削除はオンのままにします。スクリーンリーダーに読み上げさせたい内容の図形なら、タイトルと説明を残すにチェックを入れます。
4. 結果を確認します。前後のサイズが表示され、元の画像と結果が並べて描かれます。
5. 比較の行を読みます。Imgovoは両方を同じサイズで描き、1ピクセルずつ比べて、どれだけ違うかを表示します。
6. SVGをダウンロードをクリックするか、SVGコードをコピーでページに貼り付けます。

数値は丸めるべき？

まずは丸めずに試してください。見た目は変わらず、エディターのデータは取り除かれます。次に小数点以下3桁、プレビューが問題なければ2桁を試します。丸めるほど軽くなりますが、細い線や小さな部分がわずかに変わることがあります。Imgovoが目に見える違いを報告したら、精度を上げて戻してください。

エディターを開かずに色を変える

Imgovoは、図形やスタイルに直接書かれた単色を一覧にします。そのうちの1色に新しい色を選ぶと、まったく同じ色が使われている箇所がすべて置き換わります。1つのアイコンをブランドカラー違いで何種類か作るときに便利です。

グラデーション、スタイルシートで指定された色、currentColorという指定は変更されません。色を変えた場合は、結果が元と違うのが当然なので、ピクセル単位の比較は行われません。

SVGの中の文字

文字はフォントで描かれます。見る人の端末にそのフォントがないと別のフォントが使われ、見た目が変わります。ファイルに文字が含まれていると、Imgovoは警告を表示します。描画ソフトで文字をアウトラインに変換しておけば、この問題を避けられます。

安全のために取り除かれるもの

SVGには、スクリプト、埋め込まれたウェブページ、リンクを変えられるアニメーション、他のサイトへのリンク、イベント処理が入っていることがあります。Imgovoはこれらを取り除き、いくつ取り除いたかをファイルの下に表示します。これはファイルを小さくする処理とは別の手順です。

最適化したあとに

• SVGをピクセル画像にしたいときは、SVG変換ツールを使います。
• ウェブサイトのアイコンにするなら、ファビコン作成ツールに追加します。favicon.svgも含められます。
• 元のファイルは必ず残しておいてください。最適化したコピーから、エディターのデータを取り戻すことはできません。

プライバシー

SVGはお使いのブラウザの中で読み込まれて書き直されます。何もアップロードされません。

今すぐ試す

SVG最適化ツールを開き、描画ソフトから書き出したSVGを追加して、どれくらい小さくなるか確かめてみましょう。