svg在线画图代码-我要做一个矢量图编辑器（绘图工具），如何将编辑后的图形保存为svg格式的文件。

SVG图片是一种可支持任意缩放的图片格式,使用xml定义,使用canvas中path路径来完成绘制,和我们传统使用的BitMap位图有很大的区别。

SVG在前端早就普及了,在android中是google是在5.0之后开始支持的,14年出来之后兼容是个大问题,随着2016.2V7包23.2.0版本的发布才算是有个相对完善的兼容使用方案。

SVG的概念我就不写了,拿来主义啦,原文:AndroidVector曲折的兼容之路

不瞎逼逼,我们先来看一看android中的SVG矢量图是个什么东东

看到没有,这就是一个SVG矢量图片,就是一个xml文件,右边是预览,先说下,这东西的好处:缩放不失真,体积小。这一个SVG图片只有970个字节...强大吧,比png格式的图片强的没边了吧,png我们还得适配,做多套,然后一个一个改名字复制到工程里,有了SVG妈妈再也不担心我们写作业啦...

这里需要解释下这里的几个标签:

这里有一分详细的属性说明:

好了下面开始介绍SVG啦

首先,需要讲解两个概念——SVG和Vector。

SVG,即ScalableVectorGraphics矢量图,这种图像格式在前端中已经使用的非常广泛了

Vector,在Android中指的是VectorDrawable,也就是Android中的矢量图

因此,可以说Vector就是Android中的SVG实现,因为Android中的Vector并不是支持全部的SVG语法,也没有必要,因为完整的SVG语法是非常复杂的,但已经支持的SVG语法已经够用了,特别是Path语法,几乎是Android中Vector的标配

Android以一种简化的方式对SVG进行了兼容,这种方式就是通过使用它的Path标签,通过Path标签,几乎可以实现SVG中的其它所有标签,虽然可能会复杂一点,但这些东西都是可以通过工具来完成的,所以,不用担心写起来会很复杂。

Path指令解析如下所示:

支持的指令:

M=moveto(MX,Y):将画笔移动到指定的坐标位置

L=lineto(LX,Y):画直线到指定的坐标位置

H=horizontallineto(HX):画水平线到指定的X坐标位置

V=verticallineto(VY):画垂直线到指定的Y坐标位置

C=curveto(CX1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线

S=smoothcurveto(SX2,Y2,ENDX,ENDY)

Q=quadraticBelziercurve(QX,Y,ENDX,ENDY):二次贝赛曲线

T=smoothquadraticBelziercurveto(TENDX,ENDY):映射

A=ellipticalArc(ARX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线

Z=closepath():关闭路径

坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下

所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系

指令和数据间的空格可以省略

同一指令出现多次可以只用一个

注意,’M’处理时,只是移动了画笔,没有画任何东西。它也可以在后面给出上同时绘制不连续线。

关于这些语法,开发者需要的并不是全部精通,而是能够看懂即可,其它的都可以交给工具来实现。

这里有一篇Androidvector标签PathData画图超详解详细描述了SVG中path的绘制

好了概念性的东西说完了,我们来看看

SVG的使用分2种,一种是静态SVG矢量图,就是本文的主角,本章节主要谈论的东西,另一种是SVG矢量动画,是SVG的高级应用,是给静态SVG加上objectAnimator动画,应用的很广泛,是实现androidicon动态交互的核心做法。

上面的SVG图大家都看到了,我们就是写一个xml的文件,里面承载的标签都是描述如何绘制我们想要的图案的,画布大小,颜色,路径等,然后交给系统去绘制。

现在让我们来看看SVG在andorid中如何应用,如何兼容5.0以下版本。

SVG虽然早早就在前端使用了,但是android上开始支持SVG的使用还是从5.0开始的,在5.0以上系统的使用很简单,和之前一样使用PNG图片一样

首先android中的SVG图片的承载方式是一个xml文件,所以UI给我们的SVG图片是不能直接使用的,这里google给我们提供加载方式

Androidstudio在2.3.3的版本中可以直接使用svg,新建一个SVGDemo项目,新建VectorAsset文件:app->main->New->VectorAsset如图所示:

我们选择LocalFile就是选择本地svg文件进行导入,对文件命名后点击Next->Finish在drawable目录下就添加了一个.xml的文件

好了这样一个svg图片我们算是加入到我们的工程里里了,可以直接使用了。当然在此之前我们把SVG图片放在那个drawable文件夹呢。对于这个问题就要说一下了:

有一点需要解释一下,svg矢量图文件我们放在drawable根目录即可。android系统不会根据你把svg矢量图存放在不同的drawable文件夹,对图片进行分辨率上的缩放,因此我们不用像使用PNG图片时准备多套图片了。我们导入SVG图片默认存放的地址就是drawable根目录,所以我们就放这里就好了,当然也可以自己写SVG图片,都是xml的,自己写完path路径后都是可以查看预览的,一般也不会自己写,都是UI的活。

这样就ok啦,5.0以上的系统SVG你就像一般png图片一样使用就好啦,你可以试一下。

SVG在4.x版本上的兼容根据SVG使用范围的变化,配置也是逐步增加的

这时imageview就不行了,我们需要使用AppCompatActivity或是AppCompatImageView,这时我们需要导入V7包

gradle需要如下配置:

系统会在4.x版本时对SVG自动生成相应的drawable图,此时SVG是没有无限拉伸特性的,gradle的配置目的是去这个

举个例子:

资源设置不能用src了,必须使用srcCompat,这时我们能看到图而不是去SVG的特性了

这时上面的设置就不够了,我们在view所在的activity或是全局添加下面的设置

然后这还不够,我们必须给SVG图片添加一个容器,比如selector,这样我们才能正常使用,比如给textview设置图片,自定义属性设置图片

这个vc_halfstart_24dp就是SVG图片

这个我们必须要添加官方的vectorDrawable支持库了,最低支持到23.2.0

这样基本就没啥问题了

SVG配合自定义view的话,就得我们读取SVG然后转换成path路径来画了,SVG实质上也是xml文件,所以解析xml文件的思路也使用,当然还有其他一些SVG转path的思路

SVG前戏—让你的View多姿多彩一文中提供了一些思路,大家不妨去看看