svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件

haoguo 发布于2019-04-23 13:19 / 3866人阅读

摘要：然而在使用过程中还是遇到了很多坑。这里我们要实现的功能是，一个文件包含多个图形，这样的好处是，网络请求次数少，加载快速。再进一步，还有两种方法通过的获取文件后附加到中。而且的不能为否则渐变色等引用会失效。

svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。

这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。

一、制作svg

1.用记事本新建一个mysvg.svg , 里面内容如下

2.用 ai 制作了一个 svg文件, 把这个文件中的

如下图：

可如此增加多个svg文件到多带带的svg文件中国

二、html中引用这个svg

css:

html:

至此，已经实现。

注意:

1这样制作的svg无法通过img的src或 div的background-image引入

2.通过use 引入外部svg文件时，在.svg文件中指定的css(用

但这样一来，svg代码就很分散了，吃相很差。有一种最优雅的方式：直接将

再进一步，还有两种方法

A.通过js 的ajax获取svg文件后附加到html中。

B:我开发用的是asp.net core, 在cshtml中插入下面一段

@Html.Raw(Model.Include("/myEditor/dist/expression.svg"));

其中Include是模型类中写的一个方法，用于读取文件内容返回字符串。这种方式打开更快，因为客户端没有额外的http请求。注意这里之所以要用div包围住，就是因为svg会占用空间。而且div的display不能为none,否则css,filter,渐变色等引用会失效。

看到很多网站在用来在html中包含另一个html，但是现在在asp.net core中似乎已经不起作用了，只能通过手动写个方法来实现同样功能。

3.通过是不行的

5.使用symbol时 filter（滤镜）不能在svg内部定义，只能在use的地方定义

参考文献：https://blog.csdn.net/u010582082/article/details/70195629

专线服务私有云 svg矢量二维码 svg转html html插入svg html的svg

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1711.html

iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出图层里的图标右键选中这个图层右击这个图层把这个图层放到新文件点击图片的按钮自动切图到最小再调整一下画布大小将图片设置为长宽一样导出即可在页面里图片会默认保持比例所以只要设置宽高的其中一种就可以了抠图的前端现在基本没有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出图层里的图标右键选中这个图层showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

LancerComet 2019-08-30 15:56 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

netScorpion 2019-08-02 14:33 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

MorePainMoreGain 2019-08-26 18:18 评论0 收藏0