SVG Misunderstanding?

[Travis Griggs-3]

I apologize for this being possibly off topic. I'm trying to use Cairo  
to draw an SVG file (the one attached for example). And something's  
not going right. I must be missing something obvious.

When rendered as an icon from Inkscape, I end up with a 16x16 icon,  
with 9 little orange gradient squares. They're nicely pixel aligned to  
keep it crisp. If I understand the SVG correctly, I should be able to  
do the following cairo stuff in pseudo code:

// These values derived from the height/width and the viewBox of the  
root svg node
scale( cr , 16 / 64.424 , 16 / 51.278 );
// apply the transform found at the g4466 node
matrix.xx = 0.6031636;
matrix.yx = 0;
matrix.xy = 0;
matrix.yy = 0.6190702;
matrix.x0 = 7.87836;
matrix.y0 = 5.1860675;
set_matrix( cr , &matrix );
// rect3654
rectangle(cr,
        -5.9716139,
        -15.317435,
        -5.9716139 + 28.360464,
        -15.317435 + 27.631762);
//set a source and fill after this

Unfortunately, this doesn't end up right. If I work the numbers by  
pencil myself, at least for the origin of the rectangle, I get:

(-5.9716139 * 0.6031636 + 7.87836) * (16 / 64.424) --> 1.06209
(-15.317435 * 0.6190702 + 5.1860675) * (16 / 51.278) --> -1.34061

I could almost believe that the 1.06 was just rounding error (rather  
severe actually), but the y value shouldn't be negative at all, and  
it's not at all near integral.

I don't know what I'm doing wrong. I'm wondering at this point, if  
I've mixed something in the application of viewBox.

Any helps or hints would be hugely appreciated.

--
Travis Griggs
Objologist
One man's blue plane is another man's pink plane.




_______________________________________________
cairo mailing list
cairo@...
http://lists.cairographics.org/mailman/listinfo/cairo

[Arjen Nienhuis]

On Wed, Oct 21, 2009 at 11:27 PM, Travis Griggs <tgriggs@...> wrote:

>
> I apologize for this being possibly off topic. I'm trying to use Cairo to draw an SVG file (the one attached for example). And something's not going right. I must be missing something obvious.
>
> When rendered as an icon from Inkscape, I end up with a 16x16 icon, with 9 little orange gradient squares. They're nicely pixel aligned to keep it crisp. If I understand the SVG correctly, I should be able to do the following cairo stuff in pseudo code:
>
> // These values derived from the height/width and the viewBox of the root svg node
> scale( cr , 16 / 64.424 , 16 / 51.278 );
> // apply the transform found at the g4466 node
> matrix.xx = 0.6031636;
> matrix.yx = 0;
> matrix.xy = 0;
> matrix.yy = 0.6190702;
> matrix.x0 = 7.87836;
> matrix.y0 = 5.1860675;
> set_matrix( cr , &matrix );
> // rect3654
> rectangle(cr,
>        -5.9716139,
>        -15.317435,
>        -5.9716139 + 28.360464,
>        -15.317435 + 27.631762);
> //set a source and fill after this
>
> Unfortunately, this doesn't end up right. If I work the numbers by pencil myself, at least for the origin of the rectangle, I get:
>
> (-5.9716139 * 0.6031636 + 7.87836) * (16 / 64.424) --> 1.06209
> (-15.317435 * 0.6190702 + 5.1860675) * (16 / 51.278) --> -1.34061
>

It should be 68.424 not 64.424.

The viewbox is scaled proportionally and then centered, see:
http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute

scale = 16 / 68.424
viewbox_height = 51.278 * scale = 12

To center vertically:
dy = (16 - viewbox_height) / 2 = 2

x = (-5.9716139 * xx + x0) * scale = 0.999
y = (-15.317435 * yy + y0) * scale + dy = 0.995

But why do you want to write your own svg viewer?

Met vriendelijke groet,
Arjen Nienhuis
_______________________________________________
cairo mailing list
cairo@...
http://lists.cairographics.org/mailman/listinfo/cairo