一【数据可视化】SVG _矢量图

一、邂逅SVG和初体验什么是SVG
? SVG全称为（），即可缩放矢量图形。（矢量定义：既有大小又有方向的量。在物理学中称作矢量，如一个带箭头线段：长度表示大小，箭头表示方向；在数学中称作向量。在计算机中，矢量图可无限放大而不变形）
? SVG是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画。
? SVG 规范是万维网联盟(W3C) 自1998 年以来开发的标准。
? SVG 图像可在不损失质量的情况下按比例缩放，并支持压缩。
? 基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示
SVG对浏览器的兼容性：
SVG历史
? SVG1.x 版本
? SVG 是工作组于1998 年开始开发，而SVG 1.0于2001 年9 月4 日成为W3C 推荐的标准。
? SVG 1.1 于2003 年1 月14 日成为W3C 推荐的标准。该版本增加了模块化规范的内容。除此之外，1.1 和1.0 几乎没有区别。
? SVG Tiny 1.2 于2008 年12 月22 日成为W3C 推荐标准，主要是为性能低的小设备生成图形，但是后来被SVG 2 所弃用了。
? SVG 1.1 第二版于2011 年8 月16 日发布，这次只是更新了勘误表和说明，并没有增加新功能。
? SVG2.0版本（推荐）
? SVG 2.0于2016 年9 月15 日成为W3C 候选推荐标准，最新草案于2020年5月26日发布。
? SVG2.xFrom SVG1.x ( )，比如：
? s from the‘svg’.
? Added theto use’auto’foron‘image’.
? Added‘lang’ on‘desc’and‘title’.
? ‘xlink:type’,‘xlink:role’,‘xlink:’,‘xlink:show’and‘xlink:’.
?the‘xlink:href’ in favor of using‘href’ a .
SVG优点
? 扩展好：矢量图像在浏览器中放大缩小不会失真，可被许多设备和浏览器中使用。而光栅图像（PNG 、JPG）放大缩小会失真。
? 矢量图像是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。

文章插图
? 光栅图像是由像素点构建的图像——微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。
【一【数据可视化】SVG】? 灵活：SVG是W3C开发的标准，可结合其它的语言和技术一起使用，包括CSS、、HTML 和SMIL。SVG图像可以直接使用JS和CSS进行操作，使用时非常方便和灵活，因为SVG也是可集成到DOM 中的。
? 可以动画：SVG 图像可以使用JS 、CSS 和SMIL进行动画处理。对于Web 开发人员来说非常的友好。
? 轻量级：与其它格式相比，SVG 图像的尺寸非常小。根据图像的不同，PNG 图像质量可能是SVG 图像的50 倍。
? 可打印：SVG 图像可以以任何分辨率打印，而不会损失图像质量。
? 利于SEO：SVG 图像被搜索引擎索引。因此，SVG 图像非常适合SEO（搜索引擎优化）目的。
? 可压缩：与其它图像格式一样，SVG 文件支持压缩。
? 易于编辑：只需一个文本编辑器就可以创建SVG 图像。设计师通常会使用Adobe（AI）等矢量图形工具创建和编辑。
SVG缺点
? 不适和高清图片制作
? SVG 格式非常适合用于徽标和图标（ICON）等2D 图形，但不适用于高清图片，不适合进行像素级操作。
? SVG 的图像无法显示与标准图像格式一样多的细节，因为它们是使用点和路径而不是像素来渲染的。
? SVG图像变得复杂时，加载会比较慢
? 不完全扩平台
? 尽管SVG 自1998年以来就已经存在，并得到了大多数现代浏览器（桌面和移动设备）的支持，但它不适用于IE8 及更低版本的旧版浏览器。根据的数据，大约还有5% 的用户在使用不支持SVG 的浏览器。

一 【数据可视化】SVG

一【数据可视化】SVG