Android Vector Drawable | SVG 矢量图
Android Vector Drawable | SVG 矢量图
What is SVG
SVG（全称：可缩放矢量图形 Scalable Vector Graphics），是用于描述矢量图形的一种图形格式。
SVG是W3C制定的，是一个W3C开放标准（该标准是2001年由太阳微系统、Adobe、苹果公司、IBM 以及柯达联合制定的）。它主要有有以下几种特征：
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
有哪些优点
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
可惜的是Android官方目前（根据多方消息，估计不久会适配）对SVG格式的支持只是在Android 5.0 (LOLLIPOP) 以上,如果低版本需要使用SVG格式的图片，你需要使用第三方兼容包
如何实现？
1.使用系统提供的
google发布了大量开源的ICON图片来满足我们的基本设计需求,该项目的 github地址
2.自定义SVG
这里以实现笑脸为例
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="100"
android:viewportWidth="100">
"#fbbc05"
android:pathData="M 50,50 m -48 ,0 a 48,48 0 1,0 96,0 a 48,48 0 1,0 -96,0"/>
"eye_left"
android:pathData="M 28,40 Q 36,30 43,40"
android:strokeColor="#000000"
android:strokeLineCap="round"
android:strokeWidth="4"/>
"eye_right"
android:pathData="M 58,40 Q 66,30 73,40"
android:strokeColor="#000000"
android:strokeLineCap="round"
android:strokeWidth="4"/>
"smile"
android:pathData="M 30,65 Q 50,85 70,65"
android:strokeColor="#000000"
android:strokeLineCap="round"
android:strokeWidth="4"/>
height width表示该SVG图形的具体大小
viewportHeight viewportWidth 表示SVG图形划分的比例
语法
path标签
M = moveto (M X,Y) 相当于 android Path 里的moveTo(),用于移动起始点
L = lineto (L X,Y) 相当于 android Path 里的lineTo()，用于画线
H = horizontal lineto (H X) 用于画水平线
V = vertical lineto (V Y) 用于画竖直线
C = curveto (C X1,Y1,X2,Y2,ENDX,ENDY) 相当于cubicTo(),三次贝塞尔曲线
S = smooth curveto (S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) quadTo()，二次贝塞尔曲线
T = smooth quadratic Belzier curveto (T ENDX,ENDY) 同样二次贝塞尔曲线，更平滑
A = elliptical Arc (A RX,RY,XPRTATION,FLAG1,FLAG2,X,Y) 相当于arcTo()，用于画弧
Z = closepath() 相当于closeTo(),关闭pathSVG常用指令
- A
1.RX,RY 椭圆的半径大小
2.椭圆的X轴与水平方向顺时针方向夹角
3.1：大角度弧线 0：小角度弧线
4.1：顺时针方向 0：逆时针方向
5.X,Y 终点坐标
更详细的请看svg官方语法
完整代码点我下载GitHub
Thank you
- 以上仅本人学习中遇到的问题，如有更多意见欢迎随时交流 issues
- email:[email protected]