SVG

出自六年制學程
在2015年1月6日 (二) 19:32由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

Scalable Vector Graphics(可縮放向量圖形)

  • 特性
    1. XML語法。
    2. 二維向量圖形格式。
    3. 由W3C制定,是開放標準。

轉檔

  • SVG轉點陣圖:
    1. inkscape:字形為細明體
    2. 線上轉檔:字體為中黑
  • 點陣圖轉 SVG 的image標籤:商業軟體 Contenta Converter PREMIUM

語法

宣告圖檔

<?xml version='1.0' encoding='UTF-8' standalone='no'?>

標籤

  • svg(成對):svg 開始及結束。屬性有:xmlns(如http://www.w3.org/2000/svg),version(如1.1),width,height

向量圖形標籤

  • 共同約定:
    1. 開始與結束合一。
    2. 長度如省略單位,預設單位為 px。
    3. px可以使用小數點。
    4. 以左上為座標原點。
    5. 座標描述先 x 後 y 。
    6. stlye屬性中關於線條之樣式,也可以作為繪圖:
      • stroke (線條顏色),
      • stroke-width (線條寬度),
      • stroke-opacity (線條顏色的透明度,合法的範圍是:0 - 1,0最透明,預設1),
      • stroke-linecap (線條端點形狀,預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形),
      • stroke-linejoin (線條轉彎處樣式,預設miter尖角、round圓角、bevel斜角),
      • stroke-miterlimit (尖角內外距/線寬的最大值,不設限則尖角可以拉長至無限長,預設為 4 倍),
      • stroke-dasharray (預設none,代表實線。若為數字其值為一陣列,陣列值為線段中實線段長度與虛線段長度的交錯數字,通常是兩個數字一組,如果是奇數,則最後面自動加補第一個數字)
    7. stlye屬性中關於面之樣式:
      • fill (填充顏色),
      • fill-opacity (填充不透明,合法的範圍是:0 - 1,0最透明,預設1)。
      • fill-rule (polygon等標籤有時會將內部分割成不同的區域,填色方式,預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
    8. 選擇器 class,id 同 CSS 。

常見的簡易繪圖標籤:

  1. line(直線),屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第一點y座標)。
  2. polyline(多點成線),諸屬性如下:
    • points:多點,點與點用空白間開,同一點 x y 座標以逗點間開。
  3. polygon(多邊形),也可以取五點畫出一個星形。諸屬性如下:
    • points:多點,點與點用空白間開,同一點 x y 座標以逗點間開。
  4. circle(圓),諸屬性如下:
    • cx(圓心x座標),cy(圓心y座標),r(半徑)
  5. rect(矩形),諸屬性如下:
    • width(寬),height(高),省略起點則以原點為起點,x(起點x座標),y(起點y座標),rx(圓角x半徑),ry(圓角y半徑)
  6. ellipse(楕圓),諸屬性如下:
    • cx(中心x座標),cy(中心x座標),rx(x軸半長),ry(y軸半長)。

path

  • 語法說明
  • 參數大寫代表絕對座標,小寫代表與前一個座標的相對座標
  • 點與點之間、同點的 x , y 座標之間,用空白間開或用,間開兩者是等價的。
指令 參數 指令說明
M(move to) x y 起始點的 x , y 座標
L(line to) x y 從目前點的座標畫直線到指定點的 x , y 座標
H(horizontal line to) x 從目前點的座標畫水平直線到指定的 x 軸座標
V(vertical line to) y 從目前點的座標畫垂直線到指定的 y 軸座標
C(curve) x1 y1 x2 y2 x y
SvgPathC.png
從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標:其中 x1, y1 及 x2, y2 為控制點
S(smooth curve) x2 y2 x y
SvgPathS.png
在目前點之前必須有一個貝茲控制點,在目前點之後會以同樣的斜率鏡射一個貝茲控制點,再由參數(x2,y2)補上第二個貝茲控制點,再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。如:<path d='M0 0 C40 40,60 40,100,0 S150 -40, 200 0' stroke='black' fill='none'/>
Q(quadratic Bézier curve) x1 y1 x y
SvgPathQ.png
從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標:其中 x1, y1 為控制點
T(smooth quadratic Bézier curve) x y
SvgPathT.png
前方要接上 Q 才能畫,從目前點以前一個 Q 的控制點之鏡射點為控制點,畫二次貝茲曲線到指定點(x,y)。
A(Arc) rx ry x-axis-rotation large-arc-flag sweep-flag x y 從目前點的座標畫個橢圓形到指定點的 x, y 座標:其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑,x-axis-rotation 是弧線與 x 軸的旋轉角度,large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線,sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向
Z(closepath) 關閉路徑,將目前點的座標與第一個點的座標連接起來

文字

  • text開始與結束之間夾字,可用中英文。
  • 屬性 x 和 y 標示字的起點
  • 用 style 控制字體、字形。

圖照

  • image,屬性有x(第一點x座標)y(第一點y座標)width(寬)height(高)。
  • 屬性 xlink:href="data:image/png;base64,圖照編碼"

嵌入外來

  1. foreignobject 開始與結束之間夾<body xmlns="http://www.w3.org/1999/xhtml">…</body>,body 中再夾如 table 等 HTML code 。
    • 屬性有:x嵌入物x座標,y嵌入物y座標,width嵌入物寬,height嵌入物高。

濾鏡

漸層

transform 坐標變換方式

  • 代碼:<g transform="..."> <!--other elements> ...</g>
  1. 平移變換(translate):transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
  2. 旋轉變換(rotate):transform="rotate(angle cx,cy)"。angle代表旋轉角度,缺省單位是「度」,順時針為正,逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標,則缺省值是(0,0)。
  3. 伸縮變換(scale):transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸:大於1;縮小:小於1。若省略sy,即sy=sx,作等比例縮放。
  4. 歪斜變換(skew):transform="skewX(x-angle)"或transform="skewY(y-angle)",x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
  5. 矩陣變換(matrix):transform="matrix(a b c d e f)",這裡的六個參數分別是變換矩陣中的六個參數。特點是靈活性大,無論多麼複雜的變換,只需進行一次矩陣運算即可。

動畫

其他