加载/显示几十个SVG图标的最快方法是什么？

加载/显示几十个SVG图标的最快方法是使用SVG精灵图。SVG精灵图是将多个SVG图标合并到一个SVG文件中，通过CSS的background-position属性来控制显示不同的图标。

优势：

减少HTTP请求：将多个图标合并到一个文件中，减少了浏览器发送的HTTP请求次数，提高了加载速度。
缩小文件大小：合并后的SVG精灵图文件通常比单独的SVG文件更小，减少了文件大小，加快了下载速度。
灵活性：通过CSS的background-position属性，可以轻松控制显示不同的图标，实现图标的切换和定位。

应用场景：

网站或应用中需要加载大量的图标，如导航菜单、按钮、标签等。
需要频繁切换和替换图标的场景。

推荐的腾讯云相关产品：

腾讯云提供了对象存储（COS）服务，可以用于存储SVG精灵图文件。您可以通过以下链接了解更多关于腾讯云对象存储的信息：

https://cloud.tencent.com/product/cos

另外，腾讯云还提供了云服务器（CVM）和内容分发网络（CDN）等服务，可以用于加速SVG精灵图的加载和分发。您可以通过以下链接了解更多关于腾讯云云服务器和内容分发网络的信息：

云服务器（CVM）：https://cloud.tencent.com/product/cvm

内容分发网络（CDN）：https://cloud.tencent.com/product/cdn

相关·内容

小程序实践：基础内容icon，关于图标的5个实现方案等

如果文本是从后台动态取出来的，穿插的图标的类型也是动态取出来的，能否实现解析、渲染？这个问题留给读者朋友们思考。 2）icon图标是怎么实现的，原理是什么？...A）最简单粗暴的方法，是使用img标签，每个图标对应一个图片。但是这种方法有三个明显的缺点：造成大量http请求；不方便修改颜色；放大图片会虚。 B）后来有聪明的工程师发明了精灵图，什么是精灵图？...精灵图是把一组图片以非重合、最小化的方式排列成一张图片，在加载的时候只加载一次，这就减少了http请求。...如果想进行复杂的编辑，可以将矢量图下载下来，使用矢量图编辑软件，例如Sketch，进行编辑，编辑完成后导出svg格式，在上面这个位置上传，就可以替换原图标。 ? 这是使用矢量字体图标的方案。...有两个方法： a）通过谷歌浏览器开发者工具，定位到具体组件的样式： ? 可以看到url指向的是一个内嵌的svg矢量图数据。在新的tab页中打开，可以直接保存为svg文件，在Sketch软件中编辑。

2K0 0

图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。...雪碧图雪碧图实例：淘宝PC端 ? 将多张小图放至一张大图使用的时候，通过background-position调整显示的位置，如下图所示： ?...雪碧图的使用方法使用雪碧图唯一的优点，可以说就是减少浏览器的请求次数。因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8个。...Chrome同时最多加载资源数为6个雪碧图的制作方法可以用node的一个的包css-sprite，十分地方便。...详见css-sprite 然而，使用雪碧图存在不可避免的缺点雪碧图的缺点高清屏会失真在2x的设备像素比的屏幕上例如mac，如果要达到和文字一样的清晰度，图片的宽度需要实际显示大小的两倍，否则看起来会比较模糊

2.3K2 0

从 Web 图标演进历史看最佳实践

显然，这样的方式在有很多图标的网页中将发起很多 HTTP 请求，占用浏览器的并行请求数量，导致整体加载时间缓慢，体验很差。...对于有些鼠标悬浮后切换图标的设计，这种方式还会出现第一次切换时需要等待图标加载的问题。（但是令人沮丧的是，直到现在还有网站依然保留着这样的方式。）...同时由于高昂的维护成本，很难做到按需加载图标，往往整站的图标都会全部合并到同一个“雪碧图”中。图标颜色是确定的，无法在前端根据内容上下文灵活调整图标的颜色。...图片尺寸是固定的，进行缩放后很难保证图标的显示效果。...另外，虽然字体图标解决了一些“雪碧图”的体验问题，它也带来了一些新问题：字体文件加载需要时间，在文件加载完成前，图标是无法显示的，内容就很容易发生闪烁。

