将应用程序中的设计导出为矢量 (XML/svg) 文件？答案

【问题标题】：Exporting designs in apps as vector (XML/svg) file?将应用程序中的设计导出为矢量 (XML/svg) 文件？
【发布时间】：2016-03-19 03:45:21
【问题描述】：

我的最终目标是将移动应用中创建的设计导出为矢量图形。假设我有一个形状角点的列表以及每个形状内部的相应颜色，并且该设计正在显示在移动应用程序上（iOS 和 Android，因为正在使用 cocos2d-x）。是否可以将此信息转换为矢量文件（SVG 文件本质上是 XML 文件）？

【问题讨论】：

标签： svg vector shapes

【解决方案1】：

SVG 包含一个path 元素，用于存储构成形状路径的线条。 d 属性存储路径字符串，style 属性存储路径的样式，例如描边和填充。要将形状导出为 SVG，您需要注意以下几点：

SVG 的大小（以像素为单位）（width 和 height 属性）。

例如：<svg width='640px' height='640px'

以像素为单位的形状大小（viewBox 属性：左、右、宽、高）。

例如：viewBox='0 0 100 100'

用于描边形状和描边宽度的颜色。

例如：style='stroke:red;stroke-width:1px' 或 style='stroke:none;'

用于填充每个形状的颜色。

例如：style='fill:blue;' 或 style='fill:none;'

路径的形状。

例如：d='M10 10L20 20 L30 10Z'

每个路径都是divided into commands。 M 命令移动笔， L 命令绘制到新位置，Z 命令关闭形状。

单个 SVG 文件中可以有任意数量的路径。

示例 SVG 文件：

<svg width='640px' height='640px' viewBox='0 0 100 100' 
  xmlns='http://www.w3.org/2000/svg'>
     <path style='stroke:red;fill:none'  d='M10 10L20 20 L30 10Z'/>
</svg>

【讨论】：

好吧，它开始变得有意义了。因此，如果我有一组具有不同颜色的形状，从渲染最远的形状开始，我可以将每个形状的坐标写入使用上述结构生成的 xml 文件中，同时用适当的颜色交替填充属性？
正确。您可以为每个形状使用不同的 path 元素，并相应地调整每个 path 的笔触和填充。