svg(基本操作)svg基本命令、svg导出、svg压缩

一、基本概念

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 文件是纯粹的 XML

svg元素：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

<rect width="200" height="200">   //只设置宽高
<rect x="100" y="50" width="100" height="150">  //设置宽高和位置，x、y为左上角坐标（以最左上角为点0，0）

<circle cx="100" cy="50" r="40">  //圆心(cx,cy),默认为(0,0) ，半径r

<ellipse cx="300" cy="80" rx="100" ry="50">     //rx水平半径，ry垂直半径

<line x1="0" y1="0" x2="200" y2="200">  //起点(x1,y1)，终点(x2,y2)

<polyline points="200,10 250,190 160,210 202,120">  //依次连接坐标点形成折线

<polygon points="200,10 250,190 160,210 202,120">  //在折线的基础上连接终点和起点

<path d="M150 0 L75 200 L225 200 Z" />   //d中的命令大写表示绝对定位（负数无效），小写为相对定位(负数有效)

path命令：

• M :  movet o      //画笔移动到坐标点（即从某一坐标开始）
• L  : line to     //连线
• H : horizontal line to   //画水平线
• V : vertical line to   //画垂线
• C : curve to  
• S : smooth curve to
• Q : quadratic Bézier curve
• T : smooth quadratic Bézier curve to
• A : elliptical Arc
• Z : closepath  //闭合路径（连接起点和终点）

二、样式

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="100%" viewBox="0 0 100 100" >
<style>
#svg{
    border: 1px solid #666;
    border-radius: 3px;
    transform:rotateX(180deg);
}
</style>
<path xmlns="http://www.w3.org/2000/svg" id="block" stroke="black" stroke-width="0.01px" fill="transparent" d=" 
M 50 50 L 50 90 90 90 90 50 Z
"/>
  </svg>

svg中可以像html标签一样添加样式（直接使用内联样式或者像HTML一样使用CSS样式）

• viewBox //显示的坐标范围（为负无效）
• stroke //画线颜色
• stroke-width //线宽
• fill //填充颜色

三、导出svg

(1)前端点击导出，参考svg在线编辑器实现。
(2)也可以把svg的内容转为字符串，然后导出文件名为.svg的文件即可。
例如，在node中可以使用fs（文件系统），导出svg文件。

fs.writeFileSync('path.svg','<svg><path/><svg>')      //第一个参数为绝对路径加名称，第二个参数为svg文件内容字符串，其他参数自行搜索

四、压缩

因为svg中的内容中命令部分是字符串，当小数位数很多时会占用空间较大，可以考虑对小数进行适当截取处理。

另外，在node也可以通过node插件svgo //比较好用，一般能压缩50~60%

npm install -g svgo  //安装插件
svgo file.svg    //压缩单个
svgo -f  path  //批量压缩