1.6K1 0

iconfont矢量图标旋转晃动

2.问题探索经我打开控制台仔细查看发现，我给这个icon-181元素 (即这个字体矢量图标的父元素)设置的font-size是20px，可是显示的字体矢量图标元素大小却是20*21。...详情见下面的两张属性图：矢量图标的父元素属性图(图三) 和矢量图标在页面中的属性图(图四) 查看图标父元素i标签属性.jpg 图三（矢量图标父元素属性图）查看icon图标属性.jpg...我在控制台调整矢量图标的父元素icon-181的字体大小font-size一直增加到24px后，发现里面通过before添加的这个矢量图标元素大小也显示为24*24了，旋转起来也没有再出现晃动现象，可以解决这个问题...那么，到底是什么原因导致它会多出1px渲染呢？是不是我使用的这个svg图像有问题，导致了它转换成字体矢量图标以后出现了这样的情况？...将使用的这个图标的SVG图像导入这个网站生成了一遍，把从这个网站下载下来的字体样式加载到我这里使用。引入字体样式进来以后，查看矢量图标元素大小。

4.9K1 0

网站图标开发指南

> 通过上面的方法，多客户端适配问题解决了，但我们使用了多张内容相同、尺寸不同的图标，这无疑增加了图片的数量。...每一张图片都会发起一个 HTTP 请求，而浏览器并行加载同一域名下的请求是有限制的，太多的图片无法全部并行加载，就会进行排队加载，排在后面的图片也就不能及时得到渲染。.../大图.png"); } /* 定位背景图，让图片显示到对应的位置 */ .icon1 { background-position: -168px 0px; } .icon2 { background-position...总结一下雪碧图的特点：只需发起一次 HTTP 请求。只能通过 CSS 背景图渲染。如果只用到了大图中的一张小图，也必须加载整张大图，有点浪费资源。...总结一下 SVG 图标的特点：支持动态修改多个区域的颜色支持渐变色矢量图，放大也不会变模糊思考与总结本文介绍了 3 种小图标的使用方式，这里做一个简单回顾。

1.7K3 0

SVG 图标在React项目中的优化

SVG 雪碧图当项目需要加载多个 SVG 文件时，上述加载方式就需要优化了。我们考虑以下几种情况： 1）使用 url-loader 加载多个 svg 文件 ?...这种方式会产生多次 http 请求，而浏览器对并发请求数目是有限制的，请求太多会影响页面加载性能。这种情况就需要引入雪碧图，将多个 svg 文件合成一个 svg 文件。...第一种方法第一种方法是把所有的图标通过元素定义在 SVG 代码中，嵌入在元素中的图标是不会被直接显示的。...> 在需要引入单个图标的时候：这里我们使用 svg-sprite-loader 来自动生成 svg 雪碧图。...第二种方法是使用 SVG 的 viewbox 属性来指定显示 SVG 画布的区域，跟 background-position 原理差不多。

3.6K1 0

高清ICON SVG解决方案（下） - 腾讯ISUX

，如果一个页面Icon特别多，可能要写好几十个SVG在页面，复用性差，后期扩展性也不佳。...> 第二种img/object 标签这种方法直接将SVG ICON保存成一个一个单独文件，通过img或object标签引用，他的缺点就是请求数增加，每个图标都去独自加载，对服务器负载和页面高速加载不好...、gulp-svg-sprites 第五种SVG Defs/Symbols 这种其实就是在SVG Sprites上面更进一步的使用了，SVG Sprites是需要我们去通过坐标获取对应位置图标的，但是...下，不管是device =2还是3都可以兼容，不管未来是否会有更高的devicePixelRatio出来，按照上面的方法都能完美兼容，并且在对应不同的devicePixelRatio下浏览器会自动选择加载...SVG或者PNG，不会两张都同时加载。

1.2K1 0

