SVG可以透過多種方式導入到HTML中:
把.svg文件嵌入到一個<iframe>
框架內
<iframe src = "example.svg" class = "example" width="200" height="200"></ iframe >
用矢量工具創建一個圖像,將圖像導出為.svg文件,然後把它加到一個普通<img>
標籤內。
<img src = "example.svg">
在CSS中把.svg文件作為一個background-image
導入。
div {
background-image: url('my-svg-image.svg');
background-size : 100px 100px;
}
通過data屬性鏈接要導入,你可以把它作為一個<object>
導入。
<object type = "image/svg+xml" data = "example.svg">
My Example SVG
</object >
< body >
< svg width = "300" height = "200" class = "example" >
< rect width = "100%" height = "100%" fill = "green" />
</ svg >
</ body >