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

Question

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

Answer 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/svg) 文件？

Exporting designs in apps as vector (XML/svg) file?

svg

vector

shapes