SVG最適化・PNG変換
SVGファイルから不要なメタデータやコメント、冗長な記述を取り除いて最適化し、サイズの削減率を表示するツールです。最適化したSVGを指定した幅・高さのPNG画像に変換することもでき、すべてブラウザ内で処理されます。
小さくするほどサイズは減りますが、細かい形がずれる場合があります。
使い方
- SVGのコードを貼り付けるか、「ファイルを開く」やドラッグ＆ドロップで .svg ファイルを読み込みます。
- 自動で最適化が行われ、元のサイズ・最適化後のサイズ・削減率と、見た目のプレビューが表示されます。
- 「最適化オプション」で数値の精度やwidth・height属性の削除、インデントの有無を調整し、「SVGをダウンロード」で保存します。
- PNGが必要な場合は「PNGに変換」で幅・高さ（または1x・2x・4x）を指定し、「PNGをダウンロード」を押します。
このツールについて
デザインツールから書き出したSVGには、編集用のメタデータやコメント、使われていない定義、必要以上に細かい小数など、表示には不要な情報が多く含まれていることがあります。これらを取り除くことで、見た目を変えずにファイルサイズを大きく削減でき、Webページの読み込みを速くできます。
最適化にはオープンソースのsvgo（MITライセンス）を使用しています。パスデータの短縮、色の表記の短縮、不要な属性やグループの削除などを複数回繰り返して行い、できるだけ小さなSVGにします。「数値の精度」を小さくするとさらにサイズを減らせますが、細かい図形では形がずれる場合があるため、プレビューで確認しながら調整してください。
PNGへの変換はブラウザのCanvasで行うため、アイコンやロゴを任意の解像度のPNGとして書き出せます。SVGの読み込みから最適化、PNGの書き出しまで、データがサーバーへ送信されることはありません。
よくある質問
最適化で見た目が変わることはありますか？
通常は変わりません。ただし「数値の精度」を小さくしすぎると、細かい図形がわずかにずれることがあります。プレビューで元のSVGと比べて確認してください。
width・height属性を削除するとどうなりますか？
SVGが親要素の大きさに合わせて拡大縮小されるようになり、CSSでサイズを指定しやすくなります。viewBoxは残るため縦横比は保たれます。
PNGに変換すると文字や画像が表示されません。
SVGが外部のフォントや画像ファイルを参照している場合、ブラウザの制限によりPNGには描画されません。文字はアウトライン化し、画像はSVG内に埋め込んでから変換してください。
SVGはサーバーにアップロードされますか？
アップロードされません。最適化とPNGへの変換はすべてブラウザ内で行われます。