SVG的简介

一、SVG是什么

• 指可伸缩矢量图形 (Scalable Vector Graphics)
• 用来定义用于网络的基于矢量的图形
• 使用 XML 格式定义图形
• 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• 是万维网联盟的标准
• 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

二、SVG支持的版本如下（详细版本）：

三、位图与矢量图的区别

位图[bitmap]，也叫做点阵图，删格图象，像素图，简单的说，就是最小单位由象素构成的图，缩放会失真。构成位图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。举个例子来说，位图图像就好比在巨大的沙盘上画好的画，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒单纯的不可变化颜色。
矢量图[vector]，也叫做向量图，简单的说，就是缩放不失真的图像格式。矢量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数来实现的，也就是说，矢量图实际上并不是象位图那样纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同[不失真]。举例来说，矢量图就好比画在质量非常好的橡胶膜上的图，不管对橡胶膜怎样的常宽等比成倍拉伸，画面依然清晰，不管你离得多么近去看，也不会看到图形的最小单位。

此模块内容来自这

四、SVG图片的使用

• 在 HTML 中使用 标签引用
• 直接在 HTML 中使用 SVG 标签
• 作为 CSS 背景

五、基本标签

<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>

六、基本属性

• fill
• stroke
• stroke-width
• transform

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！