SVG最適化ツール
サニタイズ済みSVGファイルを最適化・整理します。
- アイコン向け
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
SVGとは何ですか？
SVG（Scalable Vector Graphics）は、インタラクティブ性とアニメーションをサポートする2次元グラフィックス用のXMLベースのベクター画像フォーマットです。JPEGやPNGのようなラスターフォーマットとは異なり、SVGは数学的なパスで定義されているため、品質を落とすことなくどんなサイズにも拡大縮小できます。これにより、モバイル画面から高解像度のデスクトップモニターまで、あらゆる場面で鮮明さを保てるため、Web上のロゴ、アイコン、イラストに最適です。
このツールの使い方
左側の「SVG入力」テキストエリアにSVGコードを貼り付けます。「プレビュー」をクリックすると、グラフィックが表示され、カラーパレットが抽出されます。「最適化」または「圧縮」ボタンを使ってマークアップを整理し、ファイルサイズを削減します。必要に応じて、カラーパネルで新しい値を入力し「適用」をクリックして特定の色を置き換えます。「コピー」または「ダウンロード」をクリックして、サニタイズ・最適化されたSVGを保存します。
一般的なユースケース
FigmaやIllustratorなどのデザインツールからエクスポートされたSVGを整理するアイコン管理。ブランドパレットに合わせてアイコンセットの色を素早く変更するテーマ設定。信頼できないソースからのSVGをサニタイズし、潜在的なスクリプトや外部参照を削除するセキュリティ対策。インライングラフィックのサイズを削減してページ読み込み時間を改善するために、SVGマークアップを圧縮するパフォーマンス改善。
プロのヒント
「currentColor」ボタンを使用すると、明示的なfillとstrokeをすべてcurrentColorに変換し、CSS経由でSVGを簡単にスタイリングできるようにします。本番で使用する前に、常にSVGを最適化してできるだけ小さくしてください。デザインツールでSVGを作成する際は、「Outline Stroke」や「Simplify Path」機能を使って、最適化前に生成されるコードの複雑さを減らしてください。