haizlin/fe-interview

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

Opened this issue · 3 comments

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

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

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

可缩放矢量图形

D3.js