SVGをData URIに

SVGを、別ファイルなしでCSSやHTMLに貼り付けられるデータURIに変換します。まずSVGを最適化し、URLエンコード（通常いちばん短い）、Base64、またはそのまま使える background-image: url("data:image/svg+xml,…") の1行として出力します。スタイルシートと一緒に読み込みたい小さなアイコンやチェックマーク、パターンに便利です。

使い方

1. SVGを開くか、プレビューにドロップするか、コードを貼り付けます。最初はサンプルが表示されています。
2. 最適化：残す小数桁数と整理の内容を選びます。前後のサイズが表示され、コード・Data URI・CSSをコピーするか、ファイルをダウンロードできます。
3. PNGに変換：幅か高さを入力（または2×、4×、1024…をタップ）し、PNG・JPG・WebPと背景を選んでダウンロードします。
4. ベクター化：PNGかJPGをドロップし、色数と細かさを選んでSVGをダウンロードします。
5. コード：マークアップを編集すると、入力に合わせてプレビューが更新されます。

• 最適化ではSVGの幅・高さ・viewBoxは変更せず、参照されているIDは残し、パスの数値もずれないよう丸めます。複雑なファイルは元のファイルと置き換える前にプレビューで確認してください。
• ほとんどのアイコンは小数2桁で十分です。大きな図面などは3〜4桁にしてください。
• ベクター化はロゴ、アイコン、ベタ塗りのイラストに向いています。写真は大きな形が多数になるので、色数を減らすとポスター風になります。
• ファイルはブラウザ内で処理されます。SVG内のスクリプトは実行されず、プレビューは画像として表示されます。

SVGが重くなる理由

デザインツールは図形以外にも多くのものを書き出します。編集ソフトのメタデータ、コメント、使われていないIDや定義、空のグループ、初期値のままの属性、小数点以下6桁以上の座標などです。一般的なアイコンでは、こうした余分な部分がファイルの大半を占めることもあります。最適化ではこれらを取り除き、パスの数値を指定した精度に丸め、不要なグループをまとめます。ルート要素の幅・高さ・viewBoxには触れず、参照されているIDも残します。

画面表示用のアイコンやロゴなら小数点以下2桁で十分です。大きな技術図面では3〜4桁が必要な場合もあります。マスクやフィルター、埋め込みフォントを含むファイルは特に、元ファイルを置き換える前にプレビューで見比べてください。

ベクターかラスターか

SVGは図形を記述する形式なので、どんな大きさでもくっきり表示でき、アイコン・ロゴ・図ではファイルも小さく済みます。写真はJPG・PNG・WebPのほうが向いています。アプリストアのアイコン、PNGのファビコン、SNS用画像のようにビットマップが必要な場面では、必要なピクセル数ちょうどで書き出しましょう。24×24のviewBoxを1024pxで書き出しても、引き伸ばしではなく描き直すのでぼやけません。JPGは透明を扱えないため、背景色を選んでください。

トレースとデータURI

トレースは、ロゴ・アイコン・サイン・線画のように色数が少なく輪郭のはっきりした絵で最もうまくいきます。写真は大きな図形の集まりになります。CSSで使う小さなアイコンなら、SVGはテキストなので、約33%増えるBase64よりURLエンコードしたデータURIのほうが短くなるのが普通です。

よくある質問