anti aliasing on images

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view

anti aliasing on images

When I embed an image in SVG, this image is rendered differently on
FireFox 1.5 (native SVG support) when compared to Internet Explorer
(Adobe SVG Viewer plugin).
The following code produces a 16 pixel by 16 pixel image (scaled with a
factor 10 to see the pixels more clearly), surrounded with a red
stroked square (stroke width = 1pixel, also scaled with a factor of
On Internet Explorer the outer image edges are crisp and are flush with
the inner boundary of the surrounding square (desired behaviour).
On FireFox 1.5 the outer image edges are aliased and not flush with the
inner boundary of the surrounding square . The image is even not
centered very well inside the square.

Can somebody please give me a hint how to improve my code in order to
make this different image rendering disappear ?

Code : (the code needs an image file "test16x16.gif", which must be
present for testing. It must be a 16px by 16px image, preferably with a
non red coloured content at the edges.)

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200"
                version="1.1" baseProfile="full">
        <g transform="translate(10,10)">
        <g transform="scale(10,10) translate(0,0)">
        <image x="1" y="1" width="16px" height="16px"

        <rect id="box" x="0.5" y="0.5" width="17" height="17" fill="none"
stroke-width="1" stroke="red" shape-rendering="crispEdges"/>



Mozilla-svg mailing list
[hidden email]