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

文簡介

點贊 + 關注 + 收藏=學會了

技術一直在演變，在網頁中使用 SVG 的方法也層出不窮。每個時期都有對應的最優解。

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

如果你還知道其他方法，可以在評論區補充~

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 聲明渲染規則。

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

2. 內嵌到 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>
    <!-- 內嵌到 HTML 中 -->
    <svg width="100%" height="100%" version="1.1">
      <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
    </svg>
  </div>
</body>
</html>

可以看到上面的代碼中，<svg> 標簽并沒有使用 xmlns="http://www.w3.org/2000/svg" 聲明命名空間，這是因為 HTML 5 文檔使用 <!DOCTYPE html> 標記，它允許跳過 SVG 命名空間聲明，HTML 解析器會自動識別 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。

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

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

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 也是一種圖片格式，所以按理說是能當做背景圖來使用的。

一試，果然可以~

4. 使用 img 標簽引入（推薦?）

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

既然 SVG 可以在 CSS 中當背景圖使用，那也可以在 <img> 標簽里使用咯~

5. 使用 iframe 標簽引入（不推薦?）

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

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

需要注意的是，<iframe> 默認是有個邊框樣式的，如果你使用這種方式引入 SVG 可能還需要自己手動調節一下樣式。

6. 使用 embed 標簽引入（不推薦?）

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

7. 使用 object 標簽引入（不推薦?）

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

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

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

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

總結

在寫本時，我推薦使用 內嵌到 HTML 的方式來做日常開發。

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

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

代碼倉庫

?雷猴 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，非常不錯的一款開源圖標庫。

# 官網地址
https://css.gg/

# 倉庫地址
https://github.com/astrit/css.gg

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

在線咨詢

上一篇：分享6個百度文庫vip解析下載的好網站
下一篇：CSS居中對齊總結，你總結的為什么容易忘記？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商