Grow your CSS skills. Land your dream job.

Retina @2x.png vs SVG

  • # December 19, 2012 at 10:38 am

    Since there has been a lot of discussions on Retina and giving support for it, why are we using 2x the image size when we could just use SVG? When zooming in a @2x.png, you still get pixelated images however, that’s not the case with SVG. Why are we not supporting SVG overall and using conditional stylesheets for IE instead?

    # December 19, 2012 at 10:47 am

    My first guess is that not everything can be vectorized….it works for shapes and typography and things like that, but a picture of my cat* is a bit more tricky to turn into vectors. So while it would definitely work for logos and things like that, the use of photo imagery would keep us from supporting it “overall”.

    I may be talking out of my butt though, as I haven’t really dived in SVG and its possibilities yet…

    * = haha, I don’t even have a cat!

    # December 19, 2012 at 10:56 am

    Yep, that is true. I’m speaking mostly on icons, text and basically anything you want to scale that could also be in vector format.

    Update: I do notice that when using vector textures, there seems to be an enormous file size difference. For an image 200×100 with texture, an SVG comes out over 8mb while a PNG is just 22kb.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".