HTML5では、HTML文書中に直接SVGを書けるようになりました。これは「インラインSVG」や“SVG in HTML”, “SVG in text/html”などと呼ばれています。
ここでは、日の丸 (hinomaru.svg)とトリコロール (tricolour.svg)を直接HTML文書に書き込んでいます。インラインSVGに対応するブラウザであれば、ソースコードの後にSVGが表示されます。
インラインSVGはHTML5パーサを搭載するブラウザで表示できます。HTML5パーサは、Chrome 7、Firefox 4、Safari 5.1、Opera 11.60、Internet Explorer 10以降のバージョンで搭載されています。また、IE9はHTML5パーサを搭載していないものの、インラインSVGの表示に対応しています。
モバイル端末のブラウザについては、Android 3.0以降のAndroid標準ブラウザ、iOS 5以降のSafari、Chrome for Android, Firefox for Android, OperaがHTML5パーサを搭載しているため、インラインSVGを表示可能です。Windows Phone 7.5以降もIE9ベースのエンジンを搭載しているので、インラインSVGに対応しているものと考えられます。
インラインSVGのサンプル
<svg width="270" height="180" style="border: 1px solid #ddd; background: #fff">
<circle cx="135" cy="90" r="54" style="fill: #b22"></circle>
</svg><svg width="270" height="180" style="border: 1px solid #ddd; 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>ブラウザの対応状況
