SVG

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渐变
图形 标签
矩形 rect
圆形 circle
椭圆 ellipse
线 line
折线 polyline
多边形 polygon
路径 path

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符号调用对应的图标。 -
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。