设计师使用SVG的必读文章

设计师主要是利用AI，和Sketch进行SVGicon，SVG拓扑图的绘制。但是，单纯依靠软件一键导出的SVG图形，会因为每位设计师的绘制导出方法不同，在实际使用中出现或多或少的应用问题。...）我们再来看看各个选项的真实含义是什么。...其实，这是因为，单独在浏览器中查看这个SVG，嵌入或是链接的方式都没有问题；但如果使用标签来引用这个SVG，浏览器中的 img 是不允许加载外部资源的，也就是我们说的，“一个图片，咋还能还引用了一张图片呢...来自不留名同学的实践经验补充： “在新版的AI 2018输出svg图标的时候，新增了通过另存为就可以导出SVG的方式，SVG的设置不会自动保存上次勾选的设置，每次都会回退成系统默认设置。”...所以推荐大家依旧使用导出的方法进行批量SVG的存储： [图片] B.

5.5K6 1

小图标，大学问

甚至可以说，图标的演化是 Web 技术演化的一个缩影。本文将带你回顾一下图标简史，了解一下图标技术的来龙去脉。古代：一个图标一张图史前时代的图标，正如我们的直觉一样，就是一张图片。...在体验方面追求差异化的方式很多，而在宽带网络还不够普及的时代，最直观的方面就是加载速度。然而“一个图标一张图”的方式在加载速度方面受到了严重限制。...既然我们可以通过控制显示数据，把字母 A 显示为手写体的 A，那么我们是不是也可以把它显示成一个看起来和 A 完全不一样的图标呢？比如……一座房子？当然可以，事实上，这正是字体图标的基本原理。...虽然有一些工具可以帮你把一组 svg 文件拼合成一个字体文件，但是它们对 svg 的格式有严格的要求，不是任何一个 svg 都可以用的。你很难向 UX 解释什么样的图能用、什么样的图不能用。...而且，这个图标的其它部分你仍然可以指定特定的颜色，比如图标主体部分跟随文字颜色，而某个特殊区域总是显示为蓝色。经过这样的处理之后，你不但可以弥补相对于字体图标的缺点，还可以更进一步，支持彩色图标了！

1.3K1 0

Vue项目中优雅使用icon

，这是它最大的缺点雪碧图(css sprites) 后来我们为了优化资源请求开始使用CSS雪碧图(css sprites) CSS Sprites在国内很多人叫css精灵/css雪碧图(啥都行)，是一种网页图片应用处理方式...它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。...方法，该方法主要是来获取文件绝对路径的，我们把使用路径的地方都使用该方法转为绝对路径，当然使用相对路径也是可以的，但是不太安全，平台解析相对路径有差异性，所以绝对路径是最安全的 svg sprites图标使用.../svg文件为上下文，使用正则匹配了它需要检测的文件名，这样它就会在当前目录的svg文件夹下去匹配符合规则的文件名然后我们使用req.keys拿到所有文件名数组，再使用map遍历加载req方法，这样当该文件被调用时会遍历加载所有匹配到的文件...最后就是我们的使用了，在main.js文件引入icons/index.js import "@/icons/index.js"; 再来看看我们使用图标的方法，组件中： <svg-icon

2.2K2 0

Jekyll 社交图标集合创建

技术发展回顾图片索引对网站前端设计有点了解的小伙伴可能知道，如果要为网站添加一些社交图标，并且支持鼠标悬停高亮显示，最早的办法是采用不同的图片进行切换的方法。...这种方法的好处比较明显，浏览器只需要发出一次请求下载雪碧图即可，减少了文件 HTTP 请求数，加载时间显著变短。比较明显的困难是，定位找起来简直不要太麻烦。...新增图标的时候，为了能沿用原来已经写好的样式，只能在原有的雪碧图的基础上往后增加图标，当然同时也要增加对应的样式。虽然雪碧图在某种程度上提升了加载效率，但是给后期的更新、维护带来了不小的麻烦。...最有效的改进方法可能就是采用分辨率更高、质量更高的图片来拼凑雪碧图，不过同时也会增大雪碧图的文件体积。...这会导致虽然只发出了一个文件 HTTP 加载请求，但是由于文件体积过大、加载速度慢，而给用户带来不好的使用体验。字体图标接着发展出了一种字体图标的东西来解决图片索引中存在的问题。

