SVG最適化

SVGをPNG・WebP・AVIFへ

ラスター版（ファビコン、アプリストアの素材、メールクライアント、ベクター画像が使えない場所向けのSVG→PNG変換）が必要ですか？「画像に変換」タブに切り替えましょう。SVGは解像度に依存しないので、出力サイズを選べます。ドキュメント本来の寸法の1×、高DPI画面向けの鮮明な2×や4×の書き出し、あるいはアスペクト比に応じて高さが決まる任意のカスタム幅。透過はどのフォーマットでも保たれ、Convertツールと同じ高品質なエンコーダーがPNG・WebP・AVIFのバイトを生成します。しかも、ファイルがブラウザの外に出ることは一切ありません。

なぜSVGファイルを最適化するのか？

デザインツールから書き出したSVGには、エディタのメタデータ、コメント、隠しレイヤー、ブラウザには不要なほど精密な座標が含まれています。これらを取り除くと通常30〜70%のファイルサイズを削減できます（ページが速くなり、バンドルが小さくなり、Core Web Vitalsが改善）。しかもピクセル単位で同一に描画されます。OptImgは業界標準の最適化ツールをブラウザ内で完全に実行。すでに小さいファイルなら、より大きなものを返す代わりにそう伝えます。

よくある質問

SVGはサーバーにアップロードされますか？

最適化も変換も、すべてブラウザ内でネイティブ速度で実行されます。アップロードは一切なく、ファイルがデバイスから外に出ることもなく、順番待ちもなく、デバイスのメモリを超えるファイルサイズ制限もありません。

SVGをPNGに変換するには？

SVGをドロップし、「画像に変換」タブに切り替え、PNGを選んだまま変換するだけです。SVGの元サイズ、または2×・4×・任意のカスタム幅で、ピクセル単位で完璧なPNGが得られます。

SVGをPNGに変換すると透過は保たれますか？

はい。SVGの透過背景は、PNG・WebP・AVIF出力でも完全に透過のままです。白に統合されることはありません。

SVGから高解像度のPNGを得るには？

SVGは解像度に依存しないので、高DPI画面向けの鮮明な書き出しには2×や4×を選ぶか、正確なピクセル幅を入力します。高さはSVGのアスペクト比に応じて自動で決まります。

SVGをPNGではなくWebPやAVIFにできますか？

はい。フォーマット選択でWebPまたはAVIFを選びます。どちらも透過を保ち、PNGよりずっと小さくなります。画質スライダー（既定値：WebP 80、AVIF 60）でサイズと忠実度のバランスを調整できます。

最適化ツールは実際に何を取り除きますか？

エディタのメタデータ、コメント、隠し要素、既定の属性、冗長な精度など、定番のSVGクリーンアップです。安全な既定値ではIDの名前を変更しません。積極モードではさらにIDを短縮し、座標を小数2桁に丸めて追加で削減します。

最適化するとviewBoxが消えたりレスポンシブなスケーリングが壊れたりしますか？

いいえ。viewBoxは安全モードでも積極モードでも常に保持されるので、レスポンシブなSVGは以前とまったく同じようにスケールし続けます。

変換後にテキストの見た目が変わるのはなぜですか？

SVGが参照するフォントはダウンロードされない（すべてデバイス上に留まる）ため、テキストは同梱のNoto Sansのフォールバックで描画されます。正確なグリフを得るには、書き出す前にデザインツールでテキストをパスに変換してください。

PNGやJPGをSVGに変換できますか？

はい、別の「画像をSVGに変換」ツールで可能です。こちらはラスター画像をベクター図形に変換します。このSVGツールはその逆で、既存のSVGを最適化し、PNG・WebP・AVIFにラスタライズします。