SVG 入门指北（一）
SVG 入门指北（一）：简介、特点、浏览器支持情况、数值单位
SVG 入门指北（二）：理解画布、视窗、视野
SVG 入门指北（三）：矩形、圆形、椭圆
SVG 入门指北（四）：线条、多边形、多线条、文本、路径
SVG 简介
SVG（Scalable Vector Graphics）是一种描述二维图形的语言。 作为独立格式或与其他 XML 混合使用时，它使用 XML 语法。 HTML 文档中使用的 SVG 代码使用 HTML 语法。 SVG 支持三种类型的图形对象：矢量图形形状（例如，由直线和曲线组成的路径）， 图像和文本。可以对图形对象进行分组、样式化转化和合成。 功能集包括嵌套变换、裁剪路径、Alpha 蒙版、滤镜效果和模板对象。
SVG 特点
SVG指可伸缩矢量图形SVG基于矢量的图形SVG使用XML格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG是万维网联盟的标准SVG与诸如DOM和XSL之类的W3C标准是一个整体
SVG 浏览器支持情况
SVG VS Canvas
| Canvas | SVG | |
|---|---|---|
| 历史 | 较新,由 apple 私有技术发展而来 | 2003 年成为 W3C 标准 |
| 功能 | 功能简单,2D 绘制 API,WEBGL 等 3D 技术 | 功能丰富,各种图形,滤镜,动画等 |
| 特点 | 像素,只能脚本驱动 | 矢量 XML,CSS,元素操作 |
| 支持 | 主流浏览器,IE9+ | 主浏览器,1E9+,其他 SVG 阅读器 |
| 操作对象 | 基于像素(动态点阵图) | 基于图形元素 |
| 元素 | 单个 HTML 元素 | 多种图形元素 |
| 驱动 | 用户交互到像素点 | 用户交互到图形与元素 |
| 性能 | 适合小面积,大数量的应用场景 | 适合大面积,小数量应用场景 |
| 动画 | 数据驱动 | DOM 驱动 |
计算机中描述图形信息的两大系统是 栅格图形 和 矢量图形 。
1. 栅格图形
在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组如下图片所示。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为 位图，通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。
2. 矢量图形
矢量图是基于数学的描述，又称为向量，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。想象一下在一张绘图纸上作图的过程，栅格图形的工作就像是描述哪个方格应该填充什么颜色，而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。
SVG 的数值单位
| 单位 | 含义 |
|---|---|
| px | 像素（默认） |
| em | 相对于父元素的字体大小 |
| % | 相对于父元素百分比 |
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 |
| pt | Point |
| pc | Picas |
1in = 25.4mm = 2.54cm = 6pc = 72pt =96px
如有帮助，点赞鼓励一下吧！
评论
一键登录