使い方
- Base64 文字列または data:image/svg+xml;base64 URI を貼り付けます。
- プレビューと、判別された形式、画像サイズを確認します。
- 「保存形式」は SVG のままにします。入力が SVG の場合、ファイルは SVG テキストとして保存されます。
- .svg ファイルをダウンロードします。マークアップを読んだり変更したりする場合は、エディターで開いてください。
Base64 の中の SVG を見分ける
他の画像形式と異なり、SVG はプレーンな XML テキストです。<svg で始まるファイルは PHN2Zy で始まる Base64 にエンコードされ、XML 宣言（<?xml）で始まるファイルは PD94bWwg で始まる Base64 になります。Base64 の SVG は、CSS の背景画像、アイコンセット、デザインツールのエクスポート、メールテンプレートでよく使われます。MIME タイプは image/svg+xml です。
SVG の data URI の多くは Base64 ではなく、data:image/svg+xml,%3Csvg... のようなパーセントエンコードされたテキストです。このツールは Base64 を前提としているため、そうしたデータは Data URI 生成ツールで解析してください。
SVG のコードを読む
プレビューではグラフィックの描画結果を確認できますが、本当に知りたいのはマークアップであることも多いでしょう。パスデータ、色、viewBox、埋め込みフォントなどです。「オリジナル」または SVG でファイルをダウンロードして任意のテキストエディターで開くか、同じ Base64 を Base64 デコードに貼り付ければ、すぐに XML をテキストとして確認できます。
ラスター画像の SVG 化はベクター化ではない
Base64 のデータが PNG、JPEG などのビットマップの場合、SVG を選択すると、元のピクセルを <image> 要素に格納した SVG ファイルが作成されます。SVG ファイルしか受け付けないツールで使う場合には便利ですが、画像をトレースして図形に変換するわけではありません。拡大すれば画像はぼやけたままで、ピクセルが Base64 として内部に格納されるため、ファイルは元のビットマップより大きくなります。本物のベクターパスが必要な場合は、Potrace や Inkscape の「ビットマップのトレース」機能などのトレースソフトウェアを使用してください。
信頼できない SVG の扱い
SVG には <script> 要素、イベントハンドラー属性、外部リソースへのリンクを含めることができます。<img> タグや CSS の背景を使って SVG を画像として表示する場合、ブラウザはこれらをすべてブロックします。一方、ファイルをブラウザのタブで直接開いた場合や、マークアップをページにインラインで貼り付けた場合は、スクリプトが実行され、外部リソースが読み込まれる可能性があります。出どころの分からない SVG をそのように使う前には、内容を確認するか無害化してください。
よくある質問
PNG を本物のベクター SVG に変換できますか？
いいえ。ビットマップを SVG に変換しても、SVG ファイル内に画像を埋め込むだけです。拡大縮小したときの見え方はベクター画像とは異なり、元のビットマップと同じです。
SVG の data URI をデコードできないのはなぜですか？
;base64, が含まれているか確認してください。含まれていない場合、その SVG はパーセントエンコードされたテキストか生のテキストで、Base64 ではありません。Data URI 生成ツールで解析できます。出どころの分からない SVG をデコードしても安全ですか？
デコードして保存するだけなら、結果は単なるテキストなので無害です。SVG 内のスクリプトが実行されるのは、文書として開いた場合か、Web ページにインラインで挿入した場合だけです。
SVG を PNG に変換すると、フォントやリンクされた画像が消えるのはなぜですか？
SVG をラスタライズする際、ブラウザは SVG を画像として読み込みます。このモードでは SVG が外部ファイルを取得できないため、Web フォントやリンクされた画像は読み込まれず、代わりにデフォルトのフォントが使われます。フォントと画像を SVG に埋め込んで、単体で完結するファイルにしてください。