前端之矢量图形

矢量图

矢量图使用算法定义 — 一个矢量图文件包含了图形和路径的定义。 SVG 格式可以创造用于 Web 的精彩的矢量图形，而且放大网页不会模糊。

SVG

SVG 是用于描述矢量图像的XML语言， SVG用于标记图形，而不是内容。
SVG 指可伸缩矢量图形。
XML 是可扩展标记语言是由 W3C 指定的一种通用标记语言。
XML 标签 类似 HTML 标签，但 XML 允许用户定义自己的标签。

工具

矢量图形编辑器， Inkscape
优点：

1. 矢量图像中的文本仍然可访问（这也有利于 SEO)）。
2. SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。

缺点：

1. 复杂的SVG会占用浏览器很长的处理时间
2. SVG可能比栅格图像更难创建

SVG预定义形状

SVG有一些预定义的形状元素：
矩形
圆形
椭圆
线
折线
多边形
路径

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
svg>

使用方式

SVG 文件可通过以下标签嵌入 HTML 文档：、