エディタの不要なデータを取り除きSVGを軽量化
IllustratorやFigmaなどのデザインツールから書き出されたSVGファイルには、Web上での表示には不要なメタデータ、コメント、未使用の名前空間などが多く含まれています。このツールは、ブラウザのJavaScriptを使用してSVGコードを解析し、これらの不要な要素を安全に削除します。
また、すべての処理はお使いのブラウザ内で完結するため、機密性の高いロゴや未公開のイラストを含むSVGファイルが外部サーバーにアップロードされることはありません。
座標の丸め処理によるサイズ削減と注意点
SVGのファイルサイズをさらに削減するため、パス（図形）を構成する座標値の小数点以下の桁数を指定して丸めることができます。設定した桁数が少ないほどコードは短くなり軽量化されますが、極端に桁数を減らすと曲線の滑らかさが失われたり、図形の形が崩れたりする可能性があります。
ツール内では、最適化前と最適化後のSVGをブラウザのレンダリングエンジンを利用して並べて表示します。プレビューを比較しながら、視覚的な劣化が起きない適切な小数点以下の桁数に調整してください。
CSSやJavaScriptへの影響を防ぐ安全な最適化
Web開発での実用性を重視し、CSSでのスタイリングやJavaScriptからの操作に必要となるid属性やclass属性はそのまま保持されます。グラデーションやフィルターの参照、URL内の数値が誤って変更されることもありません。
また、アクセシビリティ向上のために<title>タグを維持するオプションも用意しています。なお、このツールはコード内の不要な記述を削除して最適化するものであり、gzipなどのファイル圧縮自体を行うものではありません。サーバー側での配信設定と組み合わせてご利用ください。
よくある質問
一般的なSVGファイルでどの程度ファイルサイズを削減できますか？
書き出し元のエディタや図形の複雑さによって大きく異なります。Illustratorなどのエディタ固有のメタデータが多く含まれている場合や、座標の小数点以下の桁数を適切に丸めた場合、元のサイズの30%〜70%程度を削減できることも珍しくありません。
最適化されたSVGは、すべてのブラウザで元と同じように表示されますか？
プレビュー画面で見た目に違いがなければ、基本的にはどのブラウザでも同じように表示されます。ただし、座標の小数点以下の丸め桁数を極端に小さく設定すると、曲線がカクつくなど視覚的な変化が生じるため、プレビューを必ず確認してください。
複雑なフィルターやグラデーションを使用したSVGでも安全に使えますか？
はい、安全にご利用いただけます。フィルターやグラデーションを定義する要素や、それらを参照するためのIDは最適化の過程で削除・変更されないよう設計されています。
削除する要素や維持するメタデータを細かく制御することは可能ですか？
本ツールは、Web表示に不要なエディタ固有のメタデータやコメントを一括で自動削除するシンプルな設計となっています。個別のメタデータの細かな取捨選択はできませんが、アクセシビリティ用の<title>タグのみ、オプションで残すことが可能です。
座標の丸め処理はアイコンやイラストの品質にどう影響しますか？
小数点以下の桁数を減らすとファイルサイズは小さくなりますが、図形を構成する点（アンカーポイント）の位置が微妙にズレるため、元のデザインから変形するリスクがあります。特にサイズの小さなアイコンでは影響が出やすいため、小数点以下2〜3桁程度から調整を始めることをおすすめします。
ツールの不具合や改善案はありますか。 フィードバックを送る