SVG能夠做爲一個獨立的文件存在。但更多的時候,咱們但願他能集成在某個更大的文檔中,好比HTML。
將SVG插入到HTML中主要有如下幾種方式:css
這多是將SVG導入HTML文檔的最簡單的方法。將.svg
文件把它加到一個普通<img>
標籤內。html
<img src="example.svg" alt="example">
你須要確保你的服務器支持.svg
文件,可能大多數都是支持的,可是仍是查一下的好。
同時你也能夠在CSS中把.svg
文件做爲一個background-image導入。segmentfault
注意要加一個備用的.png圖像,以防瀏覽器沒法顯示svg。瀏覽器
.svg-bg { background: url("example.png"); /* fallback */ background-image: url("example.svg"); }
不足:安全
SVG做爲圖像引用時,服務器
大多數瀏覽器不會加載SVG自身引用的文件(其餘圖像,外部腳本,字體文件等)框架
依據瀏覽器的安全策略,SVG中定義的腳本也可能不會執行svg
和把SVG做爲圖像導入類似,你能夠把它做爲一個<object>
導入,經過data
屬性連接要導入的.svg
文件。注意,MIME type必須是image/svg+xml
。代碼以下:字體
<object type="image/svg+xml" data="example.svg" class="example"> My Example SVG </object>
相比使用<object>
,你也能夠把.svg
文件嵌入到一個<iframe>
框架內。代碼以下:url
<iframe src="example.svg" class="example"></iframe>
上面2種方法均可以使用CSS控制SVG的樣式,如:
.example { display: block; margin: 5em auto; border-radius: 10px; }
你沒必要必定把SVG放在一個單獨的文件中,由於你能夠直接在HTML中嵌入SVG。
<!DOCTYPE html> <html> <body> <svg> ... </svg> </body> </html>
直接嵌入的SVG會繼承父文檔的樣式,默認狀況下采用inline的方式進行顯示。
SVG並不難使用。尤爲,最簡單的是,你能夠在一個矢量圖形應用程序中建立一個圖像,而後將圖像導出爲一個.svg
文件,而後把它放入到一個<img>
、<object>
或者<iframe>
的HTML標籤中。你也能夠在CSS文件中放入.svg
文件,把它做爲一個background-image
。
參考文檔: