37 Comments
- cheersrazer, on 10/12/2007, -10/+24I would love it if more stories like this got on the front page.
- soogy, on 10/12/2007, -1/+14@illicium
That depends on the vector renderer. I'm sure the guys at Apple probably wrote something of their own to ensure the sharpness of lines.
For example, Mozilla+SVG can't even render the Firefox logo properly. However, the Adobe SVG Viewer plug-in does it perfectly. And I know I keep talking about the Firefox logo, but it is the perfect example of what can be achieved with vector, and how it can replace raster. - soogy, on 10/12/2007, -13/+26Why? The article is inaccurate.
The author blames vector images for his apparent lack of skill in creating them. Hell, take the Firefox logo, for example. It looks great in vector format in docks, and it is resized without any quality loss.
The point is that OS X makes heavy use of sizes between the "natural" sizes of things like icons, ie. zooming into an icon at the size of 48px (standard) in the dock to 76px (no icon exists in this size, thus distortion occurs). With vector, there is no distortion. - TheKlaw, on 10/12/2007, -3/+12I agree with soogy. This guy is trying to talk about the limitations of vectors, but what he's really doing is exposing his own lack of skill at creating them. For instance, he couldn't find a way to get the reflection on the logo to fade. That is really a pretty trivial problem (more or less so depending on the tools you use).
- gusx, on 10/12/2007, -0/+9vector linux is just a slackware based distro.
It doesn't have anything to do with vectors as mentioned in this article. - soogy, on 10/12/2007, -2/+9And by the way, that article you linked to is flawed. You can simply lock line widths to ensure your strokes don't get excessively large as you scale your vector.
That is just another article where the author blames vector for their lack of knowledge of the format.
(Sorry for the double post, waited too long to edit.) - marcedwards, on 10/12/2007, -2/+9"The author blames vector images for his apparent lack of skill in creating them."
I've been using Illustrator (since version 3) almost every day for 12 years. I've been using Photoshop for about the same amount of time (since version 2).
Here's the vector file if you'd like to examine it: http://islayer.com/Gallery/blog/islayer_logo.pdf
I'm quite happy for anyone to question any point in the article though. Go for it.
"take the Firefox logo, for example. It looks great in vector format in docks"
Which dock do you use that has a vector icons? The OS X dock doesn't.
"And by the way, that article you linked to is flawed. You can simply lock line widths to ensure your strokes don't get excessively large as you scale your vector."
That's not a solution though. You don't want to lock the line widths. You actually want them to be different at different sizes.
"For instance, he couldn't find a way to get the reflection on the logo to fade. That is really a pretty trivial problem (more or less so depending on the tools you use)."
How would you do this in Illustrator? I can think of a few workarounds, but they're messy. Once we've solved that I can give you a list of other things that are virtually impossible as vectors.
"The point is, while we still have so few pixels on our screens 72-120dpi, we can still see pixels! when you try to draw a perfect line (like line art, firefox has no perfect lines only smooth curves), you get fuzziness (anti-aliasing) around it."
Exactly.
Argue all you like, but surely you can't deny some of the names that agree vectors are not the holy grail of res independent icon design (note I didn't say UI, because some UI elements will work as vectors). - l0ne, on 10/12/2007, -0/+6You all miss the point. Vectors are great -- for DESIGN. But you cannot ship with multi-MB vectors, period. They're large. They kill efficiency (rendering them onscreen isn't a simple memmove()-like op). This is not to mean they can't be used -- simply that there's a large overhead associated with vectors, which should be carefully examined and that's not worth it, simply, for simple icons (providing square 16, 32, 48, 128 and 512 seems to be more than enough for now and the immediate HiDPI future).
See: http://iconfactory.com/home/permalink/1731 and http://iconfactory.com/home/permalink/1731 for thoughts on the whole thing. - marcedwards, on 10/12/2007, -0/+4Yes, that'll be the next challenge!
- pixelperfect, on 10/12/2007, -3/+6@soogy & all who don't get it:
The point is, while we still have so few pixels on our screens 72-120dpi, we can still see pixels! when you try to draw a perfect line (like line art, firefox has no perfect lines only smooth curves), you get fuzziness (anti-aliasing) around it.
This would not be noticeable on a say, 300dpi screen.
Also, one thing iSlayer did not discuss is that vectors can create amazing gradients and such, but there are still things that are impossible to re-create as vectors, advanced patterns and textures for example)
iSlayer makes a great point, vectors are great for something, not for everything. - hackwrench, on 10/12/2007, -1/+4And yet you left it out of your post
MAC OS X 10.5 - roomforpanic, on 10/12/2007, -2/+5It seems to me that if you're going to set out to write an article in an authoritative voice, you'd want to know what you're talking about. He just comes across as whining about vectors.
- Nicolay77, on 10/12/2007, -0/+2Opera has a whole page zoom feature. You should try it.
- estacado, on 10/12/2007, -0/+2A solution would be a system to convert vectors to bitmaps on the fly. You take the info from the vector files, then convert it to bitmaps as needed.
- inactive, on 10/12/2007, -0/+1Say WTF you're talking about in the title and description. Nowhere does either mention Mac OS.
And what are "bitmap Vs"? - marcedwards, on 10/12/2007, -1/+2"On to problem number two. Text and other line art is well suited to being described by vectors. Photographs, on the other hard, are not. It's possible to create photorealistic vector artwork, but it often degenerates into vector elements roughly the size of pixels. At that point, you've essentially created a computationally intensive bitmap. Even with hardware acceleration, that type of image can be taxing to draw. Now imagine that every icon in the Dock is a scaled photorealistic vector image. That's a heck of a lot of GPU cycles to spend drawing a single interface element, and that's before even considering the actual content on the rest of the screen.
These are all tractable problems, but at a certain point the approach bears reexamining. The goal is to be "scalable," not necessarily to be able to scale indefinitely. There's little need for a perfectly rendered, exquisitely detailed "OK" button to fill an entire 30-inch screen, for example. Practically speaking, "bounded scaling" is what we're really talking about here. Let's call it from 72dpi to 600dpi. That'd cover the next decades or so of display technology progress. Thinking longer-term, at around 1,200dpi there's a point of very rapidly diminishing returns for increased density.
Given this newly refined goal of bounded scaling, there's a solution that has nearly all of the benefits of "vectors everywhere," but none of the drawbacks. It's the same solution that Hyatt describes in his post about Safari. (See, I came back to it eventually.) Let's continue to use bitmaps where they're the most appropriate format. Simply provide higher-resolution bitmaps for high-DPI displays. Given a realistic upper-bound on pixel density, it's possible to ensure a high-quality appearance with reasonably sized bitmaps."
Taken from: http://arstechnica.com/staff/fatbits.ars/2006/4/23/3720 - saifatlast, on 10/12/2007, -2/+3It would've been nice if somewhere in the description, something had said what was meant by 10.5. I realize it's not that hard to figure out, but for some reason I find the lack of precision really irritating.
- alexlr, on 10/12/2007, -1/+2I've been using Illustrator and Photoshop for nearly as long as Mr. Edwards and I have to agree that this is a pretty trivial problem. I don't have a lot of experience in UI design, but a friend of mine was featured at this website a while ago. http://basangpanaginip.blogspot.com/2006/07/worlds-most-photorealistic-vector-art.html
He creates photorealistic vector images based on photographs. Whether its true or not, you come off sounding like you're not as well-versed on the subject, despite the authoritative tone in your piece. - marcedwards, on 10/12/2007, -1/+2Anything can be created with a mesh of polygons like that, it's just a very, very time consuming method that will take forever to render (ie. not good for realtime use in an OS and icons or UI). I admire people who have enough time to create artwork like that... it's stunning. Not practical, but stunning.
And hey, I'm not saying I'm any good at what I do. The pro-vector camp should pay attention when the guys from Icon Factory, Firewheel Design and Jasper Hauser are all saying the same thing. Vectors CAN NOT be used for some things (like complex textures and practically anything that's photo realistic). That's pretty much all the icon heavyweights for OS X. All singing the same song.
Is there anyone here who has years of professional UI design under their belt who is pro-vector? - vanjab, on 01/01/2009, -0/+1It says "10.5's Resolution independent UI".
10.5 is OS X Leopard, the current latest version of the mac OS. - joltguy, on 10/12/2007, -1/+2I'm kinda hoping that OS X icons don't go pure vector. As a few others have mentioned, vectors are great for certain things, but for icons they are probably unneccessary. The OS X .icns file format can store all the hand-tuned images for various resolutions in one neat package. With an appropriate number of "native" resolutions bundled into it I'm not sure why that wouldn't be the way to go. The work of icon artists on OS X over the years has been nothing short of beautiful... I'd hate to see anything hobble their creativity.
- marcedwards, on 10/12/2007, -0/+1You can store a bitmap in a vector, great. But any vector can be converted to a bitmap with no loss, but not vice versa.
What's the point? You're suggesting we:
Draw everything using vectors, which will be quite difficult or impossible for some things. If it's difficult, then we should include a bitmap. If we include a bitmap, then how big should we make it? Big enough that the icon can be rendered at 1024x1024 and not pixelate? Then the OS should render to a bitmap at size and cache every time the icon is resized?
So essentially what you're doing is just making everything bitmap again... and for what benefit? You're just going to lose time and ram in rendering all that stuff.
By your method we would:
Draw at size and cache. Keep in mind we're drawing something that might have a bitmap that's good enough to be draw at 1024x1024 imbedded in it. Given the what we need to do to render, chances are we won't be able to use the GPU for much assistance. The same file would be used if the icon was 16x16. That's A LOT of drawing if you're getting a file listing in the Finder.
By the old method we would:
Use the appropriate "here's one we prepared earlier" bitmap resource. Perfectly scaled if it exists, but scaled down a larger size if it doesn't. This is the kind of work GPUs excel at.
Do you think a vector will look better than a scaled down bitmap?
The point is that there's a lot of extra work for vectors and pretty much no gain. - inactive, on 10/12/2007, -0/+1The best article on the subject I've come across so far is on Surfin' Safari:
http://webkit.org/blog/?p=55
http://webkit.org/blog/?p=56
http://webkit.org/blog/?p=57 - gidd, on 10/12/2007, -0/+1Thing is.. you can store bitmap images in vector image files, but not vice versa. A vector-based icon could contain a number of bitmaps, each transformed, masked and filtered in various ways, potentially including all that nice Core Image stuff if it's done right. Throw in the new Core Animation stuff, and very nice animated icons are practical without man-days of frame-by-frame pixel-pushing.
If this is taken into account, all the whinging about things that "aren't possible" with vectors goes out the window. Anything you can do using bitmaps you can do with vectors, even if it means resorting to a mesh. Since icons get scaled all the time nowadays (cf. the Dock), you can't even guarantee a given pixel will remain sharp.
The OS can cache bitmaps appropriate to the colour depth, pixel size, resolution and LCD RGB pixel ordering specification of the given display device, thus getting the best of both worlds. The argument that vectors are too computationally expensive for real use is completely bogus. The vectors can (and should) be seen as a source file, with bitmaps being a temporary object file.
The only argument against vectors that stands up is that of blurry lines when not aligned with the pixel grid. As DPI gets higher, this will matter less, but in the meantime the problem can be mitigated slightly with a good automatic hinter.
Personally, I don't think the capabilities of Illustrator as a vector graphic renderer should be used as a benchmark of vector graphics as a whole, considering it sucks ass (IMHO). Compare a decent (although woefully forgotten) file format and renderer like the one in Xara: http://www.xara.com/gallery/ - dclowd9901, on 10/12/2007, -0/+1But, Soggy, the Firefox logo doesn't have the complexity of the most complex bitmaps. That's his point.
I can say, however, that I don't agree with his point, because I believe it is moot. No icon should be so complicated that the only way to render it accurately is to build it as a bitmap. That ruins the point of icons, which are supposed to be basic in implementation to help the user find what they need to as quickly as possible.
And, in regards to this statement: "Using vectors puts massive responsibility into the hands of designers," I can say: Good. We need to start weeding out ***** designers, and give more work to good ones. - rowanjl, on 10/12/2007, -5/+5He's using Illustrator, which I have no clue about, but using Inkscape you set the grid spacing to 1px with a 4x4 grid and its easy to create pixel perfect vector images.
- sandberg, on 10/12/2007, -2/+2I have one question. What about the web? It's mostly bitmap based, which means it will look very small on a high res screen. Or it will look ugly if you scale it like the rest of the OS.
I haven't read anything about this. Isn't that a very big problem? - marcedwards, on 10/12/2007, -0/+0I didn't write the title, but Bitmap Vs Vectors = Bitmap verses vectors.
- marcedwards, on 10/12/2007, -1/+1Sorry, I meant to say "years of professional icon design", not UI design. As I've posted previously, I think vectors can be a good choice for some UI elements.
- illicium, on 10/12/2007, -14/+13One of the points the article is trying to make is that there *is* quality loss with vectors. Sure, you can upscale them and they'll look great, but they aren't a replacement for hand-crafted, pixel-perfect icons (32x32 and less)
Also, see: http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php - marcedwards, on 10/12/2007, -1/+0Every single screen is a bitmap, so every time you view a vector you ARE seeing it as a bitmap, unless you're playing Battlezone:
http://en.wikipedia.org/wiki/Battlezone - rickcarson, on 10/12/2007, -3/+1Mac not MAC
If I go to "About this Mac" in the Apple menu for instance it tells me that I am running
Mac OS X
Version 10.4.8
NB: if you click on the Version text it cycles through the build and serial number of your Mac. - RexyRex, on 10/12/2007, -10/+5http://duggmirror.com/apple/Bitmap_Vs_Vectors_and_10_5_s_Resolution_independent_UI/
- DuxDucis, on 10/12/2007, -11/+4Its stuff like this that is simply dead useful
- trogdoor, on 10/12/2007, -11/+2I haven't really used it other than the liveCD for a few minutes out of curiosity, but it would be interesting to note how Vector Linux deals ( or doesn't deal ) with the issues mentioned.
http://www.vectorlinux.com/mod.php?mod=userpage&menu=10&page_id=10
I agree with the author though that Apple probably wouldn't do this if they didn't already know it would work, look at their decision to go with intel instead of AMD, everyone thought they were making a naive choice, until the core duo benchmarks started to come out. - BenTM, on 10/12/2007, -13/+4I agree.


What is Digg?
Digg is coming to a city (and computer) near you! Check out all the details on our