SVG vs PNG | Hacker News Reader

SVG vs PNG

svgvspng.com

61 pointskia38 comments

Open articleView on HN

This is based on this comic, I think:

http://www.labnol.org/software/tutorials/jpeg-vs-png-image-q...

(It has a link to the original website, but the original website isn't working for me.)

I fixed it. Here's the original link:

http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/

SVG will make sense once no one is using IE8 anymore. There are solutions like Raphael, and in fact we use that for our charts, but the interactive stuff is painfully slow in VML.

Also, PNGs don't look like that.

So SVG will become useful in about 10 years.

Doubt it. I suspect the super-intelligent transhuman AIs that come after us will still be stuck with IE6 support.

http://code.google.com/p/svgweb/

or one day someone will finish a more robust htc

http://starkravingfinkle.org/blog/2006/03/svg-in-ie/

No pretty solution but we're stuck with IE8 until 2020

The more we use things that IE can't handle, the more likely people are to upgrade.

Obviously we can't do it on commercial sites, but there is no reason a personal blog shouldn't insist that every IE user install Chrome Frame to continue.

No reason except that, unless your blog is aimed at the early adopter crowd, people would go "chrome what?" and go away.

"It's a chicken-egg situation", as they say. We have to break it. This cycle of perpetuating and supporting horrible consumer-grade technologies five, ten, and fifteen years after its obsolescence has to stop, or it'll always take fifteen years for any advances to manifest in a meaningful way.

Yes, it can be painful, but the minimal level of such coaxing that has occurred has been helping -- IE's marketshare is shrinking ever smaller and currently stands in a place that people would have thought impossible just a few years ago.

We can make a difference if we try. We just have to be willing to act boldly wherever we can. Personally, it is my opinion that every developer should find the investment in eradicating IE extremely worthwhile even if it costs him some sales or pageviews. The masses have proven that they will switch if something they want to do asks them to do so, so let's get it started. It is really silly that we don't do this already.

Everyone's mileage will vary. Depending on audience, not supporting IE 6/7/8 may not be an option. Period.

Obviously true. That is why I said "wherever we can", and not things like "wherever we can't", or "literally everywhere physically possible", etc.

Which is why I said personal blogs. Nobodys personal blog has to be seen in IE.

That depends: How wide an audience do they want to reach? Sure, they don't have to support IE, but just like a business, if they want the widest possible amount of readers, then yes, they should support IE.

But many organizations won't even let users install something other than IE.

Yeah... taking a look at "en.svg" -- <image width="200" height="408" image-rendering="optimizeSpeed" ...

So instead of letting the browser even attempt to do a good job at upscaling, the author is forcing it to not do that.

Have you tried Highcharts? It seems a lot faster than Raphael.

Highcharts is a chart library, not a graphics library. I think Highcharts was Flash-based a few months ago, when I decided to write my own lib, and we didn't want a Flash solution. I tried hard to find something else that would work for us, but I couldn't - every lib was either Flash-based, or didn't support VML (Protovis), or missing a chart type we wanted and had no docs and so adding it seemed daunting, and didn't generalize something the way I wanted it to, or had some other flaw. Writing my own was a fun project - it gave me an excuse to learn CoffeeScript.

Highcharts has been using Javascript for as long as I remember (definitely more than a few months).

What graphics besides charts are you creating?

Only charts. All I meant to say is that I don't see how a speed comparison between Raphael and Highcharts makes sense.

I don't remember why we decided not to use Highcharts then, but I definitely looked at it and I definitely didn't want to reinvent the wheel for no reason.

Sure, a speed comparison between Raphael and Highcharts only makes sense if you test them for one specific purpose: in your case, making charts. I understand Raphael is a general purpose graphics library, but it also has charting plugins built on top (http://g.raphaeljs.com/).

The original PNG already looks very blurry, like a JPEG with high compression.

http://i.imgur.com/3t4JP.png

It does.

ETA: I originally posted a link to the crappy data URL for that PNG to appease the URL shortener-averse, but it killed this page's formatting.

A disingenuous comparison; the blurriness on the image on the right isn't from the scaling, it was blurry to start with. Here is the decoded source image: http://imgur.com/2jGWJ

How many hours until someone sets up a pro-PNG site with a deliberately crappy SVG image for comparison?

Provocative and increasingly relevant with the advent of high-res displays and ubiquitous browser zoom. Thanks!

The ubiquitous browser zoom is especially important, thanks for pointing this out! I do a lot of my web browsing from my couch with an atom powered desktop hooked up to the TV. I hate eye strain so I browser-zoom constantly.. And it is really annoying to see images become a blurred mess when I do this. :\

I agree, certainly, but so far I've been pretty disappointed in free SVG creation tools. Any suggestions?

Inkscape ?

You're getting a lot of upvotes. It seems Inkscape is pretty popular. However, I'm afraid that it has been the source of most of the disappointment I'm talking about. I found it to be difficult to learn, and difficult to use once I learned it. It also produced files that wouldn't print. Of course, the latter might be a problem with my printer driver (or whatever), but, strangely, when I took an Inkscape-produced SVG, and printed it to a file -- an SVG file -- then the resulting file would print. (This was on Ubuntu, BTW.)

In any case, I'm glad lots of people have found an SVG creation tool that they like, but I'm still looking.

If you want/need to work in browser then I would recommend svg-edit

http://code.google.com/p/svg-edit/

SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser

Thanks, I'll take a look at that.

I would be even more interested in tools that generate Raphael Js code. I didn't have as much success as I hoped turning svg to Raphael.

svg can be pretty slow rendering on some browsers, specially if it's complex. So it really depends on the usage. It's like comparing it with jpg. It really depends on what you want to do with it.

What happened to the left guy's head? :(

Comparing vector image to a raster image isn't fair -- difficulty of producing the former is greater.

Or... SVG containing PNG. Go view the source on that guy.

http://svgvspng.com/en.svg

The embedded PNG is used for the scaled up "PNG side", the rest is SVG.

I didn't get that, good catch. It illustrates the scalable aspect of SVG really well.

The original image is crappy even before being scaled up.

Reply on news.ycombinator.com