svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。
这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。
一、制作svg
1.用记事本新建一个mysvg.svg , 里面内容如下
2.用 ai 制作了一个 svg文件, 把这个文件中的部分替换成symbol, 去掉所有属性，只保留viewbox ,并增加一个id属性(便于引用)，然后拷贝到mysvg.svg中的svg标签中间 方便引用。
如下图：
可如此增加多个svg文件到单独的svg文件中国
二、html中引用这个svg
css:
.mytest{
fill:#00f;
background-color:#600;
}
/* 点击时的样式
.mytest:active{
fill:#0f0;
}
html:
至此，已经实现。
注意:
1这样制作的svg无法通过img的src或 div的background-image引入
2.通过use 引入外部svg文件时， 在.svg文件中指定的css(用
需要在use所在的html文件中写css或filter,或渐变色
svg内部定义style方法如下
但这样一来，svg代码就很分散了，吃相很差。 有一种最优雅的方式：直接将写到html文件中，这样svg中的css,filter,滤镜等都可以生效。但是这样html文件很臃肿，而且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.通过 或background引入svg时，svg文件中的css可起作用
4.不可以引用symbol 
是不行的
5.使用symbol时 filter(滤镜)不能在svg内部定义，只能在use的地方定义
6.
参考文献：https://blog.csdn.net/u010582082/article/details/70195629
Android中使用SVG矢量图(一)
SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...
Android SVG矢量资源的使用方法
VectorDrawable 与 SVG Android 5.0(Lollipop, API 21)后,新增了标签,以VectorDrawable的形式支持SVG类型矢量图 ...
Android使用SVG矢量创建很酷的动态效率！
尊重原创,欢迎转载.转载请注明: FROM GA_studio http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说.咱们先瞅瞅效果: ...
Android使用SVG矢量动画(二)
上篇我们学习了怎么显示SVG矢量图像,当然还有一个更强大的功能,就是让SVG图像动起来,先上一张效果图吧: 要实现上述动画效果,就得用AnimatedVectorDrawable这个类了,它就是负责V ...
Android 使用 SVG 矢量图
android svg矢量图 可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...
Perl+OpenGL 重绘inkscape生成的svg矢量图
Perl+OpenGL 重绘inkscape生成的svg矢量图 还不够完善,先挖个坑,后面慢慢填 Code: [全选] [展开/收缩] [Download] (Untitled.pl) =info A ...
SVG矢量动画
一.概述 相较于png.jpg等位图通过存储像素点来记录图像,svg (Scalable Vector Graphics)拥有一套自己的语法,通过描述的形式来记录图形.Android并不直接使用原始的 ...
SVG矢量图学习实例
从W3school上学习了一下SVG矢量图形,感觉和HTML相比还是有一些新的元素和属性的,一时间不能全部记住,特此留下笔记,供遗忘时作为参考
随机推荐
c#接口和抽象类对比学习
什么是接口? 接口就是一种规范,协议(*),约定好遵守某种规范就可以写通用的代码. 定义了一组具有各种功能的方法.接口描述的是一种能力,具有这种能力的事物可以没任何关系.比如: public inte ...
JSON-JQuery常用技巧
1:Jquery对象选择查找 var group = $(".classeslist li"); class 为 classeslist 内部 的所有 li 元素对象 遍历: fo ...
bzoj 2956 数学展开，分段处理
首先对于答案 ΣΣ(n mod i)*(m mod j) i<>j 也就是Σ(n mod i)Σ(m mod j)-Σ(n mod i)(m mod i) 将mod展开,我们可以得到有fl ...
通过Workbook类 生成Excel导出数据
需求: 实现错误信息生成Excel保存到本地让用户查看. 刚开始使用了微软自带的Microsoft.Office.Interop.Excel类库. Microsoft.Office.Interop.E ...
把Nginx加入系统服务 service nginx (start | stop | restart | reload)
vim /etc/init.d/nginx 1 #!/bin/bash 2 # nginx Startup script for the Nginx HTTP Server 3 # it is v ...
单元测试报错NoSuchBeanDefinitionException
问题 在SpringBoot项目开发时,使用单元测试来运行一个Service,发现调用的一个Bean就是找不到,报错为: org.springframework.beans.factory.NoSuc ...
秒杀ecshop的前台写shell 0day
ECSHOP号称最大的开源网店系统,官方是这样介绍它的:“ECShop网店系统是一套免费开源的网上商店软件,无论在稳定性.代码优化.运行效率.负载能力.安全等级.功能可操控性和权限严密性等方面都居国内 ...
Tomcat添加HTTPS单向认证和双向认证
前言 前一段时间有了解如何配置Tomcat服务为Https单向认证和双向认证,当时也做了一些记录,今天开始写博客,就把以前的记录拿出来整理下,分享给大家.本文没有介绍证书如何生成,会在下一篇博文里介绍 ...
Java Base64 编码解码方案总结
Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便.在实际应用上,Base64除了能将Binary资料可视化之外 ...
json前后台传输，以及乱码中文问题探讨
背景介绍: 我现在的工作是做传统项目开发,没有用到框架.最近在做项目时,经常需要使用ajax从后台拿数据到前台,是json格式的.先说下我在项目中遇到的问题吧,前台拿到了数据,需要将其转化为对象,我使 ...
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
