- From: Fred P. <fprog26@hotmail.com>
- Date: Mon, 28 Apr 2003 20:47:12 -0400
- To: thomas.deweese@kodak.com
- Cc: www-svg@w3.org
Hi M. I know everything,
>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.
>
>FP> Okay, implementation may chose but a circle is a circle not a
>FP> coleco E.T. monster.
>
I always drawn and specified a 4 pixels diameter
circle with r='2' or 2*r = diameter = 4 pixels,
since the beginning:
http://lists.w3.org/Archives/Public/www-svg/2003Apr/0041.html
YOU specified a modified version with 5 pixels, but that doesn't matter.
>FP> I never said this was easy and I think Adobe does a great job in
>FP> general. I mean they got themself a good reputation with
>FP> Illustrator, Photoshop and Acrobat. It's not like if they were
>FP> not in the image industry since a year.
>
>FP> I'm programming since decades and I would have a hard time
>FP> programming a good SVG renderer myself; however, let's not get out
>FP> of focus. Anti-aliased graphics/fonts are good for "BIG" picture,
>FP> for instance a 100x100 circle or a 48pt text font; however, when
>FP> you are viewing an icon which is 16x16 in 256 color, you want to
>FP> have a circle, polygon which are aliased instead of anti-aliased,
>FP> else the end result will look like crapt and fuzzy.
>
>FP> Samething for text, if you render text in less than 20pt, you
>FP> don't want anti-aliased at all. It simply won't look good at all.
>
>FP> One thing that should be implemented is good aliased graphics at
>FP> low resolution pixel level for small vectorial figures.
>
>FP> One of my biggest concern is that a lot of people even in the
>FP> Gnome/KDE community where talking about getting vectorial icons,
>FP> that can zoom in beautifully. I want to be able to create
>FP> full-scale web application using SVG/JavaScript without any HTML.
>
>FP> SVG already proved to me to be very efficient in terms of images
>FP> space, even for huge bitmap files encoded with <rect> tag then
>FP> gzipped. My second concern was to be able to translate those
>FP> bitmap into proper vectorial image; however, due to the fact that
>FP> the aliased doesn't work at low resolution, this seems to be an
>FP> impossible task. That's why I reported the 'bug', since it is
>FP> one. If you take a look at Paint, LView, Jasc or any other bitmap
>FP> editing software, you will see that any of them have the same
>FP> definition of aliased pixelized graphic.
>
>FP> In other words, a circle of 4 pixel diameter will always look the
>FP> same, I don't think it is too much to ask to get this in SVG
>FP> viewer, is it?
>
> I strongly doubt SVG will ever guarantee pixel and code value
>precision, if this happens then there will essentially be only one SVG
>viewer - which would be a pitty.
Yes, it does. You know why? because you draw PERFECT RECTANGLE
covering every pixel PERFECTLY.
You didn't take a look at my hand example did you?
Since copy-paste seems to be difficult,
it seems Adobe doesn't display properly
with <!--- comment tag --> anywhere in the file.
I'll make your life easier, just click here:
http://j2k.sourceforge.net/svg/hand.svg
Tadam! You see the RECT hand is PERFECT.
You can look at other PERFECT example here and here:
http://j2k.sourceforge.net/svg/btn_all4.svgz
http://j2k.sourceforge.net/svg/umled10.htm
See the icons are nice and perfect at PIXEL level.
That's what I'm aiming at.
> I don't have time to correct all your graphics for you. Please
>take care to only significantly cover pixels that you want filled
>remember that SVG uses a floating point coordinate system and I think
>your examples will rendering much more to your liking - in particular
>for 1 pixel wide strokes make sure your end points are in the center
>of pixels not at the edges.
Perfect != to 1 pixel drawn wrong. BTW:
make it fit on one-line:
<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'
/>
is a perfect line in theory, it covers all pixel precisely to their
middle point BUT because of the triangles for diagonal lines,
the Adobe SVG renderer will make them pixels and corrupt the picture,
there is no reason here to make have a misbehaving pixel,
its a damn diagonal line.
In other words:
'M 1 1 L 3 3'
[x][ ][ ]
[ ][x][ ]
[ ][ ][x]
will be translated to:
[x][\][ ]
[\][x][\]
[ ][\][x]
where [\] SHOULD NOT be tolerated but they are currently.
and result in this ugly fat dirty line:
[x][*][ ] [x][ ][ ]
[*][x][*] != [ ][x][ ]
[ ][*][x] [ ][ ][x]
where [*] has a high probability of getting filled.
and therefore it looks like crapt, see by yourself.
Why someone should use pixeled rectangle instead
of vectorial lines to get a PERFECT picture, this is non sense.
in order words:
hand2 = vectorial imperfect picture
hand3 = bitmap-like perfect picture
<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>
<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>
>FP> This one looks like crapt, even though it's closer than other
>FP> ones. I have some bitmap icons, which render SOooo bad with path,
>FP> it's incredible, as you can see the rendering quality with
>FP> '<rect>' is so 'perfect' compared to '<path>' or '<circle>',
>FP> however, it doesn't zoom like vectorial, since it's not vectorial
>FP> at all.
>
>FP> This is what this message thread is all about, getting 'very high
>FP> quality' at low-resolution, in Adobe SVG viewer or any good
>FP> competitor browser plug-in.
>
> No, thus far this thread has largely been about educating you
>about how vector graphics work. If we were talking about 'very high
>quality' at low-resolution - you would have already mentioned
>font/vector-hinting or multiple representations.
font/vector-hinting ?
What about 'optimizeSpeed;' not working properly?
> Instead so far you have been insulting the SVG specification and
>the Adobe viewer for not intuiting the desired rendering of your
>incorrect SVG content.
My apologizes if you take it that way,
I'm just trying to make it better,
but you seem to have more fun insulting me and being arrogant
then trying to focus on the issue that I'm bringing out.
>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"/>
>
>FP> Wrong, this is a 5x5 pixel circle not a 4x4 pixel circle!!! This
>FP> is why it renders better!
>
> Your original example was 5x5 (I was originally going to change
>the radius to '1.5' but decided that you wanted the circle with that
>radius so I left the size alone and shifted it so it sat on pixels).
>If you want a circle where the outer edge of the stroke is a 4 pixel
>circle:
>
><circle style="stroke-width:1; stroke:#000000; fill:#FF0000;
> shape-rendering: optimizeSpeed;" cx="50" cy="50" r="1.5"/>
>
> The Adobe Viewer fills in the lower 'corner' pixels so you won't
>like the result (but you can fudge it by splitting the circle:)
>
><circle style="stroke-width:1; stroke:#000; fill:none;
> shape-rendering: optimizeSpeed;" cx="50" cy="50" r="1.5"/>
><circle style="fill:#F00;
> shape-rendering: optimizeSpeed;" cx="50" cy="50" r="1"/>
>
>FP> My little icon which is 16x16 needs a 4x4 not a 5x5. It might
>FP> sound stupid or irrelevant but it makes a big difference, trust me
>FP> on that! i.e. 25% increase in size.
>
> You are the one who started with a 5x5 pixel circle, not me - this
>is what I mean by: you need to be _very_ careful how you specify your
>circle.
Look the entire thread will ya?
it's always 4x4, anyway even 5x5 is not perfectly drawn!
> >> 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).
>
>FP> I think you wanted to say that I should not require pixel bitmap
>FP> in aliased mode.
>
> No I'm saying if you want aliased graphics to look good don't
>describe graphics where your line has 50% coverage on adjacent pixels!
>Put your 1 pixel stroke down the middle of a pixel not between two
>pixels (think .5 not .0)!
What about this line not being drawn properly!!!
(101,101)-(109,109)
<?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/'
>
<path style='fill:#FFFFFF; stroke:#000000; shape-rendering: optimizeSpeed;'
d='M 101 101 L 109 109'/>
</svg>
>
>FP> But as you can see in this "hand icon" example, SVG can be used
>FP> for such task and SHOULD be used for such task.
>
>FP> Saying SVG was not made for that is pure FUD and non-sense.
>
> Perhaps if I said it it might be FUD. I was saying that your
>circle was a nonsense circle for drawing without anti-aliasing
>everything was split between multiple pixels - of course your not
>going to get clean lines.
How do you expect to draw icons if low resolution is misbehaving?
How can you explain Paintbrush can do it nicely,
but that Adobe can do it at all?
I mean Paintbrush must have a hard time drawing a circle,
it doesn't fit on every pixel, poor Paintbrush;
weirdly this simple drawing tool, can do a perfect job,
isn't that weird, isn't it?
Oh I see, a simple bitmap drawing tool is more intelligent
than a high-tech vector graphic renderer
for low-resolution pixel computing,
is that what you are suggesting!?
>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.
>
>FP> See the <rect> hand above for further understanding of my arguing
>FP> here!
>
> In your example you are still drawing lines that span pixels if
>you want to use a 1 pixel stroke you better put your end points in the
>middle of pixels not at the juncture of pixels.
(101,101)-(109,109) is a perfect middle point thing that fails.
>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.
>
>FP> I never said it was simple, but it is feasible. Adobe and similar
>FP> company are no beginner in this field, and I don't think they
>FP> would appreciate having a crappy implementation that people would
>FP> laugh about for aliased graphics for professional purposes.
>
> The implementation is not the major problem your content is! It
>is true Adobe is clearly not a beginner in this field, but you clearly
>are.
I think I saw enough flamewar to stop responding to it. =)
Sincerely yours,
Fred.
_________________________________________________________________
MSN 8 with e-mail virus protection service: 2 months FREE*
http://join.msn.com/?page=features/virus
Received on Monday, 28 April 2003 20:47:23 UTC