SVG 最適化と Data URI ワークフロー

インライン SVG アイコンや小さな UI アセットは、余分な空白、エディタメタデータ、リスクのあるマークアップを含んだまま配布されることがあります。ブラウザで SVG をテキストとして最適化し、ファイルをアップロードせず Data URI スニペットをコピーできます。

SVG を最適化すべきとき

次の目的があるときに最適化します。

• コミット前にスプライトやアイコンファイルを小さくする
• CSS background-image 向けの data:image/svg+xml URI
• ドキュメントやコンポーネント例向けのクリーンな SVG スニペット

手動編集のために読みやすい整形がまだ必要な場合は最適化をスキップし、まず Safe モードを使う。

ローカルワークフロー

1. デザインエクスポート、コンポーネント、スプライトシートから SVG をコピーする。
2. SVG Optimizer を開く。
3. マークアップを貼り付けるか .svg ファイルをアップロードする。
4. <script>、イベント属性、外部 URL のセキュリティ事前チェックを確認する。
5. デフォルトで Safe 最適化を実行する。
6. 最適化済み SVG、URL エンコード Data URI、または CSS background-image スニペットをコピーする。

Safe と Aggressive

• Safe — 可能な限り viewBox、title、desc、role、aria-* を保持する。
• Aggressive — より強く minify し、アクセシビリティ向けメタデータを削除する場合がある。

セキュリティに関する注意

貼り付けた SVG は無害なテキストではなくコードとして扱う。このツールはページ内で SVG をレンダリングしませんが、本番で使う前に高リスクパターンはレビューしてください。

関連ツール

• Base64 — 他のエンコード済みペイロードの確認や変換。
• CSS Unit Converter — Data URI 背景とレイアウト計算を組み合わせる。
• Image Compressor — SVG が適さない形式のビットマップ圧縮。