欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2025年11月03日 11:30:19   作者：じòぴé南冸じょうげん  
SVG是一種繪圖技術(shù),SVG的全名叫可縮放矢量圖形,這篇文章主要介紹了前端引入及使用svg圖片的多種方式大全,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

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

1. 直接內(nèi)聯(lián)（Inline SVG）

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

  • 優(yōu)點：可以直接通過CSS和JavaScript操作SVG的各個部分，實現(xiàn)交互和動畫。

  • 缺點：會增加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>標(biāo)簽

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

  • 優(yōu)點：簡單，易于使用，可以緩存。

  • 缺點：不能通過CSS或JavaScript操作SVG內(nèi)部元素。

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

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

 <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內(nèi)部元素。

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

4. 使用<object>標(biāo)簽

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

  • 優(yōu)點：支持腳本和交互，不會污染主文檔的DOM。

  • 缺點：樣式和腳本可能會受到同源策略的限制。

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

5. 使用<embed>標(biāo)簽

與<object>類似，但<embed>是HTML5標(biāo)準(zhǔn)的一部分，通常用于插件內(nèi)容，也可以用于SVG。

  • 優(yōu)點：簡單，支持交互和腳本。

  • 缺點：不推薦使用，因為它是舊標(biāo)準(zhǔn)，且在現(xiàn)代HTML中已被<object>替代。

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

6. 使用<iframe>標(biāo)簽

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

  • 優(yōu)點：完全獨立，不會影響主頁面。

  • 缺點：難以與主頁面通信，樣式和腳本受同源策略限制。

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

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

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

  • 優(yōu)點：可以控制加載時機，并且可以操作SVG內(nèi)部。

  • 缺點：需要額外的HTTP請求，可能會影響性能。

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

8. 使用SVG Sprite

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

  • 優(yōu)點：減少HTTP請求，便于管理多個圖標(biāo)。

  • 缺點：需要預(yù)先組合SVG文件。

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

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

然后在HTML中引用：

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

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

9. 使用CSS Mask

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

  • 優(yōu)點：可以創(chuàng)建復(fù)雜的形狀和效果。

  • 缺點：瀏覽器支持度可能不如其他方式。

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

10. 使用第三方庫或構(gòu)建工具

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

  • 優(yōu)點：根據(jù)開發(fā)環(huán)境優(yōu)化，可以內(nèi)聯(lián)或作為外部文件。

  • 缺點：增加項目復(fù)雜度。

具體使用及了解

直接去npm包地址：

svg-url-loader - npm

file-loader - npm

vue-svg-loader - npm

總結(jié)

  • 需要交互和動畫：內(nèi)聯(lián)、<object>、動態(tài)加載。

  • 簡單圖片展示：<img>、CSS背景。

  • 需要緩存和性能：<img>、CSS背景、SVG Sprite（減少請求）。

  • 復(fù)雜項目：考慮使用構(gòu)建工具管理。

根據(jù)實際情況選擇最適合的方式。

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

相關(guān)文章

  • javascript完美實現(xiàn)給定日期返回上月日期的方法

    javascript完美實現(xiàn)給定日期返回上月日期的方法

    這篇文章主要介紹了javascript完美實現(xiàn)給定日期返回上月日期的方法,結(jié)合實例形式分析了javascript日期時間的計算技巧,并給出了格式化日期時間的操作方法,需要的朋友可以參考下
    2017-06-06
  • IE與FireFox中的childNodes區(qū)別

    IE與FireFox中的childNodes區(qū)別

    Javascript中，相信大家都試過用getElementsByTagName和childNodes來實現(xiàn)對節(jié)點的遍歷
    2011-10-10
  • javascript順序加載圖片的方法

    javascript順序加載圖片的方法

    這篇文章主要介紹了javascript順序加載圖片的方法,可實現(xiàn)javascript針對圖片的逐次加載,從而減緩服務(wù)器壓力,非常具有實用價值,需要的朋友可以參考下
    2015-07-07
  • Bootstrap每天必學(xué)之折疊

    Bootstrap每天必學(xué)之折疊

    Bootstrap每天必學(xué)之折疊，本文向大家講解了Bootstrap折疊操作，感興趣的小伙伴們可以參考一下
    2016-04-04
  • 微信小程序開發(fā)常用功能匯總

    微信小程序開發(fā)常用功能匯總

    這篇文章主要介紹了微信小程序開發(fā)常用功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-02-02
  • Jupyter Notebook運行JavaScript的方法

    Jupyter Notebook運行JavaScript的方法

    Jupyter Notebook是一塊所見即所得的畫布，通過在瀏覽器上編輯代碼，讓開發(fā)人員實現(xiàn)展示與快速迭代的利器，本文主要介紹了Jupyter Notebook運行JavaScript的方法，感興趣的可以了解一下
    2021-05-05
  • ng-options和ng-checked在表單中的高級運用(推薦)

    ng-options和ng-checked在表單中的高級運用(推薦)

    AngularJS是當(dāng)前非常的流行的前端框架，它的語法糖非常多，也極大的方便了前端開發(fā)者。這篇文章主要介紹了ng-options和ng-checked在表單中的高級運用,需要的朋友可以參考下
    2017-01-01
  • Javascript中的作用域及塊級作用域

    Javascript中的作用域及塊級作用域

    作用域永遠(yuǎn)都是任何一門編程語言中的重中之重，因為它控制著變量與參數(shù)的可見性與生命周期。下面給大家介紹Javascript中的作用域及塊級作用域，需要的朋友參考下吧
    2017-12-12
  • JavaScript表單驗證示例詳解

    JavaScript表單驗證示例詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗證示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • JS與jQ讀取xml文件的方法

    JS與jQ讀取xml文件的方法

    本文通過代碼實例給大家講解js讀取xml文件及jq讀取xml文件的方法，對本文感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12

最新評論