Scalable Vector Graphics

I love to create projects where you take stuff from the digital world (temporarily, intangible) and drag it into the “real” world. This project is a good example of that. I create a papertoy generated in code and cut by a machine.

Besides filling my blog with new content, I have two other reasons to write this post:

You can use Haxe/Openfl for something else then game-developement! I know I am not the only one, but this group of developers are not as present as the game-defs.
It’s a long and complicated process to get to the end result: it’s difficult to explain this in detail to others, so I wrote down the whole story for interested friend/family/colleagues/fans???

If I ever grow a pair, this post be one of the two talks I would give during wwx2015 just to balance the all tech talks during the event.
But nothing is growing besides my hair, so instead I will write about the process and end-result.

Feedback is always nice, so please don’t hesitate to comment!

Using svg for assets in Openfl

I wanted to use svg for icons in an Openfl project.
It’s not intuitive to do this, so I wrote it down for future use.

What are svg files?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Source: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Good to remember that they scale awesomely without lost of resolution!

How to add it to your project

You can find the svg code on github.
But you can install it easier with haxelib

Open your terminal and write:

haxelib install svg

To add it to an OpenFL project, add this to your project file:

<haxelib name="svg" />

Code

import openfl.Assets;
import openfl.display.Shape;
import openfl.display.Sprite;
import format.SVG;
 
class SVGExample extends Sprite
{

  public function new()
  {
    var svg : SVG = new SVG(Assets.getText("assets/openfl.svg"));
    var shape : Shape  = new Shape();
    svg.render(shape.graphics);
    addChild(shape);
  }
}

NICE!!!
But now the cool part: it scales without losing resolution

Check the highlighted line for the changes,

import openfl.Assets;
import openfl.display.Shape;
import openfl.display.Sprite;
import format.SVG;
 
class SVGExample extends Sprite
{

  public function new()
  {
    var svg : SVG = new SVG(Assets.getText("assets/openfl.svg"));
    var shape : Shape  = new Shape();
    svg.render(shape.graphics,0,0,1000,1000);
    addChild(shape);
  }
}

for the curious: https://github.com/openfl/svg/blob/master/format/SVG.hx

Sources

I remembered this gist, which explains almost everything.
Get icons here, they are free for download as long as you credit freepik
Featured image from webdesignerdepot