SVG 最適化 & コンポーネント生成

SVG マークアップをクリーンアップし、結果をプレビューして、React、Vue、Svelte のコンポーネントの下書きを生成します。コピーする前に、出力されたマークアップと viewBox を確認してください。

ブラウザ内でローカルに実行

SVG をクリーンアップして React・Vue・Svelte コンポーネントにする方法

このページはブラウザー内で SVG マークアップをクリーンアップし、同じ図を React・Vue・Svelte コンポーネントとして出力します。マークアップを貼り付けるかローカルの .svg ファイルを選ぶと、プレビュー、バイト数の表示、生成コードはすべてクリーンアップ後の要素から作られます。何も送信されず、ネットワークを切った状態でも動作します。

クリーンアップは図そのものには慎重で、実行や読み込みにつながるものには厳格です。座標、id、クラス名、ローカル CSS はそのまま残し、スクリプト、アニメーション要素、イベント属性、リモート参照は削除します。アニメーションや外部スタイルを削るとファイルの挙動が変わるため、使う前にプレビューを確認してください。

テキストエリアに SVG マークアップを貼り付けるか、.svg ファイルを選択します。選択したファイルはその場で読み込まれてクリーンアップされます。
「SVG を最適化」を押します。出力パネルにクリーンアップ後のマークアップ、プレビューに画像としての表示、3 つの指標に入力バイト数・出力バイト数・viewBox が出ます。
プレビューを元の図と見比べます。アニメーション、メタデータ、リモート参照は消えているため、装飾の多いアイコンは見た目が変わることがあります。
コンポーネント名を入力し、React・Vue・Svelte を選んで「コンポーネントを生成」を押すと、同じ SVG のコンポーネントコードが出力パネルに表示されます。
「コピー」または「ダウンロード」で現在の出力を取り出します。クリーンアップ済み SVG は .svg、コンポーネントは .jsx / .vue / .svelte で、名前はコンポーネント名のフィールドから付けられます。「クリア」は入力・ファイル選択・結果を空にします。

クリーンアップが変えるもの、残すもの、コンポーネントが前提にしているもの

クリーンアップが削除・保持・書き換えするもの

削除されるもの: <script>、<foreignObject>、<iframe>、<object>、<embed>、<audio>、<video>、アニメーション要素の <animate> <animateMotion> <animateTransform> <set>、すべての on* イベント属性、内部 #id 参照ではない href / xlink:href、リモートの url() を呼ぶ属性、@import やリモート url() を含む <style> ブロック、コメント、<metadata>、<desc>。残るもの: パスデータ、id、クラス名、rx・opacity・transform などのプレゼンテーション属性、ファイル内だけを参照する CSS です。検証では url(#g1) は残り、style="fill:url(https://…)" は削除されました。

書き換わるのはルートです。viewBox がない場合は width と height から計算し、どちらもなければ 0 0 24 24 を設定します。その後 width と height を外し、xmlns を付け、タグ間の空白を詰めます。ミニファイヤーではないので数値はそのまま残り、「M 4.000 4.0」のゼロも保持されます。逆に viewBox と xmlns が増える分、小さなアイコンは大きくなることがあります。サンプルのアイコンは 310 バイトから 248 バイトになり、指標は UTF-8 のバイト数を数えるため、CJK の文字は実際の占有バイト数で表示されます。

React・Vue・Svelte の出力

React は {...props} をルートに展開する関数コンポーネントを出力します。フレームワークが求める属性名は変換され、class は className に、stroke-linecap、fill-opacity、font-size、text-anchor、stop-color、clip-path は camelCase になるため、無効な DOM プロパティの警告は出ません。引用符内の値と <style> 内の CSS はそのまま残り、子要素のないアイコンは <svg … {...props} /> の自己終了タグになります。

Vue は <script setup> と defineProps({ size })、size に束縛した :width/:height を持つ単一ファイルコンポーネント、Svelte は export let size と width={size} height={size} を出力します。どちらも aria-hidden を付けますが、React はサイズを設定しません。ルートには viewBox しかないので、width と height を props で渡すか CSS で大きさを決めます。名前フィールドは PascalCase の識別子になり、空なら KivIcon、識別子の先頭に使えない文字で始まる場合は接頭辞が付き、3d-icon は Svg3dIcon として出力されます。

使う前に知っておきたい制限

パスの最適化や id の書き換えは行いません。両方で id="g1" を定義した 2 つのアイコンを同じページに置けば、手書きの SVG と同じように衝突します。アニメーションは保持ではなく削除され、ローカル規則とリモート url() が混在する <style> ブロックは丸ごと落ちます。元のファイルが外部スタイルシートに依存していた場合はプレビューを確認してください。

プレビューは blob URL を読み込んだ <img> なので、マークアップ内のスクリプトは実行されません。これはクリーンアップ後のファイルを忠実に表示するもので、セキュリティ監査ではありません。入力が不正な場合はメッセージを出し、前の結果は画面に残さず消去します。<svg> ルートは 1 つだけ必要で、  のような未定義の XML 実体参照は XML として解析されるため拒否されます。é と定義済みの 5 つの実体参照は使用できます。