svg引入方式及资料推荐
2017-03-09 本文已影响903人
该帐号已被查封_才怪
一、引入方式
1、使用img、object、embed 标签或者作为background背景图直接引用svg；
缺点：会增加网络请求；
2、Inline SVG，直接把SVG写入 HTML 中；
优点：Inline SVG 作为HTML文档的一部分，不需要单独请求。
缺点：复用较麻烦；
具体可以看inline SVG 入门指南，里面介绍的挺详细的；
这里特别提下：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"> <circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"></circle> </svg>
- a、viewBox 表示这个值允许我们指定一组图像伸展开来适应一个特定的容器元素,viewBox属性的值是一个包含四个数字的列表。min-x,min-y,width,height;
- b、
fill:元素的填充颜色
fill-opacity:元素的填充颜色透明度
stroke:元素的笔画颜色
stroke-width:元素的笔画宽度
stroke-opacity:元素的笔画颜色透明度
stroke-dasharray:控制描边的点划线图案的样式
stroke-dashoffset: 指定了dash模式到路径开始的距离
3、SVG Sprite
这种跟图片雪碧图类似，略。
4、 Data URIs 方式 （base 64）
举例：
.icon{
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMTYiIGhlaWdodD0iMTQ2IiB2aWV3Qm94PSIwIDAgMjE2IDE0NiI+PHBhdGggZD0iTTE3Mi43NyAxMjMuMDI1TDE0NC44MjUgOTUuMDhjNi43MzUtOS43MjIgMTAuMTA0LTIwLjU1OSAxMC4xMDQtMzIuNTA4IDAtNy43NjctMS41MDgtMTUuMTk1LTQuNTIzLTIyLjI4My0zLjAxNC03LjA4OS03LjA4OC0xMy4xOTktMTIuMjIxLTE4LjMzMnMtMTEuMjQyLTkuMjA3LTE4LjMzLTEyLjIyMWMtNy4wOS0zLjAxNS0xNC41MTgtNC41MjItMjIuMjg1LTQuNTIyLTcuNzY3IDAtMTUuMTk1IDEuNTA3LTIyLjI4MyA0LjUyMi03LjA4OSAzLjAxNC0xMy4xOTkgNy4wODgtMTguMzMyIDEyLjIyMS01LjEzMyA1LjEzMy05LjIwNyAxMS4yNDQtMTIuMjIxIDE4LjMzMi0zLjAxNSA3LjA4OS00LjUyMiAxNC41MTYtNC41MjIgMjIuMjgzIDAgNy43NjcgMS41MDcgMTUuMTkzIDQuNTIyIDIyLjI4MyAzLjAxNCA3LjA4OCA3LjA4OCAxMy4xOTcgMTIuMjIxIDE4LjMzIDUuMTMzIDUuMTM0IDExLjI0NCA5LjIwNyAxOC4zMzIgMTIuMjIyIDcuMDg5IDMuMDE1IDE0LjUxNiA0LjUyMiAyMi4yODMgNC41MjIgMTEuOTUxIDAgMjIuNzg3LTMuMzY5IDMyLjUwOS0xMC4xMDRsMjcuOTQ1IDI3Ljg2M2MxLjk1NSAyLjA2NCA0LjM5NyAzLjA5NiA3LjMzMiAzLjA5NiAyLjgyNCAwIDUuMjctMS4wMzIgNy4zMzItMy4wOTYgMi4wNjQtMi4wNjMgMy4wOTYtNC41MDggMy4wOTYtNy4zMzIuMDAxLTIuODc3LTEuMDAzLTUuMzIyLTMuMDE0LTcuMzMxem0tNDkuNDEzLTM0LjY2OGMtNy4xNDMgNy4xNDMtMTUuNzM4IDEwLjcxNC0yNS43ODcgMTAuNzE0LTEwLjA0OCAwLTE4LjY0My0zLjU3Mi0yNS43ODYtMTAuNzE0QzY0LjY0MSA4MS4yMTQgNjEuMDcgNzIuNjIgNjEuMDcgNjIuNTcxYzAtMTAuMDQ4IDMuNTcyLTE4LjY0NCAxMC43MTQtMjUuNzg2IDcuMTQyLTcuMTQzIDE1LjczOC0xMC43MTQgMjUuNzg2LTEwLjcxNCAxMC4wNDggMCAxOC42NDMgMy41NzIgMjUuNzg3IDEwLjcxNCA3LjE0MyA3LjE0MiAxMC43MTUgMTUuNzM4IDEwLjcxNSAyNS43ODYgMCAxMC4wNDktMy41NzMgMTguNjQzLTEwLjcxNSAyNS43ODZ6Ii8+PC9zdmc+")
}
优点：不需要增加网络请求数；
缺点：不能方便地使用 CSS 修改 Icon 的颜色和边线属性。
svg转base64网站推荐：http://www.mobilefish.com/services/base64/base64.php
Paste_Image.png
5、使用 SVG 中的 symbol，use 元素来制作SVG Sprite
- 方式一：作为body的第一个元素插入使用，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.icon {
display: inline-block;
width: 5em;
height: 5em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<svg>
<symbol id="icon-search" viewBox="0 0 216 146">
<title>search</title>
<path d="M172.77,123.025L144.825,95.08c6.735-9.722,10.104-20.559,10.104-32.508c0-7.767-1.508-15.195-4.523-22.283
c-3.014-7.089-7.088-13.199-12.221-18.332s-11.242-9.207-18.33-12.221c-7.09-3.015-14.518-4.522-22.285-4.522
c-7.767,0-15.195,1.507-22.283,4.522c-7.089,3.014-13.199,7.088-18.332,12.221c-5.133,5.133-9.207,11.244-12.221,18.332
c-3.015,7.089-4.522,14.516-4.522,22.283c0,7.767,1.507,15.193,4.522,22.283c3.014,7.088,7.088,13.197,12.221,18.33
c5.133,5.134,11.244,9.207,18.332,12.222c7.089,3.015,14.516,4.522,22.283,4.522c11.951,0,22.787-3.369,32.509-10.104l27.945,27.863
c1.955,2.064,4.397,3.096,7.332,3.096c2.824,0,5.27-1.032,7.332-3.096c2.064-2.063,3.096-4.508,3.096-7.332
C175.785,127.479,174.781,125.034,172.77,123.025z M123.357,88.357c-7.143,7.143-15.738,10.714-25.787,10.714
c-10.048,0-18.643-3.572-25.786-10.714c-7.143-7.143-10.714-15.737-10.714-25.786c0-10.048,3.572-18.644,10.714-25.786
c7.142-7.143,15.738-10.714,25.786-10.714c10.048,0,18.643,3.572,25.787,10.714c7.143,7.142,10.715,15.738,10.715,25.786
C134.072,72.62,130.499,81.214,123.357,88.357z" />
</symbol>
</svg>
<svg class="icon icon-search">
<use xlink:href="#icon-search"></use>
</svg>
</body>
</html>
- 方式二、使用完整路径引用Icon （涉及到跨域问题）
<body>
//路径形式进行获取icon
<svg>
<use xlink:href="/asset/svg-symbols.svg#heart"/>
</svg>
<svg>
<use xlink:href="/asset/svg-symbols.svg#heart"/>
</svg>
</body>
提示：gulp 相关插件：gulp-svg-symbols
其相关文章介绍 ：https://isux.tencent.com/16292.html
- 方式三、js控制svg写入body进行引用
svg.js
var symbols = '<svg style="width:0; height:0; visibility:hidden;position:absolute;z-index:-1">
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
</svg>';
document.body.insertAdjacentHTML("afterBegin",symbols)
svg.html
<body>
//脚本需在svg use引用之前引入
<script src = "/asset/svg.js"></script>
<svg>
<use xlink:href="#heart"/>
</svg>
</body>
二、svg资源推荐
1、svg图标搜索大全推荐 https://icomoon.io/app/#/select
2、svg压缩工具推荐：https://github.com/svg/svgo
这里简单介绍下svgo的使用：
按照教程安装好后，一定要设置好输出文件目录，否则无法找不到的输出的文件的！
Paste_Image.png
三、资料推荐
1、使用SVG中的Symbol元素制作Icon
2、20 个有用的 SVG 工具，提供更好的图像处理
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
