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

Question

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)?

Answer 1

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 attributes stores the path's styling, such as stroke and fill. To export a shape to SVG there are several things you should care about:

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

  Example:<svg width='640px' height='640px'

• The size of the shape in pixels (the viewBox attributes)

  Example:viewBox='0 0 100 100'

• The color used to stroke the shape

  Example:style='stroke:red;' or style='stroke:none;'

• The color used to fill each shape

  Example:style='fill:blue;' or style='fill:none;'

• The shape of the path

  Example:d='M10 10L20 20 L30 10Z'

  • 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.

Example SVG file:

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