- From: Fred P. <fprog26@hotmail.com>
- Date: Fri, 25 Apr 2003 21:00:59 -0400
- To: thomas.deweese@kodak.com
- Cc: dean@w3.org, www-svg@w3.org, Jon.Ferraiolo@adobe.com
>FP> Well, it should not allow for 1 pixel mis-behavior, since this
>FP> mean there is a 100% error tolerance for every pixel being drawn.
>
>FP> In other words, for every pixel drawn a misbehaving pixel can also
>FP> be drawn.
>
> In cases where a line falls exactly between two pixles which pixel
>do you render (see below)? Implementations are allowed to choose.
Okay, implementation may chose but a circle is a circle
not a coleco E.T. monster.
[ ][ ] [ ][ ][ ][ ]
[ ][r][r][ ] [ ][r][r][ ]
[ ][r][r][ ] VS [ ][ ][ ][ ]
[ ][ ] [ ][ ]
I never said this was easy and I think Adobe does a great job
in general. I mean they got themself a good reputation with
Illustrator, Photoshop and Acrobat.
It's not like if they were not in the image industry since a year.
I'm programming since decades and I would have a hard time
programming a good SVG renderer myself; however, let's not
get out of focus. Anti-aliased graphics/fonts are good for
"BIG" picture, for instance a 100x100 circle or a 48pt text font;
however, when you are viewing an icon which is 16x16 in 256 color,
you want to have a circle, polygon which are aliased instead of
anti-aliased, else the end result will look like crapt and fuzzy.
Samething for text, if you render text in less than 20pt,
you don't want anti-aliased at all. It simply won't look good at all.
One thing that should be implemented is good aliased graphics
at low resolution pixel level for small vectorial figures.
One of my biggest concern is that a lot of people even in
the Gnome/KDE community where talking about getting vectorial icons,
that can zoom in beautifully. I want to be able to create full-scale
web application using SVG/JavaScript without any HTML.
SVG already proved to me to be very efficient in terms of images space,
even for huge bitmap files encoded with <rect> tag then gzipped.
My second concern was to be able to translate those bitmap into
proper vectorial image; however, due to the fact that the aliased
doesn't work at low resolution, this seems to be an impossible task.
That's why I reported the 'bug', since it is one.
If you take a look at Paint, LView, Jasc or any other bitmap
editing software, you will see that any of them have the same
definition of aliased pixelized graphic.
In other words, a circle of 4 pixel diameter will always look the same,
I don't think it is too much to ask to get this in SVG viewer, is it?
Samething for polygon, for instance I tried to render a 'sheet icon',
similar to Office New document button using Path.
Explain me why I don't have Pixel precision with path,
but an approximation, this is ridiculous.
The following example shows clearly why anti-aliased looks like crapt,
and shows clearly the defects of current aliased implementation
at low resolution compared to a perfect bitmap image.
BTW, both aliased and anti-aliased have a <path> which represent
the same coordinates then the original bitmap, therefore,
it should work perfectly, there is no excuse here.
<!-- Begin -->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg SYSTEM
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg height='500' width='500'
xmlns:xlink='http://www.w3.org/2000/xlink/namespace/'
>
<defs>
<!- Anti-aliased -->
<g id='hand'>
<path style='fill:#FFFFFF; stroke:#000000'
d='M 5 17 L 2 14 L 2 10 L 3 9 L 5 9 L 5 12 L 5 5 L 6 4 L 8 4 L 8 10 L 8 4 L
9 3 L 10 3 L 11 4 L 11 10 L 11 4 L 13 4 L 14 5 L 14 10 L 14 6 L 16 6 L 17 7
L 17 15 L 16 16 L 16 17'
/>
</g>
<!- Without anti-aliased _OR_ aliased -->
<g id='hand2'>
<path style='fill:#FFFFFF; stroke:#000000; shape-rendering: optimizeSpeed;'
d='M 5 17 L 2 14 L 2 10 L 3 9 L 5 9 L 5 12 L 5 5 L 6 4 L 8 4 L 8 10 L 8 4 L
9 3 L 10 3 L 11 4 L 11 10 L 11 4 L 13 4 L 14 5 L 14 10 L 14 6 L 16 6 L 17 7
L 17 15 L 16 16 L 16 17'
/>
</g>
<!- Perfect bitmap -->
<g id='hand3'>
<!-- Width: 25 and Height: 18 -->
<!-- Corner Markers: ( 5, 2 ) to ( 20, 14 ) -->
<rect style='fill:#000000' width=' 1' height=' 5' x=' 0' y=' 7'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 1' y=' 6'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 5' x=' 1' y=' 7'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 1' y='12'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 2' y=' 6'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 6' x=' 2' y=' 7'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 2' y='13'/>
<rect style='fill:#000000' width=' 1' height=' 8' x=' 3' y=' 2'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 4' x=' 3' y='10'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 3' y='14'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 4' y=' 1'/>
<rect style='fill:#FFFFFF' width=' 1' height='13' x=' 4' y=' 2'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 5' y=' 1'/>
<rect style='fill:#FFFFFF' width=' 1' height='13' x=' 5' y=' 2'/>
<rect style='fill:#000000' width=' 1' height=' 7' x=' 6' y=' 1'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 7' x=' 6' y=' 8'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 7' y=' 0'/>
<rect style='fill:#FFFFFF' width=' 1' height='14' x=' 7' y=' 1'/>
<rect style='fill:#000000' width=' 1' height=' 1' x=' 8' y=' 0'/>
<rect style='fill:#FFFFFF' width=' 1' height='14' x=' 8' y=' 1'/>
<rect style='fill:#000000' width=' 1' height=' 7' x=' 9' y=' 1'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 7' x=' 9' y=' 8'/>
<rect style='fill:#000000' width=' 1' height=' 1' x='10' y=' 1'/>
<rect style='fill:#FFFFFF' width=' 1' height='13' x='10' y=' 2'/>
<rect style='fill:#000000' width=' 1' height=' 1' x='11' y=' 1'/>
<rect style='fill:#FFFFFF' width=' 1' height='13' x='11' y=' 2'/>
<rect style='fill:#000000' width=' 1' height=' 6' x='12' y=' 2'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 7' x='12' y=' 8'/>
<rect style='fill:#000000' width=' 1' height=' 1' x='13' y=' 3'/>
<rect style='fill:#FFFFFF' width=' 1' height='11' x='13' y=' 4'/>
<rect style='fill:#000000' width=' 1' height=' 1' x='14' y=' 3'/>
<rect style='fill:#FFFFFF' width=' 1' height=' 9' x='14' y=' 4'/>
<rect style='fill:#000000' width=' 1' height=' 2' x='14' y='13'/>
<rect style='fill:#000000' width=' 1' height=' 9' x='15' y=' 4'/>
</g>
</defs>
<use xlink:href='#hand3' x=' 95' y='102'/>
<use xlink:href='#hand' x='120' y='100'/>
<use xlink:href='#hand2' x='150' y='100'/>
<use xlink:href='#hand3' x='180' y='102'/>
<text style='font:arial; font-size:8pt; text-rendering:normal;'
x='100' y='90'>Hand bitmap with</text>
<text style='font:arial; font-size:8pt; text-rendering:optimizeSpeed;'
x='80' y='140'>rect, anti-aliased, aliased, rect</text>
</svg>
<!--
Original bitmap: [b] = black pixels
[b][b]
[b][b][b] [b][b][b]
[b] [b] [b] [b]
[b] [b] [b] [b][b][b]
[b] [b] [b] [b] [b]
[b] [b] [b] [b] [b]
[b][b][b] [b] [b] [b] [b]
[b] [b] [b] [b] [b] [b]
[b] [b] [b]
[b] [b] [b]
[b] [b]
[b] [b]
[b] [b]
[b] [b]
[b] [b]
Aliased Bitmap Draw: [*] = Misbehavior pixels
[*][b][b][*]
[*][b][b][b] [b][b][b][*]
[b] [b] [b] [b]
[b] [b] [b] [b][b][b][*]
[b] [b] [b] [b] [b]
[b] [b] [b] [b] [b]
[*][b][b][b] [b] [b] [b] [b]
[b] [b] [b] [b] [b] [b]
[b] [b] [b]
[b] [b] [b]
[b] [b]
[b][*] [b]
[b] [*][b]
[b] [b]
[b] [b]
-->
<!-- EOF -->
This one looks like crapt, even though it's closer than other ones.
I have some bitmap icons, which render SOooo bad with path,
it's incredible, as you can see the rendering quality with '<rect>'
is so 'perfect' compared to '<path>' or '<circle>',
however, it doesn't zoom like vectorial,
since it's not vectorial at all.
This is what this message thread is all about,
getting 'very high quality' at low-resolution,
in Adobe SVG viewer or any good competitor browser plug-in.
>FP> When you draw a circle or polygon in Paint or similar, does it
>FP> have a 100% pixel error? No, not at all. Instead it draw a circle
>FP> perfectly as it should.
>
> If I go to different drawing/painting programs I certainly can get
>very different results. I tend to agree the results you got from
>Adobe aren't very good but basically SVG engines are optimized for
>anti-aliased graphics. Also you need to be _very_ careful how you
>specify the circle your example:
>
><circle style="stroke-width:1; stroke:#000000;
> fill:#FF0000; shape-rendering: optimizeSpeed;"
> cx="50" cy="50" r="2"/>
>
> For Adobe this is a circle who's center is at the juncture of four
>pixels and who's stroke lies exactly on the boundry between two pixels
>(at horizontal and vertial extents). You have described a circle that
>is essentially impossible to render correctly without anti-aliasing.
>
> However if you shift the center of the circle to lie in the middle
>of a device pixel:
>
><circle style="stroke-width:1; stroke:#000000;
> fill:#FF0000; shape-rendering: optimizeSpeed;"
> cx="50.5" cy="50.5" r="2"/>
Wrong, this is a 5x5 pixel circle not a 4x4 pixel circle!!!
This is why it renders better!
My little icon which is 16x16 needs a 4x4 not a 5x5.
It might sound stupid or irrelevant but it makes a big difference,
trust me on that! i.e. 25% increase in size.
>
> You will find you get a much more reasonable rendering. Adobe
>still seems to have a drop out on the top of the circle, but if you
>turn off optimizeSpeed this goes away and you get very little
>anti-aliasing as most pixels fall nicly on one pixel as opposed to
>split across pixels.
>
>FP> My problem is that I need aliased pixel bitmap polygon/circle to
>FP> be drawn, in order to render icon without the anti-aliased, so it
>FP> doesn't look like crapt.
>
> Then you should describe graphics that don't _REQUIRE_
>anti-aliasing to make sense (i.e. 1 pixel borders exactly on a pixel
>boundry).
I think you wanted to say that I should not require pixel bitmap
in aliased mode.
But as you can see in this "hand icon" example, SVG can be used
for such task and SHOULD be used for such task.
Saying SVG was not made for that is pure FUD and non-sense.
>FP> Now I'm being forced to draw tons of rectangles instead of proper
>FP> polygon/circle, to ensure that the SVG icons doesn't look like
>FP> crapt at normal size (100% zoom level); however, this means that
>FP> if someone zoom in, lets say at 400% zoom level, that person will
>FP> see the pixel sickness effects due to rectangle being drawn,
>FP> instead of a nice polygon or circle being zoomed in.
See the <rect> hand above for further understanding of my arguing here!
>
>FP> What's the point of having scalable vector graphics, if we cannot
>FP> write vector graphics that doesn't look like crapt at normal size
>FP> and rely of bitmap faking instead???
>
> I think you need to learn a bit more about vector graphics before
>casting aspertions. This is not simple stuff even though it often
>looks like it is on the surface.
I never said it was simple, but it is feasible.
Adobe and similar company are no beginner in this field,
and I don't think they would appreciate having a crappy
implementation that people would laugh about for aliased graphics
for professional purposes.
>Please have some respect!
I love their product, but this is disappointing in the aliased area.
Sincerely yours,
Fred.
_________________________________________________________________
Add photos to your messages with MSN 8. Get 2 months FREE*.
http://join.msn.com/?page=features/featuredemail
Received on Friday, 25 April 2003 21:01:08 UTC