少々お待ちください...(/)
現在、画像を最適化しています。最高の品質結果を保証するために、少々お待ちください。
素晴らしい、画像の圧縮に成功しました。
画像が最適化されました。
SVG画像をオンラインで圧縮
メタデータを削除してもベクターはそのまま：SVGが完全再現
最適化中...
エディタが残した不要な情報を削除してSVGファイルを圧縮
SVGをメモ帳で開くと、タグや数値、テキストなどすべてが見えます。これがSVGというフォーマットです。ピクセルも写真もなく、図形を描くための指示だけが記述されています。これが意味するのは、ここでの圧縮の仕組みが他と異なるということです。何かを無理に詰め込んだり近似したりはしません。冗長なテキストだけが取り除かれ、描画自体には一切影響しません。
ファイルサイズの正体
実際のアートワークはほとんど容量を占めていません。Illustrator、Figma、Inkscapeからロゴをエクスポートすると、ファイルにはエディタの「書類仕事」がたくさん付いてきます。ジェネレーターコメント、2008年以降ほとんど使われていないDOCTYPE、XML宣言、RDFで記述されたメタデータブロック、レイヤー名、そしてどの要素も使っていないクラスが詰まったstyleブロック。実際にテストしたロゴでは、これらがファイル全体の約3分の2を占めていました。本来の図形部分はごくわずかです。
さらに数値の問題もあります。エディタは座標をフルの浮動小数点精度で書き出すため、例えば10の位置に幅180の四角形があれば「10.000000」「180.00000000」と保存されます。これがすべてのパスのすべての点に適用されるので、小数点以下の桁数だけで描画部分より重くなることもあります。
ベクターのままなので画質は一切劣化しません
ここを心配する人が多いですが、実は心配無用です。SVGには解像度という概念がありません。表示サイズに応じて毎回新しく描画されるため、16ピクセルのファビコンでも巨大な看板でも同じくシャープです。メタデータブロックを削除しても何も変わりません。返却されるファイルはアップロードしたものと同じように、どんなサイズでも正確に拡大縮小でき、見た目もまったく変わらず、元のエディタでそのまま編集できます。
削除されるもの
このクリーンアップは慎重に設計されており、描画に影響しないものだけを対象としています。
| 削除されるもの | 保持されるもの |
|---|---|
| エディタのコメントやジェネレーター文字列 | すべての図形、パス、カーブ |
| メタデータブロックとそのRDF名前空間 | 色、グラデーション、不透明度 |
| DOCTYPEやXML宣言 | テキスト要素やフォント |
| どこからも参照されていない定義 | 使用中のフィルター、マスク、クリップパス |
| 空のグループやレイヤー | 変形（transform）やviewBox |
| 座標の不要な小数点以下 | 見た目に影響するすべて |
SVGが写真より軽量化の価値が高い理由
SVGは主にロゴやアイコンとして使われるため、サイトのすべてのページのヘッダーに配置され、他のどの要素よりも先に読み込まれます。写真は遅れて、かつ遅延読み込みされることが多いですが、アイコンは違います。ヘッダーロゴの数KBを削ることは、記事中ほどの画像の同じ容量を削るよりもページの表示速度に大きく貢献します。なぜなら、ヘッダーが読み込まれるまでブラウザは画面を描画できないからです。
公開前に一つだけ確認したいこと
クリーンアップではファイル内のid属性が短縮されます。同じSVG内の参照はすべて自動で書き換えられるため、グラデーションやマスク、クリップパスもそのまま機能し、描画も変わりません。ただし、ファイル外部のコードまでは把握できません。SVGがアイコンスプライトとして他のページから参照されていたり、スタイルシートやスクリプトがidで要素を指定している場合は、ファイルを差し替えた後に動作確認をおすすめします。通常のロゴやエクスポートしたアイコンであれば、特に確認は不要です。
SVG内に写真が埋め込まれている場合
SVGが必ずしもベクターとは限りません。Illustratorのアートボードに写真を配置してSVGでエクスポートすると、その画像がbase64文字列としてXML内に埋め込まれます。たった一つの図形でもファイルサイズが2MBになることも。マークアップのクリーンアップではこのブロックには手を加えません。なぜならそれはマークアップではなく画像データだからです。もし圧縮してもほとんどサイズが減らず、もともと写真が含まれていた場合は、画像部分を取り出してJPEGやPNGとして個別に圧縮してください。
設定不要
オプションや圧縮レベル、高度な設定タブはありません。ファイルをアップロードすれば、クリーンな状態で返却されます。複数同時アップロードも同じ要領で、完了したものから個別にダウンロードすることも、まとめてZIPで取得することもできます。
ファイルの取り扱いについて
ファイルは暗号化された通信で送信され、クリーンアップ後1時間以内にサーバーから削除されます。保存や他用途への利用は一切ありません。
得られるもの
- エディタのメタデータ、ジェネレーターコメント、DOCTYPE、未使用の定義を削除
- 座標は9桁も不要な小数点以下を切り捨てて適切な精度に丸め
- 無限に拡大縮小でき、エディタでもそのまま開けるファイル
- すべてのサイズで元ファイルと同一の描画を確認済み
- 複数ファイルの一括アップロード、個別ダウンロードやZIPでまとめて取得も可能
- アカウント不要・インストール不要・ファイルは1時間後にサーバーから削除
次にできること
ビットマップ版のロゴも扱っていますか？PNG圧縮は透過ロゴ向け、WebP圧縮はモダンな形式に対応しています。もしSVG内に写真が埋め込まれていた場合は、JPG圧縮で画像部分を処理してください。
よくある質問
いいえ、ぼやけることはありません。SVGにはピクセルも解像度もありません。画像が表示されるサイズに合わせてブラウザが毎回新しく描画するため、スマートフォンでも看板でも常にシャープです。ファイルのクリーンアップでは、コメントやメタデータなど描画に関係ないテキストだけが削除されます。図形やカーブ、色はそのままなので、どのサイズでも見た目は変わりません。
エディタが追加した「書類仕事」です。Illustrator、Figma、Inkscapeはジェネレーターコメント、XML宣言、DOCTYPE、RDF形式のメタデータブロック、レイヤー名、さらにどの要素も使っていないクラスが入ったstyleブロックを書き込みます。さらに座標もフル精度で記述されるため、180という値が180.00000000のように保存されます。一般的なロゴのエクスポートでは、これらがファイル全体の約3分の2を占めています。実際に描画する部分はごくわずかです。
はい、編集可能です。出力されるのは通常のSVGなので、Illustrator、Figma、Inkscape、またはテキストエディタで元のファイルと同じように開けます。違いはエディタ独自の管理情報が一部削除されていることだけで、レイヤー名などが元通りにならない場合がありますが、アートワーク自体はそのままで完全に編集できます。
主に2つの理由があります。すでに最適化されていた場合（エクスポート時に自動でクリーンアップされるツールや、すでに最適化済みのファイル）、またはファイル内に写真が埋め込まれている場合です。後者はよくある落とし穴で、Illustratorでアートボードに写真を配置してSVGでエクスポートすると、画像がbase64ブロックとしてXML内に埋め込まれます。このブロックは画像データなので、マークアップのクリーンアップではそのまま残ります。2MBのSVGがほとんど変わらない場合は、テキストエディタで開いて「data:image」で始まる長い文字列がないか確認してみてください。
可能性がありますので、公開前に知っておくと安心です。クリーンアップではファイル内のid属性が短縮されます。同じSVG内の参照はすべて書き換えられるため、グラデーションやマスク、クリップパスもそのまま機能し、画像の見た目も変わりません。ただし、ファイル外部のコードは別です。スタイルシートでid指定していたり、JavaScriptで特定のノードをアニメーションさせていたり、他ページからスプライトとして参照している場合は、差し替え後に動作確認をしてください。単体のロゴやエクスポートしたアイコン（ほとんどのSVG）は特に問題ありません。
はい、両方を併用するのが一般的です。このクリーンアップは本来不要なテキストを削除します。gzip（Webサーバーがファイル送信時に適用）は残ったテキスト全体を圧縮します。両方を使うことで、どちらか一方よりもさらに小さくなります。また、サーバー側でimage/svg+xmlのContent-Typeにも圧縮が有効になっているか確認する価値があります。初期設定ではHTMLやCSS、JavaScriptだけが対象になっている場合もあるためです。