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

问题描述

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

My ultimate goal is to export designs created in mobile apps as vector graphics. Say I have a list of points of corners of shapes and the respective color that goes inside each shape and this design is being displayed on a mobile app (iOS and Android because cocos2d-x is being used). Is it possible to convert this information into a vector file (SVG file which is essentially an XML file)?

推荐答案

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

SVG contains a path element that stores the lines that make up a shape's path. The d attribute stores a path string, and the style attribute stores the path's styling, such as stroke and fill. To export a shape to SVG there are several things you should care about:

• SVG的大小(以像素为单位)(width和height属性).

• The size of the SVG in pixels (the width and height attributes).

示例:<svg width='640px' height='640px'

• 形状的大小(以像素为单位)(viewBox属性:左，右，宽度，高度).

• The size of the shape in pixels (the viewBox attribute: left, right, width, height).

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

• 每个路径都是分为命令. M命令移动笔，L命令绘制到新位置，Z命令关闭形状.

• Each path is divided into commands. The M command moves the pen,the L command draws to a new position, and the Z command closes the shape.

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

There can be any number of paths in a single SVG file.

示例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)文件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！