2K4 0

如何在Vite中处理各种静态资源？

图片加载图片是项目中最常用的静态资源之一，本身包括了非常多的格式，诸如 png、jpeg、webp、avif、gif，当然，也包括经常用作图标的 svg 格式。...这一部分我们主要讨论的是如何加载图片，也就是说怎么让图片在页面中正常显示。1....——fib方法。...这种合并图标的方案也叫雪碧图，我们可以通过vite-plugin-svg-icons来实现这个方案，首先安装一下这个插件:pnpm i vite-plugin-svg-icons -D接着在 Vite...，发现雪碧图已经生成雪碧图包含了所有图标的具体内容，而对于页面每个具体的图标，则通过 use 属性来引用雪碧图的对应内容如此一来，我们就能将所有的 svg 内容都内联到 HTML 中，省去了大量 svg

2.1K3 0

一篇文章带你了解SVG 图标

一、SVG图标的优势图标使用SVG的优点： 1、可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸。...二、在Web Apps中使用SVG图标如在Web浏览器中显示SVG所述，有几种方法可以在Web浏览器中显示SVG，作为HTML页面的一部分。...但是，在显示SVG图标时，使用HTML的img元素来显示图标是最容易的，HTML img元素可以轻松地放大和缩小SVG图标的大小。...SVG图标与img元素一起显示时的效果图： ?...SVG viewBox属性指定应显示多少SVG画布（在X和Y方向上）。如何只显示SVG画布的包含圆圈图标的部分？只想显示SVG画布的包含圆圈图标的部分。

4.3K3 0

Power BI使用像素风格图标展示指标异常

请看以下卡片图：再看以下表格：实现以上效果首先要有图标资源，在以下网址可以复制480种像素风格的SVG图标代码：https://pixelarticons.com/free/ 复制的图标代码需要进行两处调整...:image/svg+xml;utf8,以便Power BI识别。...调整完的代码如下： data:image/svg+xml;utf8, 接着，把代码放入度量值，本例为： =IF([增长率]>0,向上的SVG代码,向下的SVG代码) 最后就是加载图标了，当在表格矩阵使用时，条件格式图标的格式样式选择字段值，调用上方的度量值即可正常显示...：当在卡片图（仅适用于2023年6月推出的新卡片图，不了解可参考此文：Power BI可视化的巅峰之作：新卡片图）使用时，需要打开卡片图的图像URL，调用上方度量值：

1832 0

Android微信上的SVG

矢量图SVG 栅格图自身特点导致了高清资源同安装包体积之间的矛盾。这方面矢量图存在明显的优势，它可以在表达清晰图片的同时，不增加文件体积。...（另外，VectorDrawable经过我们测试发现性能并不理想，这受限于他的实现方法。）...因此必须要考虑如何即可以用SVG但又不增加开发负担。经过一番努力我们得到的结果 1）清晰度 ? ? 两张xxhdpi资源在OPPO R7Plus上的显示结果。左边SVG，右边PNG。...但通过在加载阶段的大幅提升，让SVG在整体耗时上赢了PNG。为什么我们可以将“加载”和“渲染”相加在一起来比较？事实上，SVG渲染过程使用了Picture进行绘制。...我们想到的方法是将skia库、android的Skia API接口以及WeChatSVGLibrary移植到目标编译环境中，再通过代码生成逻辑将三个编好的库整合在一起，按部就班的，读取SVG文件、渲染SVG

2.7K5 0

前端性能优化篇二：图片的合理使用

