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  //批量壓縮