在網頁中使用SVG

SVG能夠做爲一個獨立的文件存在。但更多的時候,咱們但願他能集成在某個更大的文檔中,好比HTML。
將SVG插入到HTML中主要有如下幾種方式:css

  • 將 SVG 做爲圖像導入
  • 將 SVG放入 iframe 中導入
  • 將 SVG 做爲object對象導入
  • 使用內聯 SVG

 

將SVG做爲圖像導入

這多是將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

 

使用Object 或 iframe導入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

你沒必要必定把SVG放在一個單獨的文件中,由於你能夠直接在HTML中嵌入SVG。

<!DOCTYPE html>
<html>
  <body>
    <svg>
      ...
    </svg>
  </body>
</html>

直接嵌入的SVG會繼承父文檔的樣式,默認狀況下采用inline的方式進行顯示。

 

總結:

SVG並不難使用。尤爲,最簡單的是,你能夠在一個矢量圖形應用程序中建立一個圖像,而後將圖像導出爲一個.svg文件,而後把它放入到一個<img><object>或者<iframe>的HTML標籤中。你也能夠在CSS文件中放入.svg文件,把它做爲一個background-image

 

參考文檔:

https://segmentfault.com/a/1190000004447771

https://www.w3cplus.com/svg/svg-basics.html

相關文章
相關標籤/搜索