Best file format for scalable vector graphics on the web?

image css vector-graphics
Tintin81 picture Tintin81 · Apr 21, 2012 · Viewed 70.8k times · Source

I am building a new website and I would like the logo of that website to look equally sharp across all devices (ranging from desktop computers to retina displays on the iPhone and iPad).

The logo I have doesn't contain any gradients or pixels, so I could easily save it in a vector format. However, nobody can really tell what the best format would be for this.

Is it SVG or PNG e.g.?

And how would I create an SVG file?

There is not much information available even on Google.

Thanks for sharing your experience with this.

Answer

robbrit picture robbrit · Apr 21, 2012

Since SVG stands for "scalable vector graphics", that's probably your best choice ;) PNG is a pixel format, so it won't scale as nicely as you zoom in or out.

A common library for doing SVG images is Processing.js, check it out and see if it does what you want it to do!

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame" style="height: 25px;"> &…

Read More
CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, height and width are already specified. I added CSS rule for images: …

Read More