Android Vector Drawable | SVG 矢量图

最新推荐文章于 2024-06-25 07:50:26 发布

coderguoy

最新推荐文章于 2024-06-25 07:50:26 发布

阅读量1k

点赞数 1

分类专栏： Android UI 文章标签：矢量图 android w3c

本文链接：https://blog.csdn.net/lengxuechiwu1314/article/details/73605362

版权

Android UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

这里以实现笑脸为例

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="200dp"
        android:height="200dp"
        android:viewportHeight="100"
        android:viewportWidth="100">
    <path
        android:fillColor="#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"/>
    <path
        android:name="eye_left"
        android:pathData="M 28,40 Q 36,30 43,40"
        android:strokeColor="#000000"
        android:strokeLineCap="round"
        android:strokeWidth="4"/>
    <path
        android:name="eye_right"
        android:pathData="M 58,40 Q 66,30 73,40"
        android:strokeColor="#000000"
        android:strokeLineCap="round"
        android:strokeWidth="4"/>
    <path
        android:name="smile"
        android:pathData="M 30,65 Q 50,85 70,65"
        android:strokeColor="#000000"
        android:strokeLineCap="round"
        android:strokeWidth="4"/>
</vector>

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(),关闭path