【教程】在页面上使用SVG(SVG Sprite)

最新推荐文章于 2023-03-04 15:49:44 发布
最新推荐文章于 2023-03-04 15:49:44 发布
阅读量521 收藏
点赞数
文章标签： json php 开发工具
原文链接：https://juejin.im/post/5c2f34ce6fb9a049ae080902
版权

【教程】在页面上使用SVG(SVG Sprite)

作者：吴业飞
时间：2019年1月4日

前言

本文是我在阅读了张鑫旭大神的文章《未来必热：SVG Sprite技术介绍》后整理出来的实际操作流程，全部为实测代码，按照本教程可以即学即用。为了更好的理解本文，建议先行阅读《未来必热：SVG Sprite技术介绍》

最终目标

在页面上很方便的使用SVG图标

步骤分解

获取SVG图标

网上有很多可以下载SVG图标的网站，找到我们需要的ICON后，将它们放在一个文件夹下（此教程中是icon文件夹），方便我们之后将这个文件夹下的所有SVG图标合并成SVG Sprite

合并SVG图标(SVG Sprite)

我们使用grunt的插件grunt-svgstore来合并svg,具体步骤如下：
我们的初始项目目录是这样的

+icon
	-close.svg
	-QQ.svg
+svgDemo.html
复制代码

一个用于演示的html文件，一个放svg的icon文件夹，就是这么简单。 接下来我们初始化项目，因为我用的编辑器是VScode,所以ctrl + ~呼出终端，在终端输入npm init。现在我们的项目目录是这样的

+icon
	-close.svg
	-QQ.svg
svgDemo.html
package-lock.json
package.json
复制代码

然后我们安装grunt和用于合并svg的插件grunt-svgstore，终端输入npm install grunt --save-dev npm install grunt-svgstore --save-dev，安装完后，我的package.json里的版本号是

{
  "name": "svgdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alan",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-svgstore": "^2.0.0"
  }
} 
复制代码

我们在根目录下新建Gruntfile.js文件，如下配置

module.exports = function (grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        svgstore: {
            options: {
              prefix : 'mysvgicon-', // This will prefix each ID
              svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
                viewBox : '0 0 100 100',
                xmlns: 'http://www.w3.org/2000/svg'
              }
            },
            mytest: {
              // Target-specific file lists and/or options go here.
              files: {
                  './icon/all.svg': ['./icon/*.svg']
              }
            },
          },
    });
    grunt.loadNpmTasks('grunt-svgstore');
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['svgstore']);
};
复制代码

现在我们在终端运行grunt，一切顺利的话在icon文件夹下回生成all.svg文件，它长这样

<svg viewBox="0 0 100 100" 
    xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css"/>
        <style type="text/css"/>
    </defs>
    <symbol viewBox="0 0 1024 1024" id="mysvgicon-close">
        <title>close</title>
        <path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>
        <path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>
    </symbol>
    <symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">
        <title>QQ</title>
        <path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>
    </symbol>
</svg>
复制代码

注意到已经成功合并了两个svg文件

在页面上插入合并后的SVG Sprite

我们在页面<body>里写个display:none;的包裹标签将我们的SVG Sprite放在里面

<body>
    <div style="display:none;">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <style type="text/css" />
                <style type="text/css"/>
            </defs>
            <symbol viewBox="0 0 1024 1024" id="mysvgicon-close">
                <title>close</title>
                <path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>
                <path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>
            </symbol>
            <symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">
                <title>QQ</title>
                <path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>
            </symbol>
        </svg>
    </div>
</body>
复制代码

使用SVG图标

接下来我们只要使用<use>就可以使用我们的svg了

<body>
    <div style="display:none;">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <style type="text/css" />
                <style type="text/css"/>
            </defs>
            <symbol viewBox="0 0 1024 1024" id="mysvgicon-close">
                <title>close</title>
                <path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>
                <path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>
            </symbol>
            <symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">
                <title>QQ</title>
                <path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>
            </symbol>
        </svg>
    </div>

    <svg class="closeBtn">
        <use xlink:href="#mysvgicon-close"></use>
    </svg>
    <svg class="qq">
        <use xlink:href="#mysvgicon-QQ"></use>
    </svg>

</body>
复制代码

参考文献

【1】《未来必热：SVG Sprite技术介绍》.张鑫旭.www.zhangxinxu.com/wordpress/2…

版权声明：自由转载-非商用-非衍生-保持署名

转载于:https://juejin.im/post/5c2f34ce6fb9a049ae080902

