SVG 从入门到痛恨，怎么不早点学起来（图解版）

本文简介

点赞 + 关注 + 收藏 = 学会了


作为一只前端，只懂 Vue、React 感觉已经和各人拉不开隔断了。
可视化、呆板学习等范畴 JS 都有涉及到，而可视化方面已经被很多范畴用到，比如大屏项目。
可视化范畴相干的技能有 canvas 和 SVG ，而这两个东东是早晚要打仗的了。

在我打仗 SVG 之前，我以为这是一个很高深的东西，有点恐惊。我第一次打仗 SVG 是在 iconfont网站，我没理它是什么东西，反正就跟着教程用。第二次打仗就是在 《CSS揭秘（图灵出品）》 这本书，内里会讲到 SVG 相干的内容，而我选择了跳过这部门内容。。。

之后是怎么学会的我也忘了。
迩来时间比力多，就把我懂的知识用人话整理出来，方便查询。


本文告急把 “可视” 方面的内容整理出来，操纵交互方面(动画、交互事故等) 的内容留到下一篇~




什么是SVG

在学习 SVG 之前，起主要相识 位图 和 矢量图 的区别。
简单来说：

• 位图：放大会失真图像边沿有锯齿；是由像素点构成；前端的 Canvas 就是位图结果。
  
• 矢量图：放大不会失真；利用 XML 形貌图形。
  

我在 知乎 上找了一个图对阐明一下。
左边是位图，右边是矢量图


那么 SVG 是什么呢？它是矢量图的此中一种格式。它是用 XML 来形貌图形的。
对于初学 SVG 的前端来说，可以简单的明确为 “SVG 是一套新标签”。
以是可以利用 CSS 来设置样式，也可以利用 JS 对 SVG 举行操纵。




SVG的利用方式

利用方法

SVG 的利用方式有很多种，我最保举直接在 HTML 中直接利用，也就是直接当 HTML 标签利用。
我在 《SVG 在前端的7种利用方法》 里记载了几种利用方法：

• 在欣赏器直接打开
  
• 内嵌到 HTML 中（保举⭐⭐⭐）
  
• CSS 配景图（保举⭐）
  
• 利用 img 标签引入（保举⭐）
  
• 利用 iframe 标签引入（不保举❌）
  
• 利用 embed 标签引入（不保举❌）
  
• 利用 object 标签引入（不保举❌）
  

SVG默认宽高

在 HTML 中利用 SVG ，直接用 <svg> 标签即可。