SVG rendering using shapes: Position is incorrect when image is scaled up/down

Help
#1

A quick test program illustrates the issue: I’ve created two 200x200 .SVG images that I’m rendering using shapes. I’ve rendered one in it’s native 200x200 dimensions, and it’s XY position is correct as defined in the render. I then try placing another square in the same position, but render it at 100x100. This leads to it being in the wrong XY location.

SVGError.png816×518 27.2 KB

Playing around with the example, it looks like the X and Y position that are input are also scaled according to the size of the original image. Is this a problem caused by my implementation, or a bug in the SVG rendering process?

Code: (Build to windows)

package;

import openfl.display.Sprite;
import openfl.Lib;
import openfl.Assets;
import openfl.display.Shape;
import format.SVG;
import openfl.utils.Object;

class Main extends Sprite 
{
	public function new() 
	{
	super();

    var stim1 : SVG = new SVG(Assets.getText("img/test1.svg"));
    var shape1 : Shape  = new Shape();
    stim1.render(shape1.graphics,stage.stageWidth/2,stage.stageHeight/2,200,200);
    addChild(shape1);
	
    var stim2 : SVG = new SVG(Assets.getText("img/test2.svg"));
    var shape2 : Shape  = new Shape();
    stim2.render(shape2.graphics,stage.stageWidth/2,stage.stageHeight/2,100,100);
    addChild(shape2);
	
	}
}
#2

Did you check the SVG image? Sometimes there are transparencies included in image that is beyond what you see.

#3

Thanks for the suggestion, but this seems to happen with every image I try.

#4

For future users, there’s a simple workaround here - determine a scale factor (original size of image in pixels / scaled size of image in pixels), then multiply the XY positions by this when placing your object.

e.g. When scaling a 200x200 image down to 100x100…

var scaleFactor = 200 / 100;
stim2.render(shape2.graphics, stageWidth/2*scaleFactor, stageHeight/2*scaleFactor, 100,100)

As this is a workaround, I won’t set the status of this thread to solved unless somebody presents a better solution.

#5

https://github.com/openfl/svg/blob/master/src/format/SVG.hx#L28-L34

Perhaps the order of translate and scale need to be switched in format.SVG?

#6

I think yhea, it could help, however, regardless of the order both should yield the same, unless of course the some internal mechanism assigns the center of the SVG as the reference.

Maybe, the reference could set to be on the upper left corner regardless of the image type?

I use PNG and it is on the upper-left corner always.

#7

I just committed the above change to the SVG repository, I think this will help :slight_smile: