9

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.

Tintin81
  • 9,821
  • 20
  • 85
  • 178

4 Answers4

10

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!

robbrit
  • 17,560
  • 4
  • 48
  • 68
9

Well, the right answer is: "it depends", SVGs are more difficult to draw by the browsers and to be displayed correctly there are some factors involved, on the other hand PNGs are more easy to display, specially in mobile platforms, for example iOS devices are optimized to draw PNG images.

On the other hand, svgs have the advantage that they can be scaled as much as you like, and they are lightweight to be transmitted over the network.

You may create SVG images with Inkscape or adobe illustrator.

Cheers

Juan Alberto López Cavallotti
  • 4,644
  • 3
  • 25
  • 43
5

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.

JuPengo
  • 59
  • 1
  • 1
1

Oh boy - there are many of them. Also there are compound formats which holds raster+vector data (such as popular PDF format). I suspect pdf solution would be most portable, given that you somehow will export your logo to PDF as vector data. Hell, you can even display PDF with javascript only. Or you can take adobe flash path ...

Community
  • 1
  • 1
Agnius Vasiliauskas
  • 10,935
  • 5
  • 50
  • 70