Problems with SVG.renderToPicture and draw into a SurfaceView

[GoogleCodeExporter]

What steps will reproduce the problem?

The following method draws a circle filled with blue surrounded by a white 
line: 
    public void drawBlue(Canvas c) {
        Paint p = new Paint();
        p.setColor(Color.BLUE);
        RectF rect = new RectF(0, 0, 200, 200);
        Picture pic = new Picture();
        Canvas canvas = pic.beginRecording(200, 200);
        canvas.drawOval(rect, p);
        pic.endRecording();
        RectF dest = new RectF(200, 200, 400, 400);
        c.save();
        c.translate(200, 200);
        c.drawPicture(pic, rect);
        c.restore();
        p.setColor(Color.WHITE);
        p.setStrokeWidth(2);
        p.setStyle(Paint.Style.STROKE);
        c.drawOval(dest, p);
    }

Now I've replace the Picture in the above code with a picture generated from 
SVG: 

    public void drawSphere(Canvas c) {
        Paint p = new Paint();
        p.setColor(Color.BLUE);
        RectF rect = new RectF(0, 0, 200, 200);
        Picture pic = new Picture(ball.renderToPicture(200, 200));
        assert(pic.getWidth() == 200 && pic.getHeight() == 200);
        RectF dest = new RectF(400, 400, 600, 600);
        c.save();
        c.translate(400, 400);
        c.drawPicture(pic, rect);
        c.restore();
        p.setColor(Color.WHITE);
        p.setStrokeWidth(2);
        p.setStyle(Paint.Style.STROKE);
        c.drawOval(dest, p);
    }

where ball = SVG.getFromResource(ctx, R.raw.sphere);

What is the expected output? What do you see instead?

I'd expect to see two white circles, one filled with blue, the other filled a 
pictures corresponding the svg file in R.raw.sphere.

But instead I'm getting a view as in the attached screenshot. 

What version of the product are you using? On what operating system?

androidsvg-1.2.1.jar, android 4.4.2

Please provide any additional information below.

Original issue reported on code.google.com by waack.ma...@gmail.com on 10 Mar 2014 at 8:14

Attachments:

• device-2014-03-10-090335.png

[GoogleCodeExporter]

Hi.  Thanks for the report.

Can you attach the SVG please?  I can't tell, without looking at the SVG 
itself, whether it is being rendered correctly or not.

Original comment by paul.leb...@gmail.com on 10 Mar 2014 at 9:30

[GoogleCodeExporter]

I've attached the svg, the source is 
http://upload.wikimedia.org/wikipedia/commons/7/7e/Sphere_-_monochrome_simple.sv
g

Original comment by waack.ma...@gmail.com on 10 Mar 2014 at 9:51

[GoogleCodeExporter]

Hi.  This doesn't look like a bug to me.  The library seems to be doing the 
right thing.  I'll explain.

The SVG defines a 500x500 diagram.  The sphere is 400x410 (slightly squashed 
horizontally) and almost - but not quite - centred in the diagram.

Because the SVG has no viewBox attribute, no scaling will happen.  The sphere 
will be drawn at full size.  So with your picture being only 200x200, you will 
only get the top left portion of it.  As you are seeing.

To achieve the effect you want, the simplest solution is to add a viewBox to 
the SVG.  In the case of this file, the sphere occupies the area of the diagram 
from (50,50) to (450,460).  So your viewBox should be "50 50 400 410" (that's 
x,y,width,height).

I will attach a modified SVG file with this change.  Try it.  I believe this 
file should display as you originally intended.  Let me know if it doesn't.

Marking bug report as Invalid (not a bug).

Original comment by paul.leb...@gmail.com on 10 Mar 2014 at 10:24

• Changed state: Invalid

[GoogleCodeExporter]

Slight correction. I forgot to say you also have to set the width and height 
attributes to "100%".

In addition, if you want the slight suqash to be corrected for, you will have 
to add the following to the file:

  preserveAspectRatio="none"

Updated file attached.

Original comment by paul.leb...@gmail.com on 10 Mar 2014 at 10:32

Attachments:

• sphere_modified.svg

[GoogleCodeExporter]

Thanks for the file and the explanation, it displays as intended. Do not know 
much about svg, thought I can just use it, looks like I have to learn more 
about it...

Original comment by waack.ma...@gmail.com on 10 Mar 2014 at 10:52

[GoogleCodeExporter]

I'm glad it worked.  Thanks for letting me know.  Good luck with your project!

Original comment by paul.leb...@gmail.com on 10 Mar 2014 at 10:57