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.
Embed a red svg square:
<svg width="300" height="300"> <rect width="100%" height="100%" fill="red" /> </svg>
Link a red svg square:
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
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!
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