SVG scale problem while painting

[Frank-99]

Every example I managed to find online (not many out there) for painting an svg with the Batik / EchoSVG library, will suggest something like this

        g.transform(ViewBox.getViewTransform(ref, root, width, height, ctx));
        svgRoot.paint(g);

or this

        g.scale(svgWidth / iconWidth, finalHeight / svgHeight);

Which results in an image that looks as if the vector image got painted with the original dimensions and then got scaled to the final dimensions

I then tried to set the width and height manually to the desired final dimension, hoping it would scale the svg before painting it, like this

	document.getRootElement().setAttribute("width", "" + width);
	document.getRootElement().setAttribute("height", "" + height);

With the svgRoot.paint(g); used before it still comes out wrong, but if for example I draw the outlines like this

g.draw(svgRoot.getRoot().getOutline());

Then the scaling of the stroke is correct and as expected

I can't find anything about this online and I wonder if there's something already built in to repaint the svg in different scales without loosing the stroke width fedelity...

[carlosame]

I converted this to a Q&A discussion, as you appear to be asking for help about viewports and scaling.

I'd suggest reading the following tutorials:

• "SVG Viewport and viewBox (For Complete Beginners)" by K. Bracey
• "SVG Viewport and View Box" by J. Jenkov
• "Understand the SVG Viewbox" by P. Ryan (Oriented to browsers and Javascript)

And of course the MDN reference for the viewBox: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

I may put some of this in the FAQ, because I have observed that a few of the issues in the Batik tracker were filed by people that are not familiar with those concepts.

But in case your question was about something different please let me know.

[Frank-99]

Yes sorry, I'm not too familiar with discussions, but it makes more sense for this to be here...

I get the viewport and viewbox part, but my issue was with the stroke scaling. Let me explain.
So far I've had some experience with SVGs outside of Java and the only times I had to work with scaling them, I imagine the software I was using must have scaled the path and not the SVG itself. Infact, looking at one in chrome now and playing with the values, the line gets bigger with the design when scaling it up... I guess I'll have to proportionally reduce the stroke width attribute with the aumenting of the SVG dimension to achieve the desired result...