1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

SVG vs PNG

Discussion in 'Off Topic' started by RichardKYA, Jul 14, 2015.

  1. RichardKYA

    RichardKYA Well-Known Member

    Hello,

    I'm fairly new to code, been learning for less than a year, so sorry if this is a dumb question.

    Why do developers/designers still use png instead of svg?

    With svg being infinitely scalable and with retina screens, why do designers still spend time creating twice as many png icons, etc?

    Far as I can tell, you can create svg sprites and use them in the same way as a png sprite, so you would only need to create one, instead of having to create 2 (one for retina and 1 for non-retina)

    Is there a reason that png is still widely used today?

    Anyone here use svg over png? Have you run into any problems?

    I know inline svg isn't something that is greatly supported and from what I've read, there are issues doing it that way. Personally, I am more concerned about using svg sprites in the same way as you would use a png sprite, as this is what I am doing on my site and I haven't had any issues yet and hence why I am asking this question.

    If you're doing something that seems flawless, but no one else is really doing it, then you start to wonder why lol

    Thank you :)
     
  2. Daniel Hood

    Daniel Hood Well-Known Member

    This isn't the top answer on the page, but I think it's the most detailed and makes the most sense.

    Which format is better for saving images intended for websites; PNG or SVG?

     
    RichardKYA likes this.
  3. RichardKYA

    RichardKYA Well-Known Member

    Thank you Daniel

    That makes sense. I think I will just go with planning for the future, the browsers I've tested on seem to handle svg sprites fine and I would assume that most people that use a mobile device for internet purposes will have a device that can handle it as well.

    I guess time will tell though lol

    Thanks again :)
     
  4. eva2000

    eva2000 Well-Known Member

    RichardKYA likes this.
  5. Arty

    Arty Well-Known Member

    Rendering time. SVG images render much slower than PNG images. Performance difference is huge.

    If you have multiple SVG images on same page, it becomes much slower. If you know dimensions of your images, its easier to convert SVG to PNG and add additional 2x PNG image for high definition displays (its easy to target hd devices with media queries).

    Then there is an issue of SVG images being limited to raw shapes. You can't create shiny gradients, shiny shadows or anything like that. With PNG images you can do anything your image editor allows you to do.
     
    eva2000 and RichardKYA like this.
  6. RichardKYA

    RichardKYA Well-Known Member

    Maybe I should just create both, then it covers all bases and I can test the performance.

    Thank you for your input guys :)
     
  7. RoldanLT

    RoldanLT Well-Known Member

    Last edited: Jul 15, 2015
  8. RichardKYA

    RichardKYA Well-Known Member

    In your opinion, what would be the best queries to use? I've had a search and there are a lot of different ones regarding hd devices, so I'm not sure which ones would be relevant for today? :confused:

    Thank you :)
     
  9. digitalpoint

    digitalpoint Well-Known Member

    Also the type of image comes into play. SVG does well with things like logos (drawn things). Doesn't really work for things like photographs.
     
  10. W1zzard

    W1zzard Well-Known Member

    Actually these can be created just fine

    http://www.nextpowerup.com/images/logo.svg
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I recently implemented the SVG format for flowchart exports from Visio. One neat thing about SVG is that you can manipulate and bind to it with javascript because it is XML. So I was able to, for example, bind click actions to various nodes in the flowchart.
     

Share This Page