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

Question

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

Answer 1

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

• SVG的大小（以像素为单位width和height）

  实施例：<svg width='640px' height='640px'

• 形状的大小（以viewBox属性为单位）

  实施例：viewBox='0 0 100 100'

• 用于描边形状的颜色

  示例：style='stroke:red;'或style='stroke:none;'

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

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

• 路径的形状

  实施例：d='M10 10L20 20 L30 10Z'

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

示例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>