haizlin / fe-interview

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.28k stars 3.25k forks source link

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

Open haizhilin2013 opened 5 years ago

haizhilin2013 commented 5 years ago

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

liuxiaole commented 5 years ago

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 commented 5 years ago

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

censek commented 4 years ago

可缩放矢量图形

D3.js