SVG in HTMLのサンプル

HTML5では、SVGをHTMLに直接書き込み表示させることができるようになりました。Firefox 3.6以降のバージョンで内蔵されているHTML5 parserでは、実際にHTMLに書き込まれたSVGを表示することができます (HTML5 parserを有効にする必要があります)。

ここでは、日の丸 (hinomaru.svg)とトリコロール (tricolour.svg)を埋め込んでみました。

<svg width=270 height=180 style="border: 1px solid #eee; background: #fff">
  <circle cx=135 cy=90 r=54 style="fill: #b22"></circle>
</svg>

<svg width=270 height=180 style="border: 1px solid #eee; background: #fff">
  <rect x=0 y=0 width=90 height=180 style="fill: #33b"></rect>
  <rect x=180 y=0 width=90 height=180 style="fill: #d33"></rect>
</svg>