關于SVG檔案在Firefox中正确顯示的研究

最近因為做SVG方面的開發工作，是以研究起SVG的一些東西。

手頭上使用的資料是SVG官方的文檔，《SVG essentials》， 《基于XML的SVG應用指南》。

網上說，firefox,opera,都可以直接支援SVG，當 然安裝了SVG插件的IE也行。

馬上開始行動，代碼之 前，了無秘密。 寫一個最簡單的SVG文 件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg    width="1024"    height="768">     <rect        style="opacity:1;fill:#00ff00"        id="rect2160"        width="540"        height="511.42856"        x="42.857143"        y="158.07646" /> </svg>

使用安裝了Adobe SVGViewerd的IE浏覽器打開，可以正常顯示，如下圖：

再使用firefox打開，不行，不可以正常顯示，firefox把它當作xml檔案來顯示了，如下圖：

上網查資料，網上都說：firefox可以直接支援SVG，具體怎麼支援SVG，都沒提到。而且，好 像沒人遇到我這樣的問題。是不是其他人見到别人說支援，也就人雲亦雲，說支援，而自己沒去檢驗過。關于這點不可考究。

既然遇到問題，就解決它。首先我找了其他SVG的編輯軟體來看看。首先使用開源的Inkspace軟體。用它編輯了一個SVG檔案，然後用firefox打開，可以正常顯示。這證明 了，friefox是 可以正常支援SVG的。具體為什麼，繼續研究。

  我對比了Inkspace生成的檔案源代碼和我寫的SVG檔案源代碼，發現Inkspace 生成的檔案裡面多了一行東西：

xmlns="http://www.w3.org/2000/svg"

我把這行代碼加入到我的SVG文 件中，程式設計下面的樣子：

?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg

   width="1024"

   height="768" xmlns="http://www.w3.org/2000/svg">

    <rect

       style="opacity:1;fill:#00ff00"

       id="rect2160"

       width="540"

       height="511.42856"

       x="42.857143"

       y="158.07646" />

</svg>

儲存後再用Firefox打開，OK,這次可以正常顯示了，如下圖：

做技術，我們要知其因。為什麼加上那一行代碼以後就可以正常顯示了 呢？

查資料

我在《SVG essentials》查到這麼一段：

SVG uses the URI http://www.w3.org/2000/svg for its namespace. The URI is just an

identifier — opening that page in a Web browser reveals some links to the SVG, XML

1.0, and Namespaces in XML specifications. Programs processing documents with

multiple vocabularies can use the namespaces to figure out which vocabulary they are

handling at any given point in a document.

SVG applies the namespace in the root element of SVG documents:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">

....

本文轉自 h2appy  51CTO部落格，原文連結：http://blog.51cto.com/h2appy/332600，如需轉載請自行聯系原作者