SVG圧縮ツールの仕組み
Illustrator、Inkscape、Figma、Sketchで保存したSVGには、ブラウザが使わないものが多く含まれているのが普通です。エディターのメタデータ、コメント、非表示のレイヤー、すべて書き出された初期値、小数点以下8桁以上の座標などです。このツールは、ほとんどのビルドツールやデザインアプリが使っているオープンソースのSVG最適化ツールSVGOでそれらをすべて取り除くため、図の見た目は同じままファイルが小さくなります。
SVGOはファイルに対して何回かに分けて処理を行います。パスを結合して短くし、数値を選んだ精度に丸め、不要なグループをまとめ、空の要素を削除し、色を最も短い形で書き直します。viewBoxは保たれるため、SVGはどんなサイズにも拡大縮小できたままです。ファイルの他の部分から参照されているIDは、参照先も更新したうえで短縮されるため、グラデーションやマスクも機能し続けます。
重要な設定は精度だけです。「高」は小数点以下3桁を残します。通常のサイズならどれも違いは見えず、アイコンやロゴには安全な選択です。「バランス」は2桁、「最小」は1桁を残します。0.1単位が1ピクセルよりはるかに小さくなる大きなイラストには向いていますが、非常に小さなアイコンでは形が崩れることがあります。結果がおかしく見える場合は、元のファイルをより高い精度で圧縮し直してください。
約200 KBの最適化ツールは、初めてボタンを押したときに読み込まれます。SVGはこのタブ内で読み込まれて書き直され、アップロードされることはありません。未発表のロゴやクライアントの作品では、これが重要です。
SVG圧縮ツールのオプションの説明
| 高品質 | 小数点以下3桁。アイコン、ロゴなど小さなものに安全です。 |
|---|---|
| バランス | 小数点以下2桁。ほとんどのイラストに適しています。 |
| 最小ファイル | 小数点以下1桁。大きな作品向け。小さなアイコンは後で確認してください。 |
| 保持されるもの | viewBox、参照されているID、グラデーション、マスク、図の見た目。 |
| 削除されるもの | エディターのメタデータ、コメント、非表示の要素と空の要素、余分な精度。 |
使うべき場面
1キロバイトごとにページの読み込みが増えるWebサイトにアイコンやロゴを置く前、SVGをHTMLやReactコンポーネントにインラインで埋め込む前、デザイン素材をコードリポジトリにコミットする前、アップロードフォームにファイルサイズの制限があるときに、SVGを圧縮しましょう。
デザインアプリ用に、編集可能な元のSVGを残しておきましょう。最適化ではレイヤー名やガイドなどのエディターのデータが削除されるため、作品を編集する必要があるときは元のファイルを開き直してください。
SVG最適化ツールについて
SVGOはSVG Optimizerの略で、ほとんどのWebビルドツールや、最適化した書き出しに対応するデザインアプリで、SVGの最適化を担っているオープンソースのツールです。SVGをツリー構造に解析し、十分にテストされた一連のクリーンアップ処理を実行して書き出し、それ以上削れなくなるまで繰り返します。ここで行われる処理はどれも図の見た目を変えないものです。だからこそ、その初期設定は本番環境でも信頼されています。このページで使われているバージョンは完全にブラウザ内で動作し、ツールを初めて使うときにjsDelivr CDNから読み込まれます。
SVG圧縮ツールのトラブルシューティング
「すでに最適化されています。変更せずに返します」
そのSVGはすでに最適化されているため、見た目を変えずに削れるものがありませんでした。元のファイルがそのまま返されます。
図の一部がずれたり曲がったりした
非常に小さなアイコンは、精度が低いとずれることがあります。元のファイルを「高」の精度で圧縮し直してください。
「SVGファイルではありません」
ファイルにSVGの図が含まれていません。SVGとして書き出されていても、中身がビットマップ画像を包んでいるだけのファイルは、あまり小さくできません。代わりに中の画像を圧縮してください。
SVG圧縮ツールの使い方（手順）
- 「SVGファイルを選択」を押すか、枠にファイルをドラッグします。
- 必要に応じてオプションを設定してください。ほとんどの用途では初期設定で十分です。
- 「SVGを圧縮」を押します。処理はお使いの端末上で行われます。
- 結果をダウンロードボタンで保存します。
オンラインで行っても安全ですか？
ほとんどのオンラインツールでいう「オンライン」とは、ファイルが企業のサーバーにアップロードされ、そこで処理され、削除されるまでしばらく保存されることを意味します。ここではそうではありません。ページがツールのコードをブラウザにダウンロードし、ファイルはお使いの端末上のタブ内で読み込まれ、処理されます。ファイルがTapToConvertやその他の誰かに送信されることはありません。
ご自身で確認することもできます。ページとエンジンの読み込みが終わったらWi-Fiをオフにしてみてください。ツールはそのまま動作します。つまり、順番待ちも1日あたりの上限もなく、サーバーによるファイルサイズの上限もありません。唯一の上限は、ブラウザが1つのタブに割り当てるメモリです。
SVG圧縮ツールのよくある質問
圧縮するとSVGの見た目は変わりますか？
「高」の精度なら、見た目の変化はありません。精度を下げると座標がさらに丸められるため、非常に細かい部分が曲がることがあります。
どのくらい小さくなりますか？
デザインアプリから書き出したSVGは、30〜70パーセント小さくなることがよくあります。すでに最適化されたSVGは、ほとんど、またはまったく小さくなりません。
圧縮したSVGも編集できますか？
はい。ただし、レイヤー名、ガイド、エディターの設定はなくなります。編集用に元のファイルを残しておいてください。
ファイルはアップロードされますか？
いいえ。SVGOはブラウザ内で動作するため、SVGが端末の外に出ることはありません。
無料ですか？
はい。会員登録不要、透かしなし、利用回数の制限もありません。TapToConvertは広告収入で運営されています。
ファイルはアップロードされますか？
いいえ。すべての処理は、お使いの端末上のブラウザのタブ内で行われます。