svg vs bitmap

This site is best viewed in a modern browser with JavaScript enabled.

MacPC

Hi, recently I work on a data visualization site. The designer wants the data generated graphics to be pixel perfect. Although I played with svg before, I never quite understand why svg graphics look so much nicer than bitmap base graphic such as in curves and circle.
Doesn't the final drawing in svg is limited to the resolution of the display just like bitmap? I don't think there is a way in svg to split a pixel into a smaller unit, it's simply physically impossible.. But why does it look so much smoother?

tracknut

Presuming you don't try to scale up the bitmap from its intended original size, then you are correct, there is no quality difference due to the data format. If your SVG graphics look smoother, then you just did a poor job at generating the equivalent bitmap. After all, the SVG is eventually rendered as a bitmap by the browser.

Dave

MacPC

That's whAt I meant, regardless how the graph is generated, not just by me, lets say a circle on Gimp saved as png and a circle in Inkscape saved as svg the svg always look nicer and needless to say, when it is put in a responsive design page, once the image is resized by percentage, all jags come out in png or bmp, yike! but svg remain nice and smooth. My question is what magic is behind svg?

iBeZi

SVG graphics don't use pixels, they use math to draw lines and shapes in specific places, so when you resize an SVG image you aren't "stretching" the pixels like with a bitmap image, the SVG image is redrawn at a larger scale, because of the lack of pixels the image naturally looks smoother, no jagged edges.

For example take this SVG image of a dragon, you can zoom right in on it without losing any quality, whereas with a bitmap image you would just see a mess of pixels, if you view the source of that image you'll see the SVG magic that generates it.

The browser does not render an SVG image as bitmap.

MacPC

Thanks for the reply

"SVG graphics don't use pixels"
Thats what I read, but doesnt it eventually have to end up in pixel value on the screen? Seems like thats the only way to get anything to display on the monitor, that is what I really dont under stand.

iBeZi

A bitmap image is built up out of little dots of colour called pixels, an SVG image is built using solid blocks of colour with their outline defined using math allowing them to be scaled by recalculating each block of colours position.

Basically bitmap images are static images that are drawn once, SVG images are math based images that can be redrawn dynamically.

tracknut

An SVG image, once it's on your monitor, is a set of pixels. Sorry to say it, that's how a monitor works these days. The very same set of pixels can be generated by sending a bitmap created in Photoshop or whatever else. Yes, if you need to re-size the image, SVG is going to do it right (presuming your image is vector-based).

Dave

iBeZi

I think we're getting mixed up between image pixels and monitor pixels, sure the physical monitor displays it using pixels but the image itself isn't pixel based at all, and the browser doesn't treat it as such, which is why you can zoom in using the browsers zooming tool without being shown a horrible mess of pixels.

MacPC

"I think we're getting mixed up between image pixels and monitor pixels,"
That's precisely my question, it doesn't matter how the image is calculated, the final output always end up on a monitor or a printer.In the case of a monitor, let's say the path of a Bézier curve, mathematically it might intersect a pixel, but physically the monitor has to display that one pixel no matter what, it simply can't display half of a pixel nor can it display a pixel half green or half red. But why does that curve look so smooth in svg while the same curve with a one pixel width looks awful in bitmap?

tracknut

MacPC;1260189 wrote:
But why does that curve look so smooth in svg while the same curve with a one pixel width looks awful in bitmap?

Until you show us an svg-rendered image and your equivalent bitmap rendered image, my answer is "because your mad photoshop skilz aren't good enough". You may not be anti-aliasing the lines, whereas svg is, for example.

Dave

iBeZi

Yeah the quality of a bitmap image defines how "smooth" or unpixelated it looks, take this example, the curve on the left is drawn using canvas, a bitmap technology, while the curve on the right is SVG, without zooming in they both look identical.