30

When exporting / saving images with a transparent background that are intended for websites, should I save it as PNG or SVG? Why?

Improve this question
1

6 Answers 6

Reset to default
18
+50

The simple answer here is use both.

The fact that you've named SVG as an option, means we can rule out photo graphics as an intended use case - because SVGs are only good for line-art graphics such as logos, icons and clip-art-like illustrations.

If you are considering this choice for photo graphics, there is no choice; PNG will probably always be better. For graphics where SVG is a viable option, SVG is the best option with a PNG/JPEG fallback. PNG has many strengths, but on scalability and file size, it will often not match up to SVG.

Using only one or the other means you will have to sacrifice either backwards compatibility or progressive enhancement.

Weighing them against each other, PNG certainly will be supported by more browsers than SVG at this current point in time, but the resolutions of newly released devices are forever increasing, meaning PNGs will either need to be served based on a wide variety of different resolutions (via Media Queries, JavaScript or User Agent Sniffing) or scaled by the browsers, which could produce some imperfect results.

Looking at what we know the future holds; forever higher resolutions, wider support and wider use of SVGs across the internet; it makes sense to build for what's coming.

In general, websites should be built to last for many years; in 5 years time your beautifully backwards compatible website might look amazing for the 2% of internet users still using old browsers, yet fairly poor on the up to date browsers with crazy resolutions - so it's very much a stack of hard choices on which way to compromise.

Your options in November 2014

  1. PNGs only

    • For the sake of quality you'll need to serve at least five different versions depending on screen sizes and resolutions - and that's a very conservative guesstimate, you could end up with 10 - 15 versions of the same image if you wanted to be extremely thorough. This also takes some time to implement.

    • If you chose to serve a single graphic and have the browser scale it, the results will probably be less than perfect, and could even be ugly depending on the amount of scaling.

    • A large number of media queries could unnecessarily bloat the CSS and negatively impact on page loading speeds.

    • Will look great on older browsers and devices, but not so great on newer ones.

  2. SVGs with single PNG/JPEG/GIF fallback

    • You could use SVGs everywhere and then have it fallback to another format for browsers that don't support SVG. The main advantage is you only need one file for all the different resolutions.

    • If you compromise and accept that users on outdated browsers can live with imperfectly scaled graphics, you would only need one other version of each file in PNG, JPEG or GIF format.

    • This would take a similar amount of time to implement as the PNG only media queries - possibly even less, meaning it would probably be around the same price.

    • Will look great on all new devices, with sacrifices being made on older technology.

  3. SVG with multiple PNG/JPEG/GIF fallbacks dependant on resolution and screen size

    • You could serve SVG first, and then resolution-dependant PNGs for browsers that don't support SVG. This would be the most thorough, most backwards and forwards compatible, most consistent and most expensive time-consuming option.

    • It would probably take as much time as 1 & 2 combined, plus a little extra for working out the kinks.

    • Will look amazing on almost every device.

In summary, I think it depends on whether you're looking for more backward compatibility or more progressive enhancement, and how much money time you have to spend.

Improve this answer
1
  • 1
    You might mention something about the <picture> element helping out with various image sizes
    – Zach Saucier
    Commented Nov 3, 2014 at 16:45
15

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.

Improve this answer
9
  • -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
    Commented Jan 6, 2011 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
    Commented Jan 6, 2011 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
    Commented Jan 7, 2011 at 9:10
  • @ClemDesm: Ah, good hint, older IEs don't support transparent PNGs fully.
    – Mnementh
    Commented Jan 7, 2011 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
    Commented Jul 18, 2011 at 15:07
8

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

Improve this answer
8
  • 4
    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
    Commented Jan 6, 2011 at 17:57
  • @Littlemad Rendering and displaying SVG is also slower than simply blitting the image with a PNG.
    – Mateen Ulhaq
    Commented Jan 7, 2011 at 5:52
  • 1
    @Littlemad You don't have to. You can use VML workaround for IE < 9, or you can pre-render it on the server, or even use a flash-based embed that renders it on IE. All browsers (at least major ones) support SVG, only IE 6, 7 and 8 are f*cking with us. So just use any workaround that isn't horrible, if they see a worse site, that's their fault. It's much like SDTV vs HDTV or DVD vs BluRay.
    – Camilo Martin
    Commented Jan 16, 2012 at 12:55
  • 1
    In 2014 this answer should probably be in favor of SVGs instead.
    – Hanna
    Commented Nov 16, 2014 at 5:58
  • 1
    2015 caniuse.com/#search=svg -- basically just no IE8
    – goodship11
    Commented Jul 24, 2015 at 15:42
5

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.

Improve this answer
3
  • 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
    Commented Jan 7, 2011 at 10:32
  • 2
    "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
    Commented Jul 18, 2011 at 15:03
  • 3
    SVG has lots of advantages over PNG for vector illustrations.
    – DA01
    Commented Jul 19, 2011 at 23:15
0

I would stick with PNG to be on the safe side. SVG is still not fully accepted by many big internet companies & browsers. Although SVGs are scalable and are vectors they are often unnecessary, take up more space and overcomplicated the website.

I hope that answered your question :)

Improve this answer
4
  • "take up more space and overcomplicate"? How so?
    – DA01
    Commented Oct 30, 2014 at 20:23
  • 1
    I'm pretty sure it may impact your SEO as your images may not show up on Google and I'm not 100% sure but it's often the case that SVGs take longer to load
    – nicolos
    Commented Oct 30, 2014 at 21:10
  • 2
    Time to load is based on file size, of which SVGs can often be much smaller. And if google image search is important for your sites' SEO, yes, PNG might be better, but I think that's more of a niche thing.
    – DA01
    Commented Oct 30, 2014 at 21:16
  • 1
    Yeah, I mean at the end of the day there is no right or wrong answer. The file size much depends on the complexity of your image & yes your choice depends on the use case. I was merely stating the pros and cons of the different file types :)
    – nicolos
    Commented Oct 30, 2014 at 22:24
-1

Even though SVG isn't globally accepted and some people have a frustrating time scaling PNGs, I have always found that creating an icon within Adobe Illustrator works best at scaling up or down a "reasonable" amount.

Improve this answer
1
  • Does Adobe Illustrator allows pngs or svg or both or what exact is the reason to name Illustrator here? And why do you think svg isn't globaly accepted?
    – Mensch
    Commented Oct 15, 2014 at 14:46

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