How to resize svg (with batik) and display it?

Question

I have a svg file sized 100x100 pixels (for example). I use batik.

If I do a:

JSVGCanvas svg = new JSVGCanvas(); [...] svg.setSize(10,10); 

It will display only this part of the image, not the resized image.

Do you know how I can display a resized svg image?

Thanks;)

Answer 1

You need to make sure that the displayed document has the viewBox="" attribute set in its root <svg> element. For example, specifying viewBox="100 100 300 200" means that the area (100, 100) → (400 300) will be scaled to the size of the JSVGCanvas . By default, the proportions of this region will be preserved when scaling, so you will get an additional addition on top or bottom if it does not match the format of your JSVGCanvas . To override this behavior, use the attribute preserveAspectRatio="" .

Answer 2

The viewport option allows you to set the portion of the canvas that you want to see / display. If you want to "resize" your svg (svg does not have a real size, because it is a vector image), you can add / change the width and height parameters. in the <svg> header as follows:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" width="1200" height="720" contentStyleType="tex ....</svg> 

If you want to change the viewport, you can add a parameter

 viewBox="0 0 1200.0 720.0" 

in the <svg> header (for HD viewing 1200 to 720).