SVG 學習

前置導入

SVG可以透過多種方式導入到HTML中:

IFRAME

把.svg文件嵌入到一個<iframe>框架內

<iframe src = "example.svg" class = "example" width="200" height="200"></ iframe >

IMG

用矢量工具創建一個圖像,將圖像導出為.svg文件,然後把它加到一個普通<img>標籤內。

<img src = "example.svg">

SVG當背景圖片

在CSS中把.svg文件作為一個background-image導入。

div {
    background-image: url('my-svg-image.svg');
    background-size : 100px 100px;
}

Object導入

通過data屬性鏈接要導入,你可以把它作為一個<object>導入。

<object  type = "image/svg+xml"  data = "example.svg">   
    My Example SVG
</object >

HTML嵌入式

< body > 
  < svg  width = "300"  height = "200"  class = "example" > 
    < rect  width = "100%"  height = "100%"  fill = "green" /> 
  </ svg > 
</ body >