androidsvgandroidsvg

How to use method setDocumentViewBox() in AndroidSVG

I use the androidsvg-1.2.1.jar for rendering svg image. The original size of the image is 260 pixels in width and 100 pixels in height. I tried to set the width of the image in proportion to the width of the display as follows:

                Display display = getWindowManager().getDefaultDisplay();
                Point size = new Point();
                display.getSize(size);
                int width = size.x;
                int height = size.y;
                height = (int) (width / 2.6);
                svg.setDocumentHeight(height);
                svg.setDocumentWidth(width);
                svg.setDocumentViewBox(0, 0, width, height);

The docs says that methods getDocumentHeight, setDocumentWidth and method setDocumentViewBox accept input values in pixels. But in this case viewbox had estimated size, but the picture itself was located in the left top corner of the viewbox and its size was much smaller than the size of the viewbox (less than about four times).

enter image description here

When I changed the last row of the code as

svg.setDocumentViewBox(0, 0, width/4, height/4);

the size of the picture has become almost equal to the size viewbox, but still remained a little smaller. Why is this happening? And what values should be applied to the input of the setDocumentViewBox method?

Solution

  • The viewBox is meant to describe the limits of the contents of the SVG. In other words, the bounding box around the graphical elements in the file. That's how the renderer knows how much it needs to scale the SVG to fill the area of the SVG viewport. The viewport is the rectangle you specify with width and height (setDocumentWidth() and setDocumentHeight()).

    To get a perfect fit, you need to set the viewBox to the exact dimensions of your contents. You haven't provided or linked your SVG, so I can't tell you exactly what that is in your case.

    But for example, say your SVG was a rectangle that was at 0,0 and was 100 wide and 20 high. You would need to do setDocumentViewBox(0,0,100,20). If your SVG was a circle of radius 50 at 80,60, you would do setDocumentViewBox(30,10,100,100).

    In your case, it looks as if the light gray rectangle at the back defines the limits of your content, so you would probably be using the dimensions of that for your view box.

    You say the original size of your SVG is 260x100. If that corresponds to the size of that grey rectangle, then you would set the viewBox with setDocumentViewBox(0,0,260,100).