zzm_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVG Sprite 使用简介
weixin_33975951的博客
10-03 251
SVG简介 SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘. icon sprite 当我们需要使用多个icon的时候, 为了节省请求和方便管理, 通常会把icon合并到一个文件中, 在使用时再通过一定的方法从icon集合文件中取出所需的图形并...
在Vue3项目中使用svg-sprite-loader
qq_52569656的博客
10-18 8886
本文基于Vue3项目介绍svg-sprite-loader在项目中的使用方式,手把手教你封装一个SvgIcon全局组件，提高svg图标复用性的同时让你的代码看起来更加优雅。
使用 svg-sprite-loader 批量引入 icon
Mark
05-30 745
目录 1、推荐阿里 iconfont 2、使用前的一些配置 3、svg 图标的引入和使用 1、推荐阿里 iconfont 前端在做项目的过程中，都会频繁使用图标，记得几年前还是流行使用 CSS Sprite 雪碧图，它的好处有减少 HTTP 请求数，提高性能，节省一些流量等等，但是使用 CSS Sprite 雪碧图的方式也有一些缺点，比如图片拼接合成麻烦且耗时，后期如果需要追加小图标，则大的雪碧图维护起来比较繁琐，最好只是往下加图片，而不要更改已有图片，而且对每个需要记录每个图标的精确位置，这就会
svg的学习笔记《一》：如何使用svg sprite
sixam的博客
05-02 601
这里写自定义目录标题什么是SVG前端icon图标技术有哪些css sprite优点缺点iconfont优点缺点svg sprite优点如何使用svg直接内联引入使用img标签引入css引入使用iframe引入使用svg spritesymbol元素和use元素使用内部svg使用外部svg 什么是SVG SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来...
未来必热：SVG Sprite技术介绍
hsany330的专栏
11-12 1115
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=4264 一、Sprite技术 这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。 另，本文图片甚多，爪机党继续浏览需慎重。
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
在vue项目中优雅的使用SVG的方法实例详解
10-17
通过SVG精灵技术（SVG Sprite），可以将多个SVG图标合并到一个文件中，通过引用精灵图上相应的片段来使用不同的图标，这有助于减少HTTP请求，提高页面加载性能。 首先，安装svg-sprite-loader是使用SVG图标的基础。...
如何使用vite-svg-loader
02-23
在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器兼容性问题等。为了解决这些问题，Vite-SVG-Loader 插件...
laravel-mix-svg-sprite:用于Laravel Mix的SVG Sprite组件
05-01
laravel-mix-svg-sprite 用于Laravel Mix的SVG精灵组件，包装了和。 安装 使用npm安装： $ npm install --save-dev laravel-mix-svg-sprite ... svgSprite ( 'src/icons' , // The directory contain
svg-sprite使用
weixin_30340819的博客
04-15 130
chainWebpack(config) { config.module .rule('svg') .exclude.add(path.resolve(__dirname,'src/assets/icons')) .end(); config.module .rule('icons') .test(/\.svg$/) .include.a...
project-7:使用SVG
04-03
项目7 使用SVG
SVG Sprite 入门（SVG图标解决方案）
weixin_33805743的博客
04-27 289
关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明svg图标的使用和制作。 演示地址 代码 SVG Sprite 传统的做法 使用AI或者合并SVG图像，然后用background-p...
svg的用法
sunshine940326的博客
09-21 3627
SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图，但SVG有很多的用法你可能还不知道。观看演示SVG有什么优势？ 文件体积小，能够被大量的压缩 图片可无限放大而不失真(矢量图的基本特征
[vue]加载svg文件之svg-sprite-loader
前端
03-04 1619
SVG的显示 通过网上方式都没成功,引入路径，总是失败，经过多次的测试终于发现是svg的加载出了问题，记录一下，方便以后的使用 SVG的加载 工具 初始化svg加载工具 "svg-sprite-loader": "^6.0.11" 配置 vue.config.js中配置svg文件的加载 module.exports ={ chainWebpack(config) { config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
Vue中svg-icon的使用（svg-sprite）
Youthenen的博客
02-15 4316
文章目录sprite的概念如何使用iconfont字体图标？优点缺点如何使用svg图标(svg-icon)？使用方法第一步第二步第三步使用svg-icon的好处基于svg-icon图标创建icon-component 组件改造icon-component 组件——生成svg-sprite使用 svg-sprite自动导入所有svg-icon参考学习 sprite的概念 sprite的概念最早是图片上的sprite。 一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是
该如何以正确的姿势插入SVG Sprites？
weixin_30312563的博客
09-21 146
大家好，我是苏南，今天要给大家分享的是SVG sprite(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～ 当下流程的移动端，手机型号太多太多，今天工作项目中突然发现还有同事在使用以前大家 曾经包括现在还很熟悉的CSS 图片精灵，被我们的测试MM找来说图片在iphone6、iphone plus、iph...
CocosCreator查找图片引用
大猪的博客
02-14 2521
相信大家可能需要查找图片在哪个Prefab中使用到，于是我们像下图这样查找一下： 查找的时候CocosCreator会给出我们查找的图片资源的uuid 比如，我的uuid：33a791ca-5a28-4c2a-b451-7c6b8f9a0379。 之后就进入到Prefab中，但是我们的Prefab可能有很多节点，我们要找到引用了这个图片的节点还是很麻烦。。。 这时候，我们可以在文本...
svg-sprite-loader svg4everybody的使用
最新发布
05-05
svg-sprite-loader和svg4everybody是两个不同的...综上所述，svg-sprite-loader和svg4everybody是两个不同的工具，一个用于打包SVG sprite，一个用于在页面中使用SVG sprite。在使用时需要根据具体需求选择合适的工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值