前端引入及使用svg圖片的多種方式大全

更新時間：2025年11月03日 11:30:19 作者：じòぴé南冸じょうげん

SVG是一種繪圖技術,SVG的全名叫可縮放矢量圖形,這篇文章主要介紹了前端引入及使用svg圖片的多種方式大全,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在Web開發(fā)中，使用SVG（可縮放矢量圖形）有多種方式，每種方式都有其優(yōu)缺點和適用場景。

下面將詳細介紹前端引入和使用SVG圖片的各種方式。

1. 直接內聯（Inline SVG）

將SVG代碼直接嵌入到HTML中，作為DOM的一部分。

優(yōu)點：可以直接通過CSS和JavaScript操作SVG的各個部分，實現交互和動畫。
缺點：會增加HTML文件大小，且不易緩存。

<!DOCTYPE html>
<html>
<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>
</html>

2. 使用<img>標簽

將SVG文件作為外部資源引入，類似于使用其他圖片格式。

優(yōu)點：簡單，易于使用，可以緩存。
缺點：不能通過CSS或JavaScript操作SVG內部元素。

   <img src="@/assets/images/tubes/suiku.svg" alt="">

如果需要修改里面的內容,可以直接用第一種內聯的方法,就是東西比較多：

 <div>
                <svg
                  version="1.1"
                  viewBox="0 0 129 128"
                  xmlns="http://www.w3.org/2000/svg"
                  width="48"
                  height="48"
                >
                  <path
                    d="M0 0 C1.4282618 0.00031703 2.85654759 0.01163717 4.28466797 0.03173828 C5.41242142 0.03598312 5.41242142 0.03598312 6.56295776 0.04031372 C8.96775125 0.05152204 11.37217428 0.07662726 13.77685547 0.10205078 C15.40575635 0.11207976 17.03466305 0.12120576 18.66357422 0.12939453 C22.65981103 0.15146343 26.65577041 0.18599728 30.65185547 0.22705078 C33.46220544 6.12925495 34.91581508 12.01889595 36.30322266 18.39135742 C36.67204811 20.04629463 36.67204811 20.04629463 37.04832458 21.73466492 C37.85570155 25.3672853 38.65271555 29.00208125 39.44873047 32.63720703 C40.00705334 35.16880102 40.56567175 37.70032985 41.12457275 40.23179626 C42.29260274 45.53068731 43.45525752 50.83071953 44.61425781 56.1315918 C45.95243671 62.25127207 47.30389185 68.36791422 48.66177058 74.48325068 C49.97064489 80.38056912 51.26720522 86.28052122 52.55899811 92.1816082 C53.10893604 94.68661235 53.66237894 97.19084969 54.21938324 99.69429207 C54.99616968 103.19136003 55.75887343 106.69121546 56.51806641 110.19213867 C56.75071701 111.22555389 56.98336761 112.25896912 57.22306824 113.32369995 C58.2731005 118.23586462 59.10288291 122.27919485 57.65185547 127.22705078 C55.89907811 128.97982814 53.44249551 128.36373593 51.06225586 128.37231445 C49.27018456 128.38188423 49.27018456 128.38188423 47.44190979 128.39164734 C46.14091843 128.39276016 44.83992706 128.39387299 43.49951172 128.39501953 C42.160517 128.39823054 40.82152265 128.40159449 39.48252869 128.40510559 C36.67218207 128.41110287 33.86186624 128.41294489 31.05151367 128.41235352 C27.44539187 128.41225187 23.83946689 128.42590323 20.23339176 128.44312572 C17.46678252 128.45422937 14.70022109 128.45627323 11.93359184 128.45574379 C9.95596232 128.45750268 7.97834772 128.4683543 6.00074768 128.47929382 C4.80288132 128.47621719 3.60501495 128.47314056 2.37084961 128.4699707 C0.78319542 128.47210823 0.78319542 128.47210823 -0.83653259 128.47428894 C-3.34814453 128.22705078 -3.34814453 128.22705078 -5.34814453 126.22705078 C-5.59982681 124.04998779 -5.59982681 124.04998779 -5.60211182 121.29248047 C-5.60775146 120.24926636 -5.61339111 119.20605225 -5.61920166 118.13122559 C-5.6151532 116.98206665 -5.61110474 115.83290771 -5.60693359 114.64892578 C-5.61043823 113.44240356 -5.61394287 112.23588135 -5.61755371 110.99279785 C-5.62486264 107.67875058 -5.6231288 104.36495207 -5.61679554 101.05091858 C-5.61174153 97.5871649 -5.61642532 94.12342205 -5.61956787 90.65966797 C-5.62320927 84.84226568 -5.61840388 79.02491412 -5.60888672 73.20751953 C-5.59800181 66.47623504 -5.60152726 59.74507169 -5.61253953 53.01379013 C-5.62160747 47.24050736 -5.62290011 41.46726113 -5.61766219 35.69397354 C-5.61453976 32.24318709 -5.61414058 28.79245763 -5.62073517 25.3416748 C-5.62757047 21.496127 -5.6181039 17.65071554 -5.60693359 13.80517578 C-5.61300629 12.08143738 -5.61300629 12.08143738 -5.61920166 10.32287598 C-5.61356201 9.27966187 -5.60792236 8.23644775 -5.60211182 7.16162109 C-5.60135777 6.25164368 -5.60060371 5.34166626 -5.59982681 4.40411377 C-5.15297779 0.53884978 -3.70217914 0.25105925 0 0 Z "
                    :fill="showType === 1 ? '#e3ed2f' : '#FFFFFF'"
                    transform="translate(5.34814453125,-0.22705078125)"
                  />
                  <path
                    d="M0 0 C7.09210691 2.60526376 13.82305336 0.41861648 20.5 -2.5 C21.46808594 -2.96664063 22.43617187 -3.43328125 23.43359375 -3.9140625 C26.26571056 -4.94927905 27.33381611 -5.06242728 30.0625 -3.875 C32.0625 -1.875 32.0625 -1.875 32.125 0.4375 C30.29531379 5.06552982 26.34759899 7.06765018 22.01953125 9.0703125 C12.60669565 12.60226903 3.79402286 13.13845735 -5.5546875 9.31640625 C-7.9375 8.125 -7.9375 8.125 -10.9375 5.875 C-15.53902333 3.19077806 -19.73790124 3.4137667 -24.9375 4.125 C-27.84015522 4.99384848 -30.60762607 6.03039045 -33.41796875 7.16015625 C-36.6863084 8.41175298 -39.44430546 8.97635342 -42.9375 9.125 C-44.9375 7.125 -44.9375 7.125 -45.375 4.75 C-44.9375 2.125 -44.9375 2.125 -43.0625 0.0625 C-28.39505784 -9.03131414 -14.40158039 -9.19249812 0 0 Z "
                    :fill="showType === 1 ? '#e3ed2f' : '#FFFFFF'"
                    transform="translate(96.9375,34.875)"
                  />
                  <path
                    d="M0 0 C1.65625 1.16796875 1.65625 1.16796875 3.15234375 2.75 C5.27690515 4.75315789 7.48989955 4.97413287 10.328125 5.2421875 C15.87415055 5.06538467 21.07608802 3.22141007 25.65625 0.16796875 C28.84375 0.04296875 28.84375 0.04296875 31.65625 0.16796875 C33.84101904 4.53750683 33.84101904 4.53750683 33.078125 7.140625 C31.09736319 9.96484307 28.87871638 10.88246823 25.78125 12.35546875 C24.73195312 12.86464844 23.68265625 13.37382813 22.6015625 13.8984375 C15.84383516 16.81125101 9.01092948 17.24828926 1.96875 14.98046875 C-0.59169039 13.57947307 -2.53075227 12.26464713 -4.78125 10.48046875 C-7.83428977 8.24157292 -10.27509663 7.48469431 -14.1640625 7.734375 C-18.46191522 8.5893242 -22.36181509 10.3881153 -26.34375 12.16796875 C-28.00784336 12.84103301 -29.67383047 13.50949249 -31.34375 14.16796875 C-33.40625 12.48046875 -33.40625 12.48046875 -35.34375 10.16796875 C-35.42615415 6.87180271 -34.69709559 5.57005166 -32.53125 3.10546875 C-22.5858974 -2.93974558 -10.58961511 -5.85569819 0 0 Z "
                    :fill="showType === 1 ? '#e3ed2f' : '#FFFFFF'"
                    transform="translate(95.34375,66.83203125)"
                  />
                  <path
                    d="M0 0 C0.928125 0.886875 1.85625 1.77375 2.8125 2.6875 C6.4419222 5.32061022 8.19592766 5.72579204 12.55859375 5.51171875 C16.33586247 4.72000323 19.44028552 2.95577237 22.73828125 0.99609375 C25.34788106 -0.15321186 26.38439799 0.000445 29 1 C29.875 4.1875 29.875 4.1875 30 8 C25.5179724 13.05664652 19.99843818 15.52135485 13.32421875 16.3203125 C7.00982608 16.58232049 2.20285634 15.68431932 -3 12 C-3.680625 11.2575 -4.36125 10.515 -5.0625 9.75 C-6.9818693 7.68370868 -6.9818693 7.68370868 -10.3125 7.5625 C-15.14061548 8.13532726 -18.95310199 9.79594235 -23.125 12.25 C-25.70937541 13.28375016 -27.37889596 12.77924715 -30 12 C-31 11 -31 11 -31.625 8.3125 C-30.87576038 4.34153 -30.15835396 3.97561555 -26.9375 1.75 C-18.42709014 -3.32172631 -8.7438439 -5.63492162 0 0 Z "
                    :fill="showType === 1 ? '#e3ed2f' : '#FFFFFF'"
                    transform="translate(99,104)"
                  />
                </svg>
              </div>