理论上来说，当你追求最佳的显示效果、并且不在意文件体积大小时，是推荐使用 PNG-24 的。但实践当中，为了规避体积的问题，我们一般不用PNG去处理较复杂的图像。...5 base64 关键字：文本文件，依赖编码，小图标的解决方案前言知识雪碧图雪碧图、CSS 精灵、CSS Sprites、图像精灵，说的都是这个东西——一种将小图标和背景图像合并到一张图片上，然后利用...CSS 的背景定位来显示其中的每一部分的技术。...MDN 对雪碧图的解释已经非常到位：图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。...和雪碧图一样，Base64 图片的出现，也是为了减少加载网页图片时对服务器的请求次数，从而提升网页性能。Base64 是作为雪碧图的补充而存在的。

1.3K3 0

Vue 使用 vue-svg-icon 插件实现 svg 按需加载

例如，将所有绘制 svg 的代码放到 svg-icon.vue 文件中，所有图标的绘制代码使用 symbol 标签分隔开并单独命名，然后将这个文件当做组件导出，在主页面中引入此组件，接着在需要使用 svg...图标的地方通过 use 标签将其引入， svg-icon.vue 代码示例如下： <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink...> 这里将整个 vue 组件导出一个大的 svg，此 svg 中包含了许多小图标，类似于精灵图，每个图标使用 symbol 分隔，并单独命名以方便调用。 ...不过还有个问题，如果当一个页面需要用到的 svg 图标很多，势必就造成 svg-icon.vue 这个文件非常大，当另一个页面只需要用到其中一个 svg 图标时，就需要把包含几百个图标的 svg 组件加载进去.../ 图标文件可以到 iconfont 上下载 4、在组件中按需加载需要的图标例如 pen.svg 放到了 /src/svg 目录中，在 vue 组件按需加载： <icon

2.5K2 0

为什么要用SVG？- svg与iconfont、图片多维度对比

SVG是什么？ SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。...，测试内容分别对demo页面491图标的 __Loading、Rendering、Painting__ 这三个指标做了测试 1.svg与ion font性能对比 1、结果svg整体是的 Rendering...项基本上是碾压了icon font，数据如下：页面图标数量：491个上图SVG案例中我用了两种不同引用方式，一种是在页面直接inline svg方式插入的方法和用svg sprite合并后引用图标的两种...，结果显示svg sprite的性能是最高的。...2.svg sprites与png sprites性能对比这个测试通过将svg sprites生成对应的1倍图png sprites来进行测试，图标在页面的实际大小是相等的。

5.4K5 0

Vue | 使用 SVG sprite loader 来引入 svg

想必看出来了，这样引入真的很麻烦，如果我们有几十个 svg ，难道要一个一个的引入？？...而且每次都要写好麻烦，我们可不可以把它封装成一个组件呢？引入整个 svg 目录？...Statistics"/> 遇到的一个小 bug: fill 颜色尝试实现切换标签页的时候自动更改填充颜色来达到突出显示的效果...css 不能从外部更改颜色如图：手动删掉此属性即可正常用css指定颜色，但是如果有很多svg.这样的话未必太过麻烦我们可以使用一个叫做 svgo-loader 的插件来解决此问题不知道是什么原因...，高版本的这个插件会导致加载不出 svg 的 bug，我使用的是以下版本，是正常使用的 // 和上文提到的一样 { "devDependencies": { "svg-sprite-loader

3.2K2 0

BuildAdmin04：vue加载本地svg图标

svg是一种基于XML的矢量图像描述语言，从里面可以获取两个关键信息：XML语言、图像。上图为BuildAdmin全屏图标的svg文件，可以看到内容是xml，然后最右边是svg表示一个全屏图标。...这里的include中指定svg的目录，test是目标svg的正则表达式，symbolId是加载的svg图标的新命名，在原本svg的name之前，加了一个 local- 前缀。 2....所以写一个方法，使用require.context()生成一个 contextmodule(上下文模块) ，将assets/icons中所有的svg文件，都require引用进来。...然后就是在main.ts中调用加载方法，完成svg文件到图标的加载。 3....下的中的href属性，需要指定的是svg图标的名字，而绑定的iconName，可以看到是引用的是props.name，即是通过父组件传过来的name属性。

3632 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云