9. FirefoxでSVGを表示させるには

2006.8.18　株式会社四次元データ　溝口佑爾

SVG 9章　FirefoxでSVGを表示させるには

9.1. FirefoxでSVGを表示させるには

9.1. FirefoxでSVGを表示させるには

ここまでのサンプルはすべて、1.2.で示したSVGをInternet Explorerで表示させる方法を使って表示させるものだったため、Firefoxからは見ることができませんでした。ここではFirefoxでSVGを表示させるための記述方法を紹介します。

1.親ドキュメントの文書に埋め込む方法

（例）
<?xml version="1.0"?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
        xmlns:svg="http://www.w3.org/2000/svg"> 
      <svg:svg width="300" height="300"> 
         ...  SVGの記述
      </svg:svg>

ただしFirefoxが混成XMLとして処理できるように、拡張子は .xml にする必要があります。(本来はContent-Type:application/vnd.mozilla.xul+xmlが必要)

2.単独のSVGファイルとして文書を作成する方法

単独のXMLファイルとして文書を作成します。

(例）
<?xml version="1.0"?> 
      <svg xmlns="http://www.w3.org/2000/svg">
         ...  SVGの記述 
      </svg>

これをHTML文書の中へ組み込むには、embed タグではなく iframe タグを使います。

(例)
<body> 
      <iframe src="SVGファイル名（url）" width="600" height="300" name="theSVG"> </iframe>
</body>

例えばこれを使って1.2のサンプルをFirefox表示用にすると次のようになります。(今度はFirefoxからは見られますが、Internet Explorerでは表示できなくなります。)

サンプルのソースを挙げておきます。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"> 
<rect x="10" y="10" width="200" height="200"
                             fill="none" stroke="red" />
<circle cx="110" cy="110" r="50" fill="blue" />
<text x="90" y="115" stroke="white" fill="white"
              font-family="MS-Gothic" font-size="30px">4DD</text>
</svg>