SVG最適化

SVGをPNG・WebP・AVIFへ

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

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

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

よくある質問

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

いいえ。最適化も変換もブラウザ内だけで実行されます — ファイルがデバイスから外に出ることはなく、順番待ちもなく、デバイスのメモリを超えるファイルサイズ制限もありません。

SVGをPNGに変換するには？

SVGをドロップし、「画像に変換」タブに切り替え、PNGを選んだままConvertを押すだけ。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）でサイズと忠実度のバランスを調整できます。

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

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

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

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

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

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

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

いいえ — ラスターからベクターへのトレースは別の技術で、ここでは対象外です。このツールはSVGの最適化と、SVGからPNG・WebP・AVIFへの変換を行うもので、その逆は扱いません。