Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 11 down vote favorite
3

Possible Duplicate:
What web graphics formats to use?

When exporting out images intended for websites, should I save it as PNG (Transparent background) or a SVG? Why?

share|improve this question
2  
Possible duplicate: graphicdesign.stackexchange.com/questions/41/… – John Jan 6 '11 at 17:05
2  
Try uploading a .svg image to this site. – muntoo Jan 7 '11 at 5:50
1  
Vote to reopen: The question is explicitly about SVG, which was not mentioned in the other question, and which has received much more thorough treatment here than there. – Charles Stewart Jan 9 '11 at 14:36
1  
Can anyone reopen this? – JFW Feb 13 '11 at 15:52

marked as duplicate by John, Pekka 웃, PearsonArtPhoto♦, Dori, koiyu Jan 8 '11 at 11:33

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

3 Answers

up vote 7 down vote accepted

I would say PNG simply for the fact it seems to be a more accepted format than SVG.

share|improve this answer
2  
For quality SVG it is better, but in practice the only real solution is PNG because SVG it is not globally supported at this current date. – Littlemad Jan 6 '11 at 17:57
@Littlemad Rendering and displaying SVG is also slower than simply blitting the image with a PNG. – muntoo Jan 7 '11 at 5:52
@muntoo Well, the image is not just blitted. It has to be decompressed, but that's almost always faster than rendering an SVG. – Camilo Martin Jan 14 '12 at 9:39
@Littlemad Ha, that reminded me the same problem was raised before... With PNG and GIF. – Camilo Martin Jan 14 '12 at 9:40
@CamiloMartin cannot wait that browser had good support for technologies much more quicker than normal. I want to use SVG, I feel frustrated in rely on a not-scalable png for logos – Littlemad Jan 16 '12 at 11:13
show 1 more comment
up vote 6 down vote

SVG is scalable, if you have a vector-graphic that is a clear advantage. For pixel-graphics PNG is better. A downside is, that the Internet Explorer supports SVG only with the coming version 9 (before with plugin). Mobile browsers may also have limited support for SVG.

EDIT: As ClemDesm points out, older IE-versions don't support fully transparent PNG, since IE8 that is supported. Non-transparent PNGs work fine. The answer of Computerish has a great solution for handling vector images for now: Keep them as SVG, but export them for web as PNG. I fully agree with this solution.

share|improve this answer
-1 Svg it is still not globally supported I wouldn't suggest the use if you don't explain clearly where is working and a fall back alternative in the case it is not working (most likely). We have to consider the web standards that we are trying to achieve. If the choice is for web and it is for PNG or SVG, it should be always PNG, until SVG it is globally supported by browsers of one generation older. I would love to use SVG perfection, but it is not yet a reality. – Littlemad Jan 6 '11 at 17:55
As I wrote, IE has no SVG-support (only in the until now future version 9) and mobile browser may lack support too. – Mnementh Jan 6 '11 at 19:41
@Littlemad : the downvote is a little exagerated since 1- the answer tells us it's not fully supported (ok, not so much details but, yet, it's told and not wrong, doesn't deserve a -1) 2- PNG alpha channel isn't supported in IE6 & 7 either and not a word about that ? :) – Shikiryu Jan 7 '11 at 9:10
@ClemDesm: Ah, good hint, older IEs don't support transparent PNGs fully. – Mnementh Jan 7 '11 at 10:32
1  
@Littlemad "is not supported in many recent browsers" That seems to be a wrong conclusion, since in the linked reference, there is only one browser, which isn't capable of handling SVG (IE8). You also don't need to install plugins to use SVG (never saw that, maybe in IE6). What you see in red on the linked reference are parts of SVG, you mostly wont use (mostly some kind of filters or other effects). The basics works. – feeela Jul 18 '11 at 15:07
show 4 more comments
up vote 4 down vote

Definitely use PNG for a website. SVG is simply not sufficiently widely supported and it has few (if any) significant benefits over PNG for a flattened export. That said, keep all of your working copies in SVG.

share|improve this answer
1  
Good solution to keep the original as SVG and export it to PNG for web. If SVG is later better supported you can change it. I would recommend that solution for vector images. – Mnementh Jan 7 '11 at 10:32
"it has few (if any) significant benefits over PNG" What? How do you manipulate PNG's via CSS or JavaScript? How do you scale them, without loosing resolution? How do you link parts of an image (e.g. a country-link on a map)? SVG-files commonly also much smaller then PNG (except for tiny icons). – feeela Jul 18 '11 at 15:03
1  
SVG has lots of advantages over PNG for vector illustrations. – DA01 Jul 19 '11 at 23:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.