svg引用
站长
· 阅读数 11
最近官网整体更新风格，其中导航栏引入了大量的svg的小图标，直接在项目中使用了ui提供的svg，发现网络请求面板中会有大量的图标资源在请求，因此本文主要针对这种情况，减少svg图片请求
1、svg
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
2、通常使用
<img>元素使用SVG图像
<img src = "logo.svg" alt="Mini Logo"/>
- css 中使用
body {
background-image: url(logo.svg);
}
base64 引入
<img src="data:image/svg+xml;base64,[data]">
- 直接引用
svg
<svg viewBox="0 0 1024 1024">
<path
d="M1013.00999 27.321238c-2.881149-18.479092-3.874648-19.273892-22.85049-22.75114-17.584942-3.278549-35.169885-4.570098-52.854177-4.570098-17.286892 0-34.573785 1.192199-51.761327 2.980499C816.495776 10.133696 749.136506 25.532939 683.764235 49.078878 568.021535 90.80586 465.88978 153.098283 383.230617 245.394392c-3.775298 4.172698-7.649947 5.563598-12.518095 5.563598-1.192199 0-2.384399-0.09935-3.675948-0.1987-34.772485-3.775298-69.644319-9.835646-104.516154-9.835646h-2.384399c-62.193073 0.49675-110.675851 29.010187-144.355487 81.765014-18.379742 28.811487-36.660134 57.722325-55.039876 86.633162-17.088192 26.824488-34.573785 53.251577-51.165227 80.374115-23.54594 38.547783-1.291549 84.844863 42.521781 88.123411 52.754827 3.973998 105.509654 7.153197 158.264481 10.034346 9.537596 0.49675 13.610944 3.079849 14.505093 13.213544 3.179199 33.580285 12.120695 65.570971 30.103037 94.481808 35.070535 56.232075 86.136412 87.129912 151.309984 95.773358 24.539439 3.278549 23.84399 3.477248 25.632288 28.811488 3.477248 50.668478 7.252547 101.436305 12.021345 152.005433 2.980499 31.593286 27.321238 51.860677 54.443776 51.860677 10.729795 0 21.95634-3.179199 32.487436-10.034346 58.914524-38.547783 118.425148-76.499466 175.551373-117.630348 53.251577-38.349083 76.400116-92.395459 69.544969-158.46318-2.881149-28.314738-5.265548-56.728825-8.146696-85.043563-0.89415-8.742796 1.192199-15.399243 8.047346-21.65829 83.553313-76.598816 143.163287-169.292326 183.896769-274.50393 34.077035-88.024061 54.443776-178.829921 57.324925-273.31173 0.09935-2.682449 0.1987-5.364898 0.1987-7.947996 0.29805-16.194043-1.788299-32.189386-4.272048-48.085379zM700.455027 466.746095h-1.092849c-78.983215-0.5961-149.819734-71.333269-148.130785-149.521684 1.986999-92.693509 71.830018-152.402833 153.197633-152.402833h2.781798c79.479965 1.291549 146.342486 70.737169 145.348986 151.508683-1.09285 83.950713-68.45212 150.415834-152.104783 150.415834z">
</path>
<path
d="M349.550981 892.063258c-27.519938 27.817988-55.337926 55.238576-82.758513 82.957214-6.557097 6.656447-13.610944 10.729795-21.757641 10.729795-3.179199 0-6.557097-0.5961-10.133695-1.986999-13.014844-4.768798-19.273892-14.405744-19.869991-27.917338-0.3974-8.544096-0.1987-17.088192-0.3974-25.632289-0.29805-10.133696-0.3974-13.809644-4.371398-13.809644-2.185699 0-5.464248 1.09285-10.531096 2.781799-30.897836 10.233046-61.696323 20.565441-92.594159 30.798487-4.669448 1.589599-9.438246 2.682449-14.008344 2.682448-4.371398 0-8.742796-0.9935-13.114194-3.377898-13.213544-7.451247-18.181042-20.664791-12.915494-36.858834 10.233046-31.692636 21.062191-63.285922 31.493936-94.978558 4.570098-13.710294 4.272048-14.008344-10.531096-14.306394-8.941496-0.09935-17.882992 0-26.824488-0.3974-13.014844-0.5961-22.25439-6.954497-27.122538-19.273891-4.669448-12.021345-1.688949-22.45309 7.053847-31.295237 28.712137-28.811487 57.523625-57.622975 86.335112-86.335112 5.166198-5.166198 11.325895-8.345396 17.982342-8.345396 0.69545 0 1.390899 0 1.986999 0.09935 15.597943 0.1987 24.241389 7.153197 29.904337 23.04919 21.95634 62.590472 61.895023 109.980402 119.816048 142.169787 12.816144 7.053847 26.228388 12.816144 40.137382 17.584943 25.135539 8.544096 30.798486 32.884836 12.220044 51.661977z">
</path>
</svg>
注意：如果svg里面有image，最终直接引用的话也会发生图片的请求，同时要更改svg里的内容颜色会不生效
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2备份 3</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-43.000000, -125.000000)">
<g id="编组-2备份-3" transform="translate(43.000000, 125.000000)">
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
<image id="rocket-full" x="4" y="4" width="24" height="24" xlink:href="data:image/png;base64,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"></image>
</g>
</g>
</g>
</svg>
3、iconfont引入使用及动态更改颜色
由于后面跟ui确认icon是否从阿里的iconfont获取，重新整理对应的icon，然后下载阿里上面的代码
- 1、下载代码
- 2、选择
Symbol（这个模块主要使用了SVG Sprites技术处理，可以方便全局重复引用各个svg，只要加载一个文件）, - 3、当前我们只想引入几个不同的svg，且页面中不存在多个地方有引用，可以直接查看文件夹里的iconfont.js，复制其中红色标记
- 4、把标签
symbol替换为svg - 5、页面里设置对应
svg的fill样式，就可以灵活更改颜色和大小
4、测试案例
svg:无图片
<div style="height: 32px;width:32px; fill: #ff0000;background-color: #000;">
<svg id="rocket" viewBox="0 0 1024 1024">
<path
d="M1013.00999 27.321238c-2.881149-18.479092-3.874648-19.273892-22.85049-22.75114-17.584942-3.278549-35.169885-4.570098-52.854177-4.570098-17.286892 0-34.573785 1.192199-51.761327 2.980499C816.495776 10.133696 749.136506 25.532939 683.764235 49.078878 568.021535 90.80586 465.88978 153.098283 383.230617 245.394392c-3.775298 4.172698-7.649947 5.563598-12.518095 5.563598-1.192199 0-2.384399-0.09935-3.675948-0.1987-34.772485-3.775298-69.644319-9.835646-104.516154-9.835646h-2.384399c-62.193073 0.49675-110.675851 29.010187-144.355487 81.765014-18.379742 28.811487-36.660134 57.722325-55.039876 86.633162-17.088192 26.824488-34.573785 53.251577-51.165227 80.374115-23.54594 38.547783-1.291549 84.844863 42.521781 88.123411 52.754827 3.973998 105.509654 7.153197 158.264481 10.034346 9.537596 0.49675 13.610944 3.079849 14.505093 13.213544 3.179199 33.580285 12.120695 65.570971 30.103037 94.481808 35.070535 56.232075 86.136412 87.129912 151.309984 95.773358 24.539439 3.278549 23.84399 3.477248 25.632288 28.811488 3.477248 50.668478 7.252547 101.436305 12.021345 152.005433 2.980499 31.593286 27.321238 51.860677 54.443776 51.860677 10.729795 0 21.95634-3.179199 32.487436-10.034346 58.914524-38.547783 118.425148-76.499466 175.551373-117.630348 53.251577-38.349083 76.400116-92.395459 69.544969-158.46318-2.881149-28.314738-5.265548-56.728825-8.146696-85.043563-0.89415-8.742796 1.192199-15.399243 8.047346-21.65829 83.553313-76.598816 143.163287-169.292326 183.896769-274.50393 34.077035-88.024061 54.443776-178.829921 57.324925-273.31173 0.09935-2.682449 0.1987-5.364898 0.1987-7.947996 0.29805-16.194043-1.788299-32.189386-4.272048-48.085379zM700.455027 466.746095h-1.092849c-78.983215-0.5961-149.819734-71.333269-148.130785-149.521684 1.986999-92.693509 71.830018-152.402833 153.197633-152.402833h2.781798c79.479965 1.291549 146.342486 70.737169 145.348986 151.508683-1.09285 83.950713-68.45212 150.415834-152.104783 150.415834z">
</path>
<path
d="M349.550981 892.063258c-27.519938 27.817988-55.337926 55.238576-82.758513 82.957214-6.557097 6.656447-13.610944 10.729795-21.757641 10.729795-3.179199 0-6.557097-0.5961-10.133695-1.986999-13.014844-4.768798-19.273892-14.405744-19.869991-27.917338-0.3974-8.544096-0.1987-17.088192-0.3974-25.632289-0.29805-10.133696-0.3974-13.809644-4.371398-13.809644-2.185699 0-5.464248 1.09285-10.531096 2.781799-30.897836 10.233046-61.696323 20.565441-92.594159 30.798487-4.669448 1.589599-9.438246 2.682449-14.008344 2.682448-4.371398 0-8.742796-0.9935-13.114194-3.377898-13.213544-7.451247-18.181042-20.664791-12.915494-36.858834 10.233046-31.692636 21.062191-63.285922 31.493936-94.978558 4.570098-13.710294 4.272048-14.008344-10.531096-14.306394-8.941496-0.09935-17.882992 0-26.824488-0.3974-13.014844-0.5961-22.25439-6.954497-27.122538-19.273891-4.669448-12.021345-1.688949-22.45309 7.053847-31.295237 28.712137-28.811487 57.523625-57.622975 86.335112-86.335112 5.166198-5.166198 11.325895-8.345396 17.982342-8.345396 0.69545 0 1.390899 0 1.986999 0.09935 15.597943 0.1987 24.241389 7.153197 29.904337 23.04919 21.95634 62.590472 61.895023 109.980402 119.816048 142.169787 12.816144 7.053847 26.228388 12.816144 40.137382 17.584943 25.135539 8.544096 30.798486 32.884836 12.220044 51.661977z">
</path>
</svg>
</div>
svg:有图片
<div style=" height: 32px;width:32px; fill: #ff0000;background-color: #000;">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2备份 3</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="画板" transform="translate(-43.000000, -125.000000)">
<g id="编组-2备份-3" transform="translate(43.000000, 125.000000)">
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
<image id="rocket-full" x="4" y="4" width="24" height="24"
xlink:href="data:image/png;base64,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">
</image>
</g>
</g>
</g>
</svg>
</div>
1、svg内嵌图片加载，会有请求发生，同时更改对应的颜色，该logo的颜色不会发生变化
2、如果页面直接引用使用d属性的SVG元素加载，不会发生网络请求。可以更加灵活地控制SVG元素的样式和行为，例如可以直接使用CSS对SVG元素进行样式设置，而不需要额外的JavaScript代码。但是如果SVG元素的路径数据非常大，直接在HTML文件中嵌入SVG元素可能会导致HTML文件变得过于庞大，影响页面性能
因此，使用svg方式可以具体分析场景，采取最佳方式