Blog

The image on the left is published with the traditional <img src... tag. And that's wonderful because finally it's time for cross-browsing compatibility vectors on web. Soon we will design interfaces with buttons, logos and animations directly in vector format thanks to the old svg format. (Yes that's really old).

It's awesome because it's lightweight, this example image is 9kb and does not have limit in resolution. It's like the original adobe illustrator file.

It's linkable like a jpg file, but embeddable also directly into html or php code. Svg infact is written in xml and it's possible to merge it with web pages! Javascript can read every vector curve and interact with them! For example...

Embed a red svg square: <svg width="300" height="300"> <rect width="100%" height="100%" fill="red" /> </svg>

Link a red svg square: <img src="/square.svg" alt="square img" height="80px" width="80px" />


It's css/css3 compatible and it's possible to style it like an html div element: size, color fill, border, anim tranformations, everything. It's also possible to use it as background-image.

Today almost every browser read it and if you really want to support older browsers there's a tip: the new srcset= property is read by modern broweser so toy can mix it with src= to push a raster version of the image, for example:

<img src="/logo.png" srcset="/logo.svg">

The only cons? The vector svg code is open for everyone and the project is readable in its original format without any resolution limit! An example? If you save the image above you can open it in illustrator!

Some resources

More clear instructions here: https://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_vector_image_to_a_webpage

How to export and optimize svg for web: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html