Svg-graphics & shapes


I recently started a new project and found a big interest in using SVG-graphics due to my lack of… photoshop skills. It’s a lot easier to make basic art in illustrator than photoshop, unless it comes down to pixel-art.

What i’m currently using to process svg images are the following class that i wrote using the svg library:

    class VectorAsset

    public static function image(image: String, w: Float, h: Float) {
        var data:SVG =  new SVG(Assets.getText(image));
        var img = rasterizeSVG(data,,, 0xFFFFF);
        return img;
    private function rasterizeSVG (svg:SVG, width:Int, height:Int, backgroundColor:Int = null):BitmapData {
        var shape = new Shape ();
        svg.render (, 0, 0, width, height);
        var bitmapData = new BitmapData (width, height, true, backgroundColor);
        bitmapData.draw (shape);
        return bitmapData;

This works fine for basic shapes but as soon as i use something like a pen-tool to make zigzags or what ever it doesn’t seem to process well, most likely because it’s drawn as a bitmap.

Does anyone here use svg-art for your game or is it down to photoshop all the way?
I’ve also tried converting the svg images to png images but the loss of quality is immense.

What happens when you use the render method of SVG like this:

var svg = new SVG (Assets.getText (image));
svg.render (graphics);

Hey Cheers for the reply.
Aye, i’ve tried that approach and it works great with shapes such as squares and lines but as soon as i try to make something like a circle it still blures out

Is that being scaled?