pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

hf-4
The following SVG code produces slightly different visual output on
FireFox 1.5 (with native SVG support) and Internet Explorer 6.0 (with
Adobe SVG viewer plug in), both running on WindowsXP.
The resulting output should show a full red circle, enclose in a red
stroked square, both aligned flush with the topleft border of the
browser window.

However, in FireFox 1.5 the left border of the square is not shown, and
the left side of the circle does not touch the left side of the square,
as is the case for Internet Explorer 6.0.

Can somebody give me an explanation of this pixel incompatibility and
tell me how to make it disappear (I need perfect pixel compatibility
between image previews, shown on different browsers).

Thanks in advance.

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

hf-4
Sorry, I forgot to include the SVG code. Here it is :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
       <svg width="1005px" height="852px"
                        zoomAndPan="disable"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink">
        <g transform="translate(0,0)" shape-rendering="crispEdges">
           <rect id="square" x="0" y="0" width="98" height="98"
style="fill:white;stroke-width:1;stroke-opacity:1;stroke:red"
shape-rendering="crispEdges"/>
           <circle id="circ" cx="50" cy="50" r="49"
style="stroke-width:1;stroke-opacity:1;fill:red"/>
        </g>
       
       </svg>

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

brindahl
In reply to this post by hf-4
First to make sure the circle touches the square the center should be
cx="49" cy="49".  You have it at 50,50 so here Firefox is better than
IE/ASV.
Second issue is deeper.  What do you want to see?  You have a rect with with
a stroke-width of one pixel and the upper left hand corner at 0,0.  Do you
stroke one pixel INSIDE the rect or OUTSIDE??
(you can't show half a pixel!)  If outside the left line is at x=-1 and it
should not appear (Firefox).  Same issue for the top boundary.  The two
programs have to guess what you are trying to do and guess differently.
Set the stroke-width to 2 and both will render the same (or very close).

Bruce Rindahl

"hf" <[hidden email]> wrote in message
news:[hidden email]...

> The following SVG code produces slightly different visual output on
> FireFox 1.5 (with native SVG support) and Internet Explorer 6.0 (with
> Adobe SVG viewer plug in), both running on WindowsXP.
> The resulting output should show a full red circle, enclose in a red
> stroked square, both aligned flush with the topleft border of the
> browser window.
>
> However, in FireFox 1.5 the left border of the square is not shown, and
> the left side of the circle does not touch the left side of the square,
> as is the case for Internet Explorer 6.0.
>
> Can somebody give me an explanation of this pixel incompatibility and
> tell me how to make it disappear (I need perfect pixel compatibility
> between image previews, shown on different browsers).
>
> Thanks in advance.
>


_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

Jonathan Watt-2
Hi guys,

Bruce Rindahl wrote:
> First to make sure the circle touches the square the center should be
> cx="49" cy="49".  You have it at 50,50 so here Firefox is better than
> IE/ASV.
> Second issue is deeper.  What do you want to see?  You have a rect with with
> a stroke-width of one pixel and the upper left hand corner at 0,0.  Do you
> stroke one pixel INSIDE the rect or OUTSIDE??

Well according to the spec it would be half a pixel either side. With
antialiasing on you should be able to get something that looks about right, but
with it turned off, which side do you go to? Should half a pixel mean you paint
the whole pixel (resulting in a 2 physical pixel stroke). Or should it mean you
don't paint the pixel (resulting in no visible stroke)? Or should you choose a
side, and if so, which one? The spec leaves this open to the implementation, and
we do whatever cairo does.

> (you can't show half a pixel!)  If outside the left line is at x=-1 and it
> should not appear (Firefox).  Same issue for the top boundary.  The two
> programs have to guess what you are trying to do and guess differently.
> Set the stroke-width to 2 and both will render the same (or very close).

Or alternatively move the vertices over by half a pixel so the stroke falls
squarely across the physical pixels.

> Bruce Rindahl
>
> "hf" <[hidden email]> wrote in message
> news:[hidden email]...
>> The following SVG code produces slightly different visual output on
>> FireFox 1.5 (with native SVG support) and Internet Explorer 6.0 (with
>> Adobe SVG viewer plug in), both running on WindowsXP.
>> The resulting output should show a full red circle, enclose in a red
>> stroked square, both aligned flush with the topleft border of the
>> browser window.
>>
>> However, in FireFox 1.5 the left border of the square is not shown, and
>> the left side of the circle does not touch the left side of the square,
>> as is the case for Internet Explorer 6.0.
>>
>> Can somebody give me an explanation of this pixel incompatibility and
>> tell me how to make it disappear (I need perfect pixel compatibility
>> between image previews, shown on different browsers).
>>
>> Thanks in advance.
>>
>
>
_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

Jonathan Watt-2
In reply to this post by hf-4
hf wrote:
>   <rect id="square" x="0" y="0" width="98" height="98"
> style="fill:white;stroke-width:1;stroke-opacity:1;stroke:red"
> shape-rendering="crispEdges"/>
>   <circle id="circ" cx="50" cy="50" r="49"
> style="stroke-width:1;stroke-opacity:1;fill:red"/>

Oh, and I should point out the following link since stroke-width takes a length
value, not a number.

   http://jwatt.org/svg/authoring/#css-and-units

-Jonathan
_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: pixel compatibility between Adobe SVG plugin and FireFox1.5 native SVG

hf-4
In reply to this post by Jonathan Watt-2

Thanks for solving my problem.
For an uneven stroke width the vertices of a stroked square should be
positioned in the middle of the physical pixels
in order to avoid that the implementations have to guess which pixels
to paint.

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg