SVG→HTML変換

SVGをHTMLにオンラインで変換

SVGファイルを選択するかマークアップを貼り付けて、HTMLページ用のインラインSVGを作成します。結果をプレビューし、最適化の設定を調整してコードをコピーできます。解析、最適化、変換はすべてブラウザ内で行われ、SVGがサーバーに送信されることはありません。

レスポンシブなインラインSVGを用意する

viewBoxを残すと、SVGの座標系が保たれます。使えるviewBoxがある場合は固定の幅と高さを削除し、サイズは独自のCSSで指定してください。

SVGのサイズと削減率の見方

「元のサイズ」は入力したSVGのサイズです。「最適化後のSVGサイズ」は、コメントの削除、座標の丸め、コードの圧縮など、選択したオプションで処理した後のサイズです。サイズはkBで表示され、1kBは1,000バイトです。「削減率」は減ったサイズの割合で、10kBから7kBになれば30%の削減です。読みやすい整形などで出力のほうが大きくなった場合は、代わりに「サイズ増加」が表示されます。これらの数値はSVGマークアップ同士の比較で、JSX、React、CSS Data URI、Base64で書き出したもののサイズではありません。

小数点以下の桁数とインデント

「小数点以下の桁数」は、座標や数値属性で小数点以下を何桁残すかを決めます。桁数を2にすると、12.34567は12.35になります。桁数を減らすとファイルサイズを小さくできますが、細部が変わることがあります。初期値の3はあくまで目安なので、プレビューで確認してください。インデントはスペース2つ、スペース4つ、タブから選べ、画像を変えずにHTMLやJSXのコードを読みやすくします。「SVGを圧縮」は不要な空白を取り除いて出力をコンパクトにするため、圧縮がオンの間はインデントを使えません。

HTML、JSX、ReactとSVGのData URI

HTML出力はインラインSVGのマークアップで、SVGファイルとしてダウンロードされます。JSXは属性名とインラインスタイルをReact向けに書き換えます。「Reactコンポーネント」は、それを標準のSVG propsを受け取るTypeScriptの関数で包みます。CSS Data URIはbackground-imageの宣言を、Base64はエンコードしたSVG画像のURIを生成します。サイズの統計は最適化後のSVGについてのもので、よりサイズの大きいエンコード形式のものではありません。1つのページでインラインのコピーを複数使う前に、IDを確認してください。

静的なSVGをローカルで処理

プレビューは実行可能なページのマークアップではなく、分離された画像として表示されます。スクリプト、埋め込みHTML、アニメーション、外部画像、スタイルシートは削除されます。対応しているインラインの表示スタイルと、ローカルのフラグメント参照は残ります。このツールは静的な図柄向けで、対応していない機能を使っていると見た目が変わることがあります。currentColorは単色の塗りと線を変更し、インラインで使うと色を親から継承します。画像のプレビューでは独自の色のコンテキストが使われます。