SVG如何在web中使用

admin發表於2018-08-10
SVGWeb
本文不涉及具體的SVG程式碼，只總結一下將svg應用於web中的幾種方式。

一.直接嵌入到HTML中:

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
          cx="100" cy="50"
          r="40"
          stroke="black"
          stroke-width="5"
          fill="green" />
</svg>
</body>
</html>

更多內容可以參閱SVG文程式碼構成一章節。

二.使用<embed>標籤:

可以使用此標籤將SVG檔案引入到當前頁面。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<embed src="circle.svg" type="image/svg+xml" />

三.通過object標籤引入:

可以使用object標籤引入外部svg檔案到當前頁面。

程式碼例項如下:

[XML] 純文字檢視 複製程式碼
<object data="circle.svg" type="image/svg+xml"></object>

四.作為背景圖片引入:

可以作為元素的背景引入，程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
div {
  background: url("circle.svg") no-repeat center;
  background-size : 100px 100px;
}

五.通過iframe引入:

通過iframe也可以引入svg，程式碼如下:

[XML] 純文字檢視 複製程式碼
<iframe src="circle.svg"></iframe>

六.通過<img>標籤引入:

通過此標籤也可以引入svg檔案，就等同於一個圖片，程式碼如下:

[XML] 純文字檢視 複製程式碼
<img src="circle.svg"/>

七.連結到svg檔案:

可以直接通過超連結訪問svg檔案，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<a href="circle1.svg">螞蟻部落</a>

相關文章