Acquaintance with SVG images

SVG is quite a mature technology but it began to gain its popularity just recently. Mostly due to the fact that
vector graphics perfectly suit for adaptive web sites. If you have just started to learn SVG,
here is some information you can start with.

Vector images are lossless when being scaled and look nicer with retina displays;

Usually the size of SVG data is less than data size of PNG image with the same picture;

The image is defined with XML so that you can open it in a text editor and see the code;

And so you can code an image manually besides drawing it in a vector graphics editor;

An SVG file is a source in itself. Unlike bitmaps` case you do not need a PSD file to edit the SVG image. Its layers are
not flattened; you can always open the image source and change it. However this trick is not recommended as you may
overwrite scripts and styles;

You can define shadows and gradients in an SVG file; moreover, you can use them not only for this file content but
apply to the elements from outside (although this is not supported everywhere yet);

SVG file can contain CSS and JavaScript.

Example of SVG:

All the modern browsers support SVG and so you can already use it providing PNG alternative for previous versions.

The format is nice for adaptive design due to its capability to scale losslessly, small data size and being crisp at
devices with high pixel ratio. The next mobile screenshot demonstrates this:

The sign says "Hello! :-)" in Russian

The picture clearly shows that SVG (below) looks nicer than PNG (above). So if you are to build a website with
astounding view at every device, SVG may come into play.

Nowadays you can already find a lot of websites with ready-to-use SVG images. For instance,

That works correctly in IE8 and Opera Mini.
However it has a drawback. IE9-11 downloads all the two images although only SVG is used for rendering. Opera sometimes
has problems too. You may get the following instead of your picture:

Elements containing SVG are wrapped with div.svg. Then, you can detect if a browser supports SVG using
Modernizr; browsers which do not understand SVG get .no-svg CSS class. With a piece of CSS
you can hide the SVG images for the browsers that do not render them:

This method works nicely in IE8 (and earlier IE versions). However you might have a problem with Opera Mini.
This browser provides partial SVG support and so does not get .no-svg CSS class whereas it cannot render SVG CSS
background and inline SVG inserts.