1、SVG概述
SVG(Scalable Vector Graphics) : 可縮放矢量圖形,使用 XML 格式定義圖像。
優勢:
SVG是矢量圖形文件,無限放大不失真。
可以用CSS樣式來自由定義圖標顏色,比如顏色/尺寸等效果。
所有的SVG可以全部在一個文件中,節省HTTP請求 。
使用SMIL、CSS或者是javascript可以制作充滿靈性的交互動畫和濾鏡效果。
由于SVG也是一種XML節點的文件,所以可以使用gzip的方式把文件壓縮到很小。
缺點:對CPU消耗比較,圖片越大,繪制占用的CUP資源越多。官方建議不超過200dp*200dp
2、SVG圖片使用
Android studio提供了svg圖片格式轉換成代碼的工具:
看到生成的一堆代碼,是不是一臉懵逼,特別是pathData命令,一堆字母數字小數點,不用管它,只要了解個大概,就知道怎么玩了,反正他是生成的,我們只追求高效的工作效率,但是至少需要知道大概意思,不要一直懵逼下去:
Path指令解析如下所示:
1、支持的指令:
M = moveto(M X,Y) :將畫筆移動到指定的坐標位置
L = lineto(L X,Y) :畫直線到指定的坐標位置
H = horizontal lineto(H X):畫水平線到指定的X坐標位置
V = vertical lineto(V Y):畫垂直線到指定的Y坐標位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次貝賽曲線
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次貝賽曲線
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧線
Z = closepath():關閉路徑
注意:如果還有不了解貝塞爾曲線的,可以專門去學習一下,我這里不啰嗦。
2、使用原則:
坐標軸為以(0,0)為中心,X軸水平向右,Y軸水平向下
所有指令大小寫均可。大寫絕對定位,參照全局坐標系;小寫相對定位,參照父容器坐標系
指令和數據間的空格可以省略
同一指令出現多次可以只用一個