前端引入及使用svg图片的多种方式大全
作者：じòぴé南冸じょうげん
SVG是一种绘图技术,SVG的全名叫可缩放矢量图形,这篇文章主要介绍了前端引入及使用svg图片的多种方式大全,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
在Web开发中，使用SVG（可缩放矢量图形）有多种方式，每种方式都有其优缺点和适用场景。
下面将详细介绍前端引入和使用SVG图片的各种方式。
1. 直接内联（Inline SVG）
将SVG代码直接嵌入到HTML中，作为DOM的一部分。
优点：可以直接通过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文件作为外部资源引入，类似于使用其他图片格式。
优点：简单，易于使用，可以缓存。
缺点：不能通过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作为元素的背景图片。
优点：可以像其他背景图一样使用，支持CSS雪碧图。
缺点：同样不能操作SVG内部元素。
.element {
background-image: url('image.svg');
}4. 使用<object>标签
通过<object>标签嵌入SVG，可以保留SVG的交互性和脚本执行。
优点：支持脚本和交互，不会污染主文档的DOM。
缺点：样式和脚本可能会受到同源策略的限制。
<object type="image/svg+xml" data="image.svg"></object>
5. 使用<embed>标签
与<object>类似，但<embed>是HTML5标准的一部分，通常用于插件内容，也可以用于SVG。
优点：简单，支持交互和脚本。
缺点：不推荐使用，因为它是旧标准，且在现代HTML中已被
<object>替代。
<embed src="image.svg" type="image/svg+xml">
6. 使用<iframe>标签
将SVG文件嵌入到<iframe>中。
优点：完全独立，不会影响主页面。
缺点：难以与主页面通信，样式和脚本受同源策略限制。
<iframe src="image.svg"></iframe>
7. 使用JavaScript动态加载
通过Ajax或Fetch API获取SVG内容，然后插入到DOM中。
优点：可以控制加载时机，并且可以操作SVG内部。
缺点：需要额外的HTTP请求，可能会影响性能。
fetch('image.svg')
.then(response => response.text())
.then(svgText => {
document.getElementById('svg-container').innerHTML = svgText;
});8. 使用SVG Sprite
将多个SVG图标合并到一个SVG文件中，然后通过<use>标签引用。
优点：减少HTTP请求，便于管理多个图标。
缺点：需要预先组合SVG文件。
首先，创建一个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作为遮罩。
优点：可以创建复杂的形状和效果。
缺点：浏览器支持度可能不如其他方式。
.element {
mask: url('image.svg') no-repeat center;
}10. 使用第三方库或构建工具
例如，使用Webpack的svg-url-loader、file-loader，或者Vue的vue-svg-loader等，可以根据项目配置自动处理SVG。
优点：根据开发环境优化，可以内联或作为外部文件。
缺点：增加项目复杂度。
具体使用及了解
直接去npm包地址：
总结
需要交互和动画：内联、
<object>、动态加载。简单图片展示：
<img>、CSS背景。需要缓存和性能：
<img>、CSS背景、SVG Sprite（减少请求）。复杂项目：考虑使用构建工具管理。
根据实际情况选择最适合的方式。
到此这篇关于前端引入及使用svg图片的多种方式的文章就介绍到这了,更多相关前端引入及使用svg图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！