3. 使用CSS背景圖

將SVG作為元素的背景圖片。

優(yōu)點：可以像其他背景圖一樣使用，支持CSS雪碧圖。
缺點：同樣不能操作SVG內部元素。

.element {
  background-image: url('image.svg');
}

4. 使用<object>標簽

通過<object>標簽嵌入SVG，可以保留SVG的交互性和腳本執(zhí)行。

優(yōu)點：支持腳本和交互，不會污染主文檔的DOM。
缺點：樣式和腳本可能會受到同源策略的限制。

<object type="image/svg+xml" data="image.svg"></object>

5. 使用<embed>標簽

與<object>類似，但<embed>是HTML5標準的一部分，通常用于插件內容，也可以用于SVG。

優(yōu)點：簡單，支持交互和腳本。
缺點：不推薦使用，因為它是舊標準，且在現代HTML中已被<object>替代。

<embed src="image.svg" type="image/svg+xml">

6. 使用<iframe>標簽

將SVG文件嵌入到<iframe>中。

優(yōu)點：完全獨立，不會影響主頁面。
缺點：難以與主頁面通信，樣式和腳本受同源策略限制。

<iframe src="image.svg"></iframe>

7. 使用JavaScript動態(tài)加載

通過Ajax或Fetch API獲取SVG內容，然后插入到DOM中。

