[html] 第110天 什么是svg？说说svg有什么运用场景？

[haizhilin2013]

第110天 什么是svg？说说svg有什么运用场景？

[liuxiaole]

SVG是可缩放的矢量图形，是用XML来定义的图像。一个最基础的svg标签如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300px" height="100px"  />
</svg>

经过缩放不会有失真的情况。
一般可以通过以下几种方式来使用：
<img src="test.svg"> 兼容性差
<embed src="test.svg" type="image/svg+xml">
<iframe src="test.svg“> 不推荐
<object data="test.svg" type="image/svg+xml">

svg详细属性可以参见svg参考手册

在 9012 年的今天， 这不算兼容性差吧？都支持 IE9+，iOS5+，Android 3.0+的啊。

svg in css bg： https://caniuse.com/#feat=svg-css
svg in html img element: https://caniuse.com/#feat=svg-img
inline svg: https://caniuse.com/#search=inline%20svg

[EragonBubble]

SVG为可缩放的矢量图形，缩放不失真

[censek]

可缩放矢量图形

D3.js