Open hanyuxinting opened 5 years ago
上一章我们说到svg在dom中的引用,只要写在img标签,标注img的src为svg的路径就可以了。 但是呢,如果一个项目或者一个页面里有好多好多的svg图片要引入,就写这些svg的路径也很重复的哈。如果可以像我们处理png、jpg那样用雪碧图的方式处理svg,是不是会省点事儿呢?
咳咳,你想到的别人早就想到了。。好不好~切入正题~
SVG 雪碧图长这样:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="__SVG_SPRITE_NODE__"> <symbol class="icon" viewBox="0 0 1024 1024" id="icon名">{{省略的icon path}}</symbol> <symbol class="icon" viewBox="0 0 1024 1024" id="icon名">{{省略的icon path}}</symbol> </svg>
symbol + use => SVG Sprite 利用svg的symbol元素,将每个icon包括在symbol中,通过use元素使用该symbol。
<svg> <symbol> <!-- 第1个图标路径形状之类代码 --> </symbol> <symbol> <!-- 第2个图标路径形状之类代码 --> </symbol> <symbol> <!-- 第3个图标路径形状之类代码 --> </symbol> </svg>
<svg> <defs> <g id="shape"> <rect x="0" y="0" width="50" height="50" /> <circle cx="0" cy="0" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg>
<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>
grunt 方法:
npm install grunt-svgstore --save-dev
另一个:svg-sprite-loader
{ test: /\.svg$/, loader: 'svg-sprite-loader', }
国外的icomoon.io,或者国内阿里系的iconfont.cn, 或者bootsrap 3粉们的font-awesome
SVG在线压缩合并工具
雪碧图
SVG 雪碧图
上一章我们说到svg在dom中的引用,只要写在img标签,标注img的src为svg的路径就可以了。 但是呢,如果一个项目或者一个页面里有好多好多的svg图片要引入,就写这些svg的路径也很重复的哈。如果可以像我们处理png、jpg那样用雪碧图的方式处理svg,是不是会省点事儿呢?
咳咳,你想到的别人早就想到了。。好不好~切入正题~
SVG 雪碧图长这样:
原理
symbol + use => SVG Sprite 利用svg的symbol元素,将每个icon包括在symbol中,通过use元素使用该symbol。
合并SVG
grunt 方法:
另一个:svg-sprite-loader
SVG 工具
svg 来源
国外的icomoon.io,或者国内阿里系的iconfont.cn, 或者bootsrap 3粉们的font-awesome
SVG 优化
SVG在线压缩合并工具