優(yōu)點：可以控制加載時機，并且可以操作SVG內部。
缺點：需要額外的HTTP請求，可能會影響性能。

fetch('image.svg')
  .then(response => response.text())
  .then(svgText => {
    document.getElementById('svg-container').innerHTML = svgText;
  });

8. 使用SVG Sprite

將多個SVG圖標合并到一個SVG文件中，然后通過<use>標簽引用。

優(yōu)點：減少HTTP請求，便于管理多個圖標。
缺點：需要預先組合SVG文件。

首先，創(chuàng)建一個SVG Sprite文件（例如sprite.svg），內容如下：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon1" viewBox="0 0 24 24">
    <!-- 第一個圖標的路徑等 -->
    <path d="..."/>
  </symbol>
  <symbol id="icon2" viewBox="0 0 24 24">
    <!-- 第二個圖標的路徑等 -->
    <path d="..."/>
  </symbol>
</svg>

然后在HTML中引用：

<svg>
  <use xlink:href="sprite.svg#icon1" rel="external nofollow" ></use>
</svg>

注意：現代瀏覽器也支持直接使用<use href="sprite.svg#icon1">（無需xlink命名空間）。

9. 使用CSS Mask

利用CSS的mask屬性顯示SVG作為遮罩。

優(yōu)點：可以創(chuàng)建復雜的形狀和效果。
缺點：瀏覽器支持度可能不如其他方式。

