Best file format for scalable vector graphics on the web?

Question

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 1

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!

Answer 2

Logo Designs are better kept to just a few formats: PDF, SVG, AI, EPS, & DXF. (True Vector Formats - Scalable/lossless) A true vector image can be scaled to no end, with no pixels or distortion.

And, if you use a bitmap format, be sure to stick to PNG files. PNG support transparency and are lossless bitmaps, but are still a raster image, so they will show some degree of quality loss when scaled, accordingly. So, PNG are great for some web uses, but not something I'd recommend for print.

I recommend .png format for web display, but print designs/versions should be in true vector format.