SVGオプティマイザー

このツールについて

SVG（Scalable Vector Graphics）ファイルは、XMLマークアップで形状、パス、テキストを記述します。デザインツール、CMSエクスポート、手書きアイコンは、ブラウザが同じ画像を描画するのに必要な以上のデータを含むことがよくあります。SVG最適化は、通常の表示サイズで視覚出力を同一に保ちながら、コメント、エディターメタデータ、冗長なグループ、座標の不要な精度、未使用属性などの余分なマークアップを除去するプロセスです。 PNGやJPEGなどのラスター形式と異なり、SVGは圧縮後も編集可能で解像度に依存しません。最適化されたアイコンは、見た目のピクセルを失うことなく40 KBから6 KBに縮小できる場合があります。毎ページ読み込まれるロゴ、UIアイコン、イラスト、faviconにとって最適化は不可欠です。 ファイルが小さいほどページ読み込みが速く、モバイル帯域を節約し、Core Web Vitalsスコアが向上します。検索エンジンは高速ページを評価し、ユーザーはアイコンの遅延表示やレンダリングブロックに気づきます。最適化SVGは、肥大化したマークアップがパーサーを壊したりバンドルを膨らませたりするHTML、Reactコンポーネント、メールテンプレートによりきれいに埋め込めます。 本番サイトはCSS背景、インライン<svg>タグ、img要素でSVGアイコンを参照します。これらのファイルの各キロバイトは、特にファーストビューに複数アイコンがある場合、クリティカルレンダリングパスに寄与します。空白削除、transformの統合、doctype宣言の除去はCSSやJavaScriptに触れず転送サイズを削減します。link rel="icon" type="image/svg+xml"でSVG faviconを配信する場合、ブラウザは積極的にキャッシュします — スリムなファイルはリブランド時に更新が速くなります。 ReactプロジェクトはSVGをコンポーネントやURLとしてインポートすることが多いです。肥大化したソースはローダーが文字列としてインライン化するとJavaScriptバンドルのパース時間を増やします。コンポーネントライブラリに追加する前に最適化器を通し、tree-shakingとcode splittingを維持してください。最適化マークアップを.svgやSVGRパイプラインに貼る際はviewBoxが残っていることを確認 — ReactアプリはレスポンシブスケーリングにviewBoxに依存します。 モダンブラウザはドキュメントheadからリンクされたSVG faviconをサポートします。ファイルが小さく有効であれば、Retinaタブやピン留めショートカットで鮮明にスケールします。SVG faviconは正方形、シンプルなパレット、セキュリティのため外部参照やスクリプトを避ける必要があります。最適化後、古いWindowsシェルやラスターを期待するソーシャルクローラー向けにICOやPNGへ変換してください。最適化SVG faviconはfaviconパッケージ全体の優れたマスターファイルです。 デザイナーは組み込みラスター画像、パスの過剰な小数精度、重複する重なり形状、属性に簡略化できるstyleブロックを含むSVGをよくエクスポートします。Illustratorは名前付きレイヤーをgroup要素として追加し、Figmaエクスポートはxmlns属性と小数6桁の座標を含みます。viewBoxのないwidth/heightはレスポンシブレイアウトを壊します。有効な非表示レイヤーやクリッピングマスクは見えないジオメトリをエクスポートし、ファイルサイズにカウントされます。 FigmaではCopy as SVGを使うか、変換の悪いストロークアイコンはOutline strokeでエクスポートしてください。Figmaファイルは各グループにfill-ruleとtransform行列を含むことが多く、最適化は安全な場合に隣接パスを統合します。IllustratorではMinifyまたはResponsive SVGエクスポートを選び、不要なフォント埋め込みを無効にし、エクスポート前にアピアランスを展開してください。 エクスポート後、マークアップをこのブラウザベース最適化ツールに貼り付けます。処理はローカル — ブランド資産はサーバーにアップロードされません。クリーンなファイルをダウンロードするか、結果をリポジトリ、CMS、faviconジェネレーターパイプラインに直接コピーしてください。本番向けマルチサイズパッケージが必要な場合は、SVG to ICOコンバーター、SVG to PNGコンバーター、Favicon Generatorと組み合わせてください。

よくある質問