HTMLとインラインCSSを foreignObject を使ってスケーラブルなSVGにラップします。ライブプレビューで確認し、そのまま使える .svg ファイルをダウンロードできます。すべてブラウザ内で処理されます。
SVGの foreignObject 要素を使うと、実際に動作するHTMLとCSSをベクター画像内に埋め込めます。拡大縮小してもきれいに表示され、SVGが使える場所ならどこでも利用できるため、バッジやカード、リッチなラベルの作成に最適です。
foreignObject で作られたSVGはスクリーンショットではなく、マークアップがファイル内でそのまま生きています。テキストは実際のテキストのままで、インラインCSSによるスタイルも保たれ、ラスタライズも行われないため、どんなズームレベルでも画像は鮮明なまま、ファイルサイズも通常数キロバイト程度です。この特性から、READMEバッジ、プロフィールカード、ダッシュボードウィジェットなど、スタイル付きのHTMLスニペットを1つの画像ファイルのようにホスティング・埋め込み・バージョン管理したい場面に最適です。
結果をWebブラウザで表示する場合はこのツールをお使いください。ブラウザは foreignObject をネイティブにレンダリングし、鮮明な表示を保てます。チャットアプリやドキュメント、デザインソフトなど、あらゆる場所で使えるピクセル画像が必要な場合は、代わりに HTML to Image コンバーターで同じマークアップをレンダリングしてください。PNG・JPG・PDFを出力できます。この2つのツールは補完関係にあり、一方はHTMLをスケーラブルなベクターとして保持し、もう一方はビットマップとして固定します。
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を出力できます。