{"id":2140,"date":"2015-04-09T15:12:01","date_gmt":"2015-04-09T14:12:01","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=2140"},"modified":"2015-04-09T15:16:32","modified_gmt":"2015-04-09T14:16:32","slug":"using-svg-for-assets-in-openfl","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2015\/04\/09\/using-svg-for-assets-in-openfl\/","title":{"rendered":"Using svg for assets in Openfl"},"content":{"rendered":"

I wanted to use svg for icons in an Openfl<\/strong> project.
\nIt’s not intuitive to do this, so I wrote it down for future use.<\/p>\n

What are svg files?<\/h2>\n

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. <\/p><\/blockquote>\n

Source:<\/em> http:\/\/en.wikipedia.org\/wiki\/Scalable_Vector_Graphics<\/a><\/p>\n

Good to remember that they scale awesomely without lost of resolution!<\/p>\n

How to add it to your project<\/h2>\n

You can find the svg code on github<\/a>.
\nBut you can install it easier with haxelib<\/strong><\/p>\n

Open your terminal and write:<\/p>\n

haxelib install svg<\/pre>\n
To add it to an OpenFL<\/strong> project, add this to your project file:<\/p>\n
\r\n<haxelib name="svg" \/>\r\n<\/pre>\n
Code<\/h2>\n
\r\nimport openfl.Assets;\r\nimport openfl.display.Shape;\r\nimport openfl.display.Sprite;\r\nimport format.SVG;\r\n \r\nclass SVGExample extends Sprite\r\n{\r\n\r\n  public function new()\r\n  {\r\n    var svg : SVG = new SVG(Assets.getText("assets\/openfl.svg"));\r\n    var shape : Shape  = new Shape();\r\n    svg.render(shape.graphics);\r\n    addChild(shape);\r\n  }\r\n}\r\n<\/pre>\n
NICE!!!
\nBut now the cool part: it scales without losing resolution<\/p>\n
Check the highlighted line for the changes,<\/p>\n
\r\nimport openfl.Assets;\r\nimport openfl.display.Shape;\r\nimport openfl.display.Sprite;\r\nimport format.SVG;\r\n \r\nclass SVGExample extends Sprite\r\n{\r\n\r\n  public function new()\r\n  {\r\n    var svg : SVG = new SVG(Assets.getText("assets\/openfl.svg"));\r\n    var shape : Shape  = new Shape();\r\n    svg.render(shape.graphics,0,0,1000,1000);\r\n    addChild(shape);\r\n  }\r\n}\r\n<\/pre>\n
for the curious: https:\/\/github.com\/openfl\/svg\/blob\/master\/format\/SVG.hx<\/a><\/p>\n
Sources<\/h2>\n