Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to make my webpage look great on every device, I have an Retina Macbook 15" and an iPhone 5, and a regular low DPI desktop, so I want it to look as good as possible on all of them, and I can't seem to find a site online that talks about Retina SVGs, they'll talk your ear off about "image fonts" and PNGs though. lol

and, how do I make sure the SVGs are rendered properly across browsers?

share|improve this question
SVG files will just be resized accordingly, so I don't see an issue (except for older browsers). But the real solution to deal with this would be to provide actual retina graphics (see for example). – slhck Mar 28 '13 at 11:10
"Retina" is just Apple's marketing for the current generation of displays (which feature higher definition than the previous generation), so your question is rather how to provide hints at the scale at which the vector graphics should be rendered. – Jean-Marc Liotier Mar 28 '13 at 11:44
I know what retina means, I'm asking if an SVG file will take up the same physical space regardless of res, and how to make it do that if it won't automatically. – MarcusJ Mar 28 '13 at 12:33

Look at the "preserveAspectRatio" and "viewBox" attributes of the tag - that should take care of all the SVG rendering you need in a Web page.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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