SVG 在前端的7種使用方法，你還知道哪幾種？

文簡(jiǎn)介

點(diǎn)贊 + 關(guān)注 + 收藏=學(xué)會(huì)了

技術(shù)一直在演變，在網(wǎng)頁中使用 SVG 的方法也層出不窮。每個(gè)時(shí)期都有對(duì)應(yīng)的最優(yōu)解。

所以我打算把我知道的 7種 SVG 的使用方法列舉出來，有備無患~

如果你還知道其他方法，可以在評(píng)論區(qū)補(bǔ)充~

1. 在瀏覽器直接打開

<?xml version="1.0" ?>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>雷猴</title>
  <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>

xml 是瀏覽器能讀取的格式，但如果希望 svg 能在瀏覽器中渲染出來，需要使用 xmlns 聲明渲染規(guī)則。

所以必須使用 xmlns="http://www.w3.org/2000/svg"。

2. 內(nèi)嵌到 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" 聲明命名空間，這是因?yàn)?HTML 5 文檔使用 <!DOCTYPE html> 標(biāo)記，它允許跳過 SVG 命名空間聲明，HTML 解析器會(huì)自動(dòng)識(shí)別 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。

在寫本文時(shí)，將 SVG 內(nèi)嵌到 HTML 中 的做法是最常見的，也是比較推薦的方式之一。

做特效時(shí)，這種使用方式也是比較輕松的。

3. CSS 背景圖（推薦?）

<style>
.svg_bg_img {
  width: 100px;
  height: 100px;
  background: url('./case1.svg') no-repeat;
  background-size: 100px 100px;
}
</style>

<div class="svg_bg_img"></div>

SVG 也是一種圖片格式，所以按理說是能當(dāng)做背景圖來使用的。

一試，果然可以~

4. 使用 img 標(biāo)簽引入（推薦?）

<img src="./case1.svg" width="100" height="100">

既然 SVG 可以在 CSS 中當(dāng)背景圖使用，那也可以在 <img> 標(biāo)簽里使用咯~

5. 使用 iframe 標(biāo)簽引入（不推薦?）

<iframe
  src="./case1.svg"
  width="100"
  height="100"
></iframe>

iframe 可以在網(wǎng)頁里再嵌套一個(gè)網(wǎng)頁，既然 SVG 可以直接在瀏覽器打開，那使用 <iframe> 引用 SVG 同樣也是可以的。

需要注意的是，<iframe> 默認(rèn)是有個(gè)邊框樣式的，如果你使用這種方式引入 SVG 可能還需要自己手動(dòng)調(diào)節(jié)一下樣式。

6. 使用 embed 標(biāo)簽引入（不推薦?）

<embed
  src="./case1.svg"
  width="100"
  height="100"
/>

7. 使用 object 標(biāo)簽引入（不推薦?）

<object
  data="./case1.svg"
  type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install"
></object>

使用 <object> 嵌入 SVG 可以讓那些不能直接顯示 SVG 但又有 SVG 插件的老舊瀏覽器展示 SVG。

需要注意的是，在某些現(xiàn)代瀏覽器中，type 和 codebase 是可以不寫的。

type 用來聲明當(dāng)前引入的資源是屬于什么類型。

總結(jié)

在寫本時(shí)，我推薦使用 內(nèi)嵌到 HTML 的方式來做日常開發(fā)。

其他方式按照你實(shí)際需求去使用即可。

最后的 embed 和 object 這兩種方式可以當(dāng)做備用方案去使用。

代碼倉(cāng)庫(kù)

?雷猴 SVG

安裝

$ npm i css.gg -S

包含以下目錄及文件。

快速使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- You can add this link or any other CDN alternatives as mentioned above -->
    <link href='https://css.gg/css' rel='stylesheet'>

</head>
<body>

    <!-- Using i tag  -->
    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->
    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->
    <gg-icon class="gg- {ICONNAME} "></gg-icon>

</body>
</html>

另外還可 CSS @import引入，SVG、JSON、XML、React等其它方式。

純CSS、SVG、Figma UI Icons 可用在 SVG雪碧圖，styled-components等。

so perfect，非常不錯(cuò)的一款開源圖標(biāo)庫(kù)。

# 官網(wǎng)地址
https://css.gg/

# 倉(cāng)庫(kù)地址
https://github.com/astrit/css.gg

ok，今天就介紹到這里。如果小伙伴們有興趣的話，可以去試一試哈！

在線咨詢

上一篇：分享6個(gè)百度文庫(kù)vip解析下載的好網(wǎng)站
下一篇：CSS居中對(duì)齊總結(jié)，你總結(jié)的為什么容易忘記？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

SVG 在前端的7種使用方法，你還知道哪幾種？

文簡(jiǎn)介

1. 在瀏覽器直接打開

2. 內(nèi)嵌到 HTML 中（推薦???）

3. CSS 背景圖（推薦?）

4. 使用 img 標(biāo)簽引入（推薦?）

5. 使用 iframe 標(biāo)簽引入（不推薦?）

6. 使用 embed 標(biāo)簽引入（不推薦?）

7. 使用 object 標(biāo)簽引入（不推薦?）

總結(jié)

代碼倉(cāng)庫(kù)

推薦閱讀

安裝

快速使用

您的項(xiàng)目需求

整合營(yíng)銷服務(wù)商

SVG 在前端的7種使用方法，你還知道哪幾種？

文簡(jiǎn)介

1. 在瀏覽器直接打開

2. 內(nèi)嵌到 HTML 中（推薦???）

3. CSS 背景圖（推薦?）

4. 使用 img 標(biāo)簽引入（推薦?）

5. 使用 iframe 標(biāo)簽引入（不推薦?）

6. 使用 embed 標(biāo)簽引入（不推薦?）

7. 使用 object 標(biāo)簽引入（不推薦?）

總結(jié)

代碼倉(cāng)庫(kù)

推薦閱讀

安裝

快速使用

您的項(xiàng)目需求

SVG 在前端的7種使用方法，你還知道哪幾種？