What it is

• 可缩放矢量图形(Scalable Vector Graphic) 一种用来描述二维矢量图形的XML标记语言
• SVG面向图形，HTML面向文本
• SVG与Flash的区别：
  • 同：都用于二维矢量图形
  • 异：SVG是W3C标准，基于XML，开放的，与同为W3C标准的能协同工作；Flash是基于二进制格式，封闭的

What it contians

• 1.兼容现有图片并支持矢量。功能包括：嵌套转换，Alpha通道，滤镜及矢量功能，在任何高清设备都很高清。
• 2.可读写好，有利于SEO和无障碍阅读，SVG采用的是XML语法，图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取
  • 通过title和desc

<svg class="">
    <title>logo </title>
    <desc>This is Tencent Cloud log</desc>
    <use xlink:href="#logo"></use>
</svg>

SVG包含的内容：

• SVG基础形状
• SVG滤镜
• SVG渐变

How to use it

• 1.Inline SVG :直接将SVG标签写入到HTML中，直接通过fill和stroke属性来控制填充颜色和边框颜色
• 2.img/object标签引用，将SVG iCON保存为一个单独文件
• 3.background 和Data URIs :使用base64编码

.icon{ background-image:url(test.svg)}
.icon{background-image:url(data:text/svg+xml:base64)}
//通过base64来减少HTTP请求
//但base64在性能和维护方面都不是很好 eg：base64在移动端渲染事件比正常使用url的渲染时间要慢6倍

• 4.SVG Sprite——icomoon

.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(sprite.svg);
    background-position: 0 0;
}

• 5.SVG Defs/Symbols
  • SVG Sprites：需要通过坐标获取对应位置图标——使用相对位置来控制哪个图标被显示出来
  • SVG Defs/Symbols对每个SVG ICON定义ID，直接调用对应的ID——允许使用<use>的方式直接引用SVG的某一部分

<svg xmlns = "http://">
    <symbols id="icon1" viewBox ="0 0 32 32">
        <path fill="#444444" d="M3 3h1v12h-1v-12v"></path>
    </symbols>
    <symbols id="icon2" viewBox ="0 0 32 32">
        <path fill="#444444" d="M3 3h1v12h-1v-12v"></path>
    </symbols>
</svg>

• 上面的代码作为body第一个元素插入，此后，在需要某个icon的地方插入即可：使用锚点路径

<svg class="icon">
    <use xlink:href="#film"></use>
</svg>

• 上面保存在SVG文件后，在HTML调用：使用完整路径引用

<svg><use xlink:href ="/svg/symbol.svg#icon1"></use></svg>
<svg><use xlink:href ="/svg/symbol.svg#icon2"></use></svg>

专门处理SVG Symbols用的glup插件 gulp-svg-symbols

When it In IE

• IE下SVG的兼容性不好。高清ICON的适配选择在icomoon

With icon font

• 1.icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果差，细节部分锯齿很明显；svg是图形，在浏览器中使用图形渲染 没有上述问题
• 2.icon font只支持单色，作为字体无法支持多色图形。
• 3.icon font可读性不好：主要在页面用Unicode符号调用对应的图标。 -