✂️ SVG 最適化

SVG ファイルから不要なメタデータ・コメント・空白・editor タグを削除し、小数点を丸めてサイズを大幅に削減します。CSS / HTML / JSX / Vue 形式での出力にも対応。

✅ 完全無料・登録不要・サーバーへのデータ送信なし

コメント削除 Doctype 削除 XML 宣言削除 metadata 削除 editor 属性削除 title / desc 削除空白圧縮小数点桁数

Input SVG

プレビュー

1

SVG を貼り付けまたはファイルを開く

左側のテキストエリアに SVG コードを貼り付けるか、「開く」ボタンで SVG ファイルを選択します。「サンプル」ボタンでデモ SVG を試せます。
2

最適化オプションを選択

コメント削除・メタデータ削除・エディター属性削除・空白圧縮などのチェックボックスを必要に応じて切り替えます。小数点桁数を下げるとさらにサイズを削減できます。
3

出力をコピーまたは形式を選択

右側に最適化済み SVG が表示されます。Raw SVG のほか、CSS の background-image (data URI)・HTML の img タグ・JSX・Vue 形式でも出力できます。

どれくらいサイズを削減できますか?

Inkscape や Illustrator などで書き出した SVG は多くのメタデータを含みます。一般的には 20〜60% のサイズ削減が見込めます。全オプションを有効にすると最大限に削減できます。

title / desc を削除するとアクセシビリティに影響しますか?

はい。SVG を img タグで使う場合は通常問題ありませんが、インライン SVG としてアクセシブルなアイコンに使う場合は title と desc をそのまま残してください。

JSX 形式は React で使えますか?

はい。JSX 形式を選ぶと kebab-case 属性が camelCase に変換され、class が className に置き換えられます。React コンポーネントに直接貼り付けられます。