svg探索之路

什麽是SVG

• SVG（Scalable Vector Graphics） 為一種可縮放的向量圖形，基於XML，用於描述二維向量圖形的一種格式。
• SVG是www的標準。
• SVG與DOM和XSL之類的W3C標準的一個整體

與其他圖像格式相比，SVG優勢

• SVG可以被非常多的工具讀取與修改。
• SVG相較于JPEG和GIF相比較起來，尺寸更小，且可壓縮性更强。
• SVG可以在圖像質量不下降的情況下被放大。
• SVG可以與 java 技術一起運行。
• SVG是純粹的XML文件。
• SVG圖像中的文本是可選的，同時也是可以搜索的。

關於SVG--PATH

在SVG之中所有的元素都可以有Path組成，所以Path再SVG中非常重要。下面描述中，大寫字母表示絕對坐標，小寫代表與前一個坐標的相對坐標。

在SVG坐標體系中，熒幕的左上角為起點，左到右為 X 軸，從上到下為 y 軸。

Path的形状主要由一个参数 d 来决定。d所接受的参数是命令加参数的形式，具体命令如下。

SVG坐標系

Path指令列表

• M/m （Move to 的意思）
  M表示起始點，所有Path都會先有一個起點坐標，因为是 move to 的原因，可以预期如果只给定 M/m
  那么你只会得到一个看不到的点。

• H/h
  H可以從目前的點畫出水平綫到X坐標，衹有一個參數。

H=50

• V/v
  V可以從目前的點畫出垂直綫到 y 的坐標，等同于 H/h 衹有一個參數。

V=50

• L/l
  L可以從目前點畫到另外給定的一個坐標上，有兩個參數，x、y。

（0，0）->（50，50）

• C/c
  C表示可以畫出一條三次貝兹曲綫（Bézier curve）。因此會有個控制點，分別為 x1，y1，x2，y2，x，y 。在這之中第一組坐標表示第一個曲綫的控制點，第二組表示第二個曲綫控制點，最後表示結束位置。

Bézier curve

• S/s
  S 可以在原本的點後方建立一個帶有貝茲曲線控制點的點，然後原本的點會以同樣的斜率鏡射一個貝茲控制點，講得很像繞口令，可以可以看下圖就明白了。

• Q / q
  Q 就簡單多了，就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標即可。

Q/q

• T / t
  T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。

• Z / z
  Z 沒有任何參數，放在最後，表示將起點和終點用直綫連接起來。

Q/q -> Z

path畫一個正方形

path畫正方形

path 畫弧綫（Arcs）

畫出橢圓圓弧（Elliptical Arc）。命令是 A/a，接受的參數共有 7 個。

• rx：橢圓的 x 軸半徑（根據不同的終點換算比例）
• ry：橢圓的 y 軸半徑（根據不同的終點換算比例）
• x-axis-rotation：弧綫與x軸的夾角。
• large-arc-flag ：
• sweep-flag：
• x：終點 x 坐標
• y：終點 y 坐標

參考資料
MDN-SVG教程
Oxxo,STUDIO->SVG Path上
Oxxo,STUDIO->SVG Path下
svg-online編輯