6 ms·
SVG vs PNG
- alanh 16y agoProvocative and increasingly relevant with the advent of high-res displays and ubiquitous browser zoom. Thanks!
- Goosey 16y agoThe 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. :\
- endtime 16y agoSVG 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.
- jarin 16y agoSo SVG will become useful in about 10 years.
- swombat 16y agoDoubt it. I suspect the super-intelligent transhuman AIs that come after us will still be stuck with IE6 support.
- deleted 16y ago[deleted]
- ck2 16y agohttp://code.google.com/p/svgweb/ 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/ http://starkravingfinkle.org/blog/2006/03/svg-in-ie/ No pretty solution but we're stuck with IE8 until 2020
- tomjen3 16y agoThe 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.
- al_james 16y agoNo reason except that, unless your blog is aimed at the early adopter crowd, people would go "chrome what?" and go away.
- cookiecaper 16y ago"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.
- al_james 16y agoEveryone's mileage will vary. Depending on audience, not supporting IE 6/7/8 may not be an option. Period.
- cookiecaper 16y agoObviously true. That is why I said "wherever we can", and not things like "wherever we can't", or "literally everywhere physically possible", etc.
- akx 16y agoYeah... 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.
- revorad 16y agoHave you tried Highcharts? It seems a lot faster than Raphael.
- endtime 16y agoHighcharts 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.
- revorad 16y agoHighcharts has been using Javascript for as long as I remember (definitely more than a few months). What graphics besides charts are you creating?
- endtime 16y agoOnly 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.
- revorad 16y agoSure, 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/ http://g.raphaeljs.com/).
- lysium 16y agoThe original PNG already looks very blurry, like a JPEG with high compression. http://i.imgur.com/3t4JP.png http://i.imgur.com/3t4JP.png
- Semiapies 16y agoIt 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.
- ggchappell 16y agoI agree, certainly, but so far I've been pretty disappointed in free SVG creation tools. Any suggestions?
- ajuc 16y agoInkscape ?
- ggchappell 16y agoYou'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.
- urza 16y agoIf you want/need to work in browser then I would recommend svg-edit http://code.google.com/p/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
- ggchappell 16y agoThanks, I'll take a look at that.
- igrekel 16y agoI 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.
- bluesnowmonkey 16y agoOr... SVG containing PNG. Go view the source on that guy. http://svgvspng.com/en.svg http://svgvspng.com/en.svg
- mcobrien 16y agoThe embedded PNG is used for the scaled up "PNG side", the rest is SVG.
- megaman821 16y agoI didn't get that, good catch. It illustrates the scalable aspect of SVG really well.
- Semiapies 16y agoThe original image is crappy even before being scaled up.
- deleted 16y ago[deleted]
- cduan 16y agoThis is based on this comic, I think: http://www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/ 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.)
- lbrandy 16y agoI fixed it. Here's the original link: http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/ http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/
- xentronium 16y agoWhat happened to the left guy's head? :( Comparing vector image to a raster image isn't fair -- difficulty of producing the former is greater.
- maweaver 16y agoA 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 http://imgur.com/2jGWJ
- Semiapies 16y agoHow many hours until someone sets up a pro-PNG site with a deliberately crappy SVG image for comparison?
- nozepas 16y agosvg 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.