4 ms·
A vector format is insufficient to make an image look good at all resolutions. Without hinting, lines are not aligned to pixels, making them blurry. We have so
by oofabz 13y ago
A vector format is insufficient to make an image look good at all resolutions. Without hinting, lines are not aligned to pixels, making them blurry.
We have solved this problem with fonts, but it is extremely complex, both for the artist and for the rendering code.
- terabytest 13y agoNot entirely true. A lot of times resolutions are just double the normal one, so the SVG image scales perfectly and looks good.
- seky 13y agoI have written my prev reply before I've seen yours. Yes, if its mostly double-sized resolution then blurring shouldnt be a prob, And when it is some strange "1.something" or "2.something" resolution, then probably also PNGs will look blurred, unles you dont supply exact special PNGs for such resolutions
- tghw 13y agoAssuming it was hinted to the intended resolution. But that's still an extra step.
- ygra 13y agoFor 1px lines the only thing you have to remember is to put the points on half-pixels (annoying, but you can just wrap a <g transform='translate(0.5 0.5)> around your drawing if needed. The other thing would be shape-rendering='crispEdges' which also helps, but not everywhere.
- masklinn 13y agoWhich you can't have in SVG since the format (IIRC) does not support any hinting. So it's down to luck, and the width of your lines.
- colanderman 13y agoWell, SVG's default coordinate space is defined in terms of CSS pixels, which explicitly allow for rounding to match (a multiple of) the device pixel size. So, if you align things to SVG pixels, they'll likely come out rounded to device pixels.
- terabytest 13y agoI've never had a problem with hinting, why does everybody consider it so difficult?
- seky 13y agoI see, it is an interesting point, thanks. For me, that would be one of the main reasons against SVG
- bronson 13y agoExcept that all other image formats suffer the exact same problem. Some filters may be better tuned for different image types but there's no good, generic solution. Avoiding SVG doesn't solve this at all.
- tobr 13y agoThis is true, but it's still much better than pixelated blur or aliasing. Also, most of the time you have the same problem when authoring a bitmap with vector tools too, unless you very carefully target a specific output resolution. If you really need pixel precision you can always use bitmaps, but vector is perfectly fine in many/most cases. I wonder though - would it be possible to apply hinting to svg with javascript?
- Pxtl 13y agoExcept we have the reverse problem with raster images now that we have devices with vastly different DPI. An iPad 3 has like 4X the DPI of a 30" screen. If you want them to be displayed at a reasonable size on both devices? You've got a problem. If we start seeing 4K screens, worrying about those blurry anti-aliasing lines is going to seem absurd.
- morley 13y agoSo the question is whether to (1) make the experience worse for people with high-DPI devices, (2) make the experience worse for everyone, or (3) make one bitmap for one market and another, larger bitmap for the other market. I'd imagine that most web projects have a vast majority of users on "normal" DPIs, so the best options would be (2) or (3).
- JohnHaugeland 13y agoI have several screens in this DPI range. Actually, at 4k 30", your phone is probably in this range. Use your phone to contrast AA to non-AA. The difference is still pretty enormous in my opinion.
- sambeau 13y agoRetina displays are removing the need to worry about this. When pixels are invisible, hinting problems are invisible too.
- masklinn 13y agoThey don't, hinting is also about removing details which you can't do in SVG. When people provide icons in many physical sizes, the icons generally aren't mere scaling up and down, because even if you can hint so the lines themselves don't blur the details will get so small the whole icon becomes a mess. Apple even has a note on this in their HIG: > If an icon’s content or shape is overly complex, the details can become confusing and may appear blurry at smaller sizes. note that this is not about logical size and retina displays, it's about physical size and the viewer's eye's power of resolution.
- colanderman 13y agoWell, you also can't do that in PNG format.
- Pxtl 13y agoPlus, couldn't you have multiple layers of SVG, and have the javascript respond by hiding/showing detail layers? SVG is more javascript-friendly than PNG so there's opportunity to have one SVG that gets tweaked by your js instead of multiple raster files.
- foobarian 13y agoSVG is more javascript-friendly than PNG That sounds more like a problem than a solution to me.
- masklinn 13y agoCorrect. But PNG works and is widely deployed today. Considering SVG fails at one of the primary use cases where it could have an edge over PNG, it's no surprise few care for it.
- mark-r 13y agoYou may not be able to make it look good at all resolutions, but it's often adequate to make it look good at some minimum and anything above. You can do that without hinting.
- crazygringo 13y agoOptimizing for hinting has been rendered pointless by the fact that people zoom around on mobile devices. You can no longer expect bitmap pixels to map to device pixels in any reasonable way. (Heck, just turn your desktop browser zoom to 90% or 110%.) There was a time for hinting, but it's long gone.
- seky 13y agoNot to say, if you (easily on such devices) zoom to max zoom on a hi-res display, the resulting image is 8times zoomed in comparison to normal desktop PC image. And for same quality (sharpness), you wouldn't only need 8times larger PNG for this, but 8x8=64times larger PNG.
- Tloewald 13y agoPNGs will not scale with pixel count, especially for rendered vector art. The memory footprint will scale though.
- seky 13y agoI meant, if you need perfect sharpness for the zoomed image, you need to supply bigger PNGs, otherwise they're blurred
- mistercow 13y agoTloewald is saying that if you save vector art at an 8x scale PNG, it will not be 64 times larger. Most pixels in vector art are in contiguous blocks of either solid colors or linear gradients. After prefiltering, both cases reduce to a single value followed by a run of zeroes, which DEFLATE will compress extremely well. So the only size increase really comes from the edges. In practice, this means that an 8x size increase will often only increase the file size by around 10x.
- Tloewald 13y agoModded down for making accurate statements? Awesome.
- mistercow 13y agoAlso, basic hinting is not terribly difficult for the artist with modern font design tools. Similar tools could be provided for SVG hinting. Also, auto-hinting works pretty well. I have often wondered why there has been no effort to do the same thing with SVG renderers. At the very least, they could be rendered at 2X and then downsampled with a lanczos filter. The effect is not the same, but it's far from orthogonal. But is hinting even possible in a format that supports multiple colors? It does not seem obvious to me that it is.
- thisrod 13y agoA generation ago, paper had the kind of resolution that screens do now, and all the problems mentioned in this thread came up when books were printed. This made them problems for Donald Knuth. He tackled them with his usual genius, and the result, MetaFont, has been free software ever since. I've always thought a time would come to embed it in web browsers; it sounds like now might be that time.