SVG入门与使用

SVG 简介

SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为以下几点：

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

SVG 的应用

    图表视图(echart)、地图视图(WEB-GIS)
    形象(AI)的全网应用
    UI 产品的设计
    SVG 动画

canvas和SVG的区别

图形系统

计算机中描述图形信息的两大系统是栅格图形和矢量图形。

栅格图形

在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组如下图片所示。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为 位图，通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。

矢量图形

矢量图是基于数学的描述，如下图的多啦A梦，他的头是一条怎么样的贝塞尔曲线，它的参数是什么及用什么颜色来填充贝塞尔曲线，通过这种方式描述图片就是适量图。

想象一下在一张绘图纸上作图的过程，栅格图形的工作就像是描述哪个方格应该填充什么颜色，而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。

创建 SVG 图像

根元素 <svg> 以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间。<title> 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示， <desc> 元素允许咱们为图像定义完整的描述信息。

基本形状和属性

基本图形

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

基本属性

fill、stroke、stroke-width、transform

在网页中使用 SVG

SVG 是一种图件格式，因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。具体可以采用两种方法：将图像包含在 <img> 元素内（当图像是页面的基本组成部分时，推荐这种方式）；或者将图像作为另一个元素的 CSS 样式属性插入(当图像主要用来装饰时，推荐这种方式)。

SVG 的视窗，视野和全局（世界）

视窗

SVG的属性width、height来控制视窗的大小，也称为SVG容器

世界

SVG里面的代码，就是对SVG世界的定义

视野

世界是无穷大的，视野是观察世界的一个矩形区域。如下图所示

笔画特性：

属性    值
stoke    笔画颜色，默认为none
stroke-opacity    笔画透明度，默认为1.0（完全不透明），值范围：0.0~1.0
stroke-dasharray    用一系列数字指定虚线和间隙的长度，如：stroke-dasharray:5,10,5,20
stroke-linecap    线头尾的形状：butt（默认）、round、square
stroke-linejoin    图形的棱角或一系列连线的形状：miter（尖的，默认值）、round（圆的）、bevel（平的）
stroke-miterlimit    相交处显示宽度与线宽的最大比例，默认为4

填充颜色
属性    值
fill    指定填充颜色，默认值为 black
fill-opacity    从 0.0 到 1.0 的数字， 0.0 表示完全透明, 1.0(默认值) 表示完全不透明
fill-rule    属性值为 nonzero (默认值) 或 evenodd。