Android里的SVG

最新推荐文章于 2024-08-31 08:37:02 发布

因人而异

最新推荐文章于 2024-08-31 08:37:02 发布

阅读量922

点赞数 3

CC 4.0 BY-SA版权

分类专栏： UI绘制 android 文章标签： android xml 矢量图图形

本文链接：https://blog.youkuaiyun.com/HardWorkingAnt/article/details/66474235

android 同时被 2 个专栏收录

68 篇文章

订阅专栏

UI绘制

11 篇文章

订阅专栏

本文详细介绍了SVG（可伸缩矢量图形）的概念、优势，包括SVG路径指令、形状、填充和描边等关键特性，并探讨了SVG在Android中的使用。同时，推荐了SVG编辑器Method Draw和Inkscape，帮助读者更好地理解和创建SVG图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于更多知识，可以进网站学习。时空传送门

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 的优势

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

今天，所有浏览器均支持 SVG 文件，不过需要安装插件的 Internet Explorer 除外。插件是免费的，比如 Adobe SVG Viewer。

SVG路径指令

M = moveto(M X,Y) ：相当于 android Path 里的moveTo(),用于移动起始点
L = lineto(L X,Y)：相当于 android Path 里的lineTo()，用于画线
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的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,XROTATION,FLAG1,FLAG2,X,Y)：相当于arcTo()，用于画弧
Z = closepath 相当于closeTo(),关闭path

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

对cubicTo等方法不了解的可以看我的另一篇博客，Android的path解析

路径也属于SVG形状中的一种，但因为在Android中格外重要，所以专门说明。

SVG实例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" stroke="black"
stroke-width="2" fill="red"/>

</svg>

代码解释：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。

standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二行和第三行引用了这个外部的SVG DTD。该DTD位于http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd。该DTD位于W3C，含有所有允许的SVG元素。

SVG 代码以svg元素开始，包括开启标签 svg 和关闭标签svg 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！

得到的结果也与我解释的一样。

SVG形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

矩形 rect
圆形 circle
椭圆 ellipse
线 line
折线 polyline
多边形 polygon
路径 path

rect标签

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

circle 标签

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。

ellipse标签

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

line标签

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

polygon标签

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

polyline 标签

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

因为Android中并不会用到，所以只提一下。

SVG 填充

fill-rule：
关于图形（或线条）的内部区域，是由 fill-rule 属性决定的，它有 nonzero 和 evenodd 两个值。

nonzero—这个规则通过从canvas上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。在外边是不会被设置颜色的。

evenodd—这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部。