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

Question

I have a svg file of 100x100 pixels (for example). I am using Batik.

If I do a :

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

It will only show this part of the picture and not the resized image.

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

Thanks ;)

Answer 1

The view box parameter allows you to set the part of the canvas you want to see/display. If you want to "resize" your svg (an svg has no real size, because it is a vector image), you can add/change the parameters width and height present in the <svg> header like this :

<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 view box, you can add the parameter

viewBox="0 0 1200.0 720.0" 

in the <svg> header (for a HD view of 1200 by 720).

Answer 2

You need to ensure that the document you are displaying has a viewBox="" attribute set on its root <svg> element. For example, specifying viewBox="100 100 300 200" indicates that the region (100,100)→(400,300) will be scaled to the size of the JSVGCanvas. By default, the aspect ratio of this region will be preserved when scaling, so you will get some extra padding on the top or bottom if it doesn't match the aspect ratio of your JSVGCanvas. To override that behaviour, use the preserveAspectRatio="" attribute.