theme: smartblue
本文簡介
點贊 + 關(guān)注 + 收藏 = 學(xué)會了
技術(shù)一直在演變，在網(wǎng)頁中使用 SVG 的方法也層出不窮。每個時期都有對應(yīng)的最優(yōu)解。
所以我打算把我知道的 7種 SVG 的使用方法列舉出來，有備無患~
如果你還知道其他方法，可以在評論區(qū)補充~
1. 在瀏覽器直接打開
```svg
```
xml 是瀏覽器能讀取的格式，但如果希望 svg 能在瀏覽器中渲染出來，需要使用 xmlns 聲明渲染規(guī)則。
所以必須使用 xmlns="http://www.w3.org/2000/svg"。
2. 內(nèi)嵌到 HTML 中(推薦???)
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>svg demo</title> </head> <body> <div> <!-- 內(nèi)嵌到 HTML 中 --> <svg width="100%" height="100%" version="1.1"> <circle cx="50" cy="50" r="50" fill="hotpink"></circle> </svg> </div> </body> </html>
可以看到上面的代碼中，<svg> 標(biāo)簽并沒有使用 xmlns="http://www.w3.org/2000/svg" 聲明命名空間，這是因為 HTML 5 文檔使用 <!DOCTYPE html> 標(biāo)記，它允許跳過 SVG 命名空間聲明，HTML 解析器會自動識別 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。
在寫本文時，將 SVG 內(nèi)嵌到 HTML 中 的做法是最常見的，也是比較推薦的方式之一。
做特效時，這種使用方式也是比較輕松的。
3. CSS 背景圖(推薦?)
```html
```
SVG 也是一種圖片格式，所以按理說是能當(dāng)做背景圖來使用的。
一試，果然可以~
4. 使用 img 標(biāo)簽引入(推薦?)
html <img src="./case1.svg" width="100" height="100">
既然 SVG 可以在 CSS 中當(dāng)背景圖使用，那也可以在 <img> 標(biāo)簽里使用咯~
5. 使用 iframe 標(biāo)簽引入(不推薦?)
```html
```
iframe 可以在網(wǎng)頁里再嵌套一個網(wǎng)頁，既然 SVG 可以直接在瀏覽器打開，那使用 <iframe> 引用 SVG 同樣也是可以的。
需要注意的是，<iframe> 默認是有個邊框樣式的，如果你使用這種方式引入 SVG 可能還需要自己手動調(diào)節(jié)一下樣式。
6. 使用 embed 標(biāo)簽引入(不推薦?)
html <embed src="./case1.svg" width="100" height="100" />
<embed> 標(biāo)簽定義了一個容器，用來嵌入外部應(yīng)用或者互動程序。它也可以插入各種媒體資源。
<embed> 標(biāo)簽已經(jīng)被標(biāo)準(zhǔn)采用了。但它不能包含任何子內(nèi)容，因此如果嵌入失敗就沒有備用選項了。所以現(xiàn)階段來看，我不太推薦使用 embed 的方式引入 SVG 。
7. 使用 object 標(biāo)簽引入(不推薦?)
```html ```
<object> 是通過 data 屬性引入資源的。它可以用于嵌入圖像，類似 <img> ，也可以用于嵌入獨立的 HTML 文檔，類似 <iframe> 。
使用 <object> 嵌入 SVG 可以讓那些不能直接顯示 SVG 但又有 SVG 插件的老舊瀏覽器展示 SVG。
需要注意的是，在某些現(xiàn)代瀏覽器中，type 和 codebase 是可以不寫的。
type 用來聲明當(dāng)前引入的資源是屬于什么類型。
總結(jié)
在寫本時，我推薦使用 內(nèi)嵌到 HTML 的方式來做日常開發(fā)。
其他方式按照你實際需求去使用即可。
最后的 embed 和 object 這兩種方式可以當(dāng)做備用方案去使用。
代碼倉庫
?雷猴 SVG
推薦閱讀
??《Canvas 從入門到勸朋友放棄(圖解版)》
??《Fabric.js 從入門到膨脹》
??《『Three.js』起飛！》
??《console.log也能插圖！?。 ?/p>
??《純css實現(xiàn)117個Loading效果》
??《視差特效的原理和實現(xiàn)方法》文章來源：http://www.zghlxwxcb.cn/news/detail-459040.html
??《這18個網(wǎng)站能讓你的頁面背景炫酷起來》文章來源地址http://www.zghlxwxcb.cn/news/detail-459040.html
到了這里，關(guān)于SVG 在前端的7種使用方法，你還知道哪幾種？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