.element {
  mask: url('image.svg') no-repeat center;
}

10. 使用第三方庫或構建工具

例如，使用Webpack的svg-url-loader、file-loader，或者Vue的vue-svg-loader等，可以根據項目配置自動處理SVG。

優(yōu)點：根據開發(fā)環(huán)境優(yōu)化，可以內聯或作為外部文件。
缺點：增加項目復雜度。

具體使用及了解

直接去npm包地址：

svg-url-loader - npm

file-loader - npm

vue-svg-loader - npm

總結

需要交互和動畫：內聯、<object>、動態(tài)加載。
簡單圖片展示：<img>、CSS背景。
需要緩存和性能：<img>、CSS背景、SVG Sprite（減少請求）。
復雜項目：考慮使用構建工具管理。

根據實際情況選擇最適合的方式。

到此這篇關于前端引入及使用svg圖片的多種方式的文章就介紹到這了,更多相關前端引入及使用svg圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

前端使用svg圖片改色實現示例

JavaScript中將字符串轉換為數字的七種方法總結
在js的使用中往往伴隨著有格式帶來的問題,下面這篇文章主要給大家介紹了關于JavaScript中將字符串轉換為數字的七種方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
javascript異常處理實現原理詳解
這篇文章主要介紹了javascript異常處理實現原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-02-02
webpack開發(fā)環(huán)境和生產環(huán)境的深入理解
這篇文章主要介紹了webpack開發(fā)環(huán)境和生產環(huán)境的深入理解，詳細的介紹了什么是開發(fā)環(huán)境和生產環(huán)境并配置，非常具有實用價值，需要的朋友可以參考下
2018-11-11
前端常見的時間轉換方法以及獲取當前時間方法小結
在做開發(fā)時會對不同的時間格式進行轉換,下面這篇文章主要給大家介紹了關于前端常見的時間轉換方法以及獲取當前時間方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
javascript Onunload與Onbeforeunload使用小結
Onunload，onbeforeunload都是在刷新或關閉時調用，可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。
2009-12-12
如何防止JavaScript中的正則表達式回溯
某些正則表達式模式可能容易受到回溯的影響,這可能會導致超線性運行時,并可能導致DoS攻擊,本文就來介紹一下如何防止JavaScript中的正則表達式回溯,感興趣的可以了解一下
2023-08-08
原生js二級聯動效果
這篇文章主要為大家詳細介紹了原生js二級聯動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
javascript移出節(jié)點removeChild()使用介紹
這篇文章主要介紹了javascript節(jié)點操作移出節(jié)點removeChild()的使用,需要的朋友可以參考下
2014-04-04
webpack打包的3種hash值詳解
這篇文章主要為大家介紹了webpack打包的3種hash值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
javascript比較語義化版本號的實現代碼
這篇文章先是給大家簡單的介紹了下語義化版本號，而后再用實例代碼演示語義化版本號的比較方法，有需要的朋友們可以參考借鑒。
2016-09-09