HTML→SVG
foreignObject を使って、HTML とインライン CSS を拡大縮小できる SVG に収めます。ライブプレビューを見ながら、.svg・PNG・JPG としてダウンロードできます。すべてブラウザー内で動作します。
スケーラブルなベクターに埋め込まれたHTML
SVGの foreignObject 要素を使うと、実際に動作するHTMLとCSSをベクター画像内に埋め込めます。拡大縮小してもきれいに表示され、SVGが使える場所ならどこでも利用できるため、バッジやカード、リッチなラベルの作成に最適です。
HTMLをSVGにラップするメリット
foreignObject で作られたSVGはスクリーンショットではなく、マークアップがファイル内でそのまま生きています。テキストは実際のテキストのままで、インラインCSSによるスタイルも保たれ、ラスタライズも行われないため、どんなズームレベルでも画像は鮮明なまま、ファイルサイズも通常数キロバイト程度です。この特性から、READMEバッジ、プロフィールカード、ダッシュボードウィジェットなど、スタイル付きのHTMLスニペットを1つの画像ファイルのようにホスティング・埋め込み・バージョン管理したい場面に最適です。
ベクターかスクリーンショットか、どちらを選ぶべき？
結果をウェブブラウザーで表示する場合は、このツールを使ってください。ブラウザーは foreignObject をネイティブに描画し、鮮明さを保ちます。ベクターはマークアップを生きたまま拡大縮小できる状態で保つため、どのサイズでも鮮明で、ファイルも小さいままです。一方スクリーンショットは、同じマークアップを固定されたピクセルの格子に固めます。SVG が使えない場所では便利ですが、後からスタイルを変えたり拡大したりすることはできません。
よくある質問
HTMLをSVGに変換する際に知っておきたいことをまとめました。
HTMLはSVGの <foreignObject> 内に配置され、ブラウザによってベクターの一部としてレンダリングされます。全体が画質を落とさず拡大縮小できます。
インラインCSSとdata-URI形式の画像を使うのが最適です。外部リソースは、SVGをサイト外で開いたときに読み込まれない場合があるため、できるだけインライン化してください。
いいえ。SVGはすべてブラウザ内で生成されます。
はい。生成前に任意の幅と高さをピクセルで入力できます。これらはSVGキャンバスとviewBoxを定義し、ベクター形式のため後から拡大縮小しても画質は劣化しません。
foreignObjectはWebブラウザでレンダリングされますが、InkscapeやIllustratorなど多くのグラフィックエディターでは完全にはサポートされていません。最適な結果を得るには、SVGはWebページやブラウザベースのツールで使用してください。
このツールはマークアップをベクターとして保持し、ラスタライズは行いません。ピクセル画像が必要な場合は、同じHTMLをHTML to Imageツールでレンダリングしてください。PNG・JPG・PDFを出力できます。