SVG графика в современной веб-разработке

    SVG или язык разметки масштабируемой графики, все чаще применяется в создании векторной графики в формате XML, что непосредственно берет из последнего и его минусы, но это не мешает быть данному языку широко используемым в создании всяческих изображений, в частности иконок для веб проектов.

Каковы плюсы SVG графики?

• Масштабируемость, причем неограниченная! Это мега плюс данного формата. Все равно на чем отображается графика, это может быть экран мобильного телефон либо 50 дюймовый экран SMART-TV, качество изображения будет одинаковым. Векторную графику в массы!
• Размер может быть уменьшен за счет SVGZ (сжатый файл с помощью gzip, причем сжат хорошо из-за своего текстового содержания XML)
• Поддерживается многими графическими приложениями (Adobe Illustrator, Inkscape, Sketch, Corel Draw, Xara, etc.)
• Анимация! Ах да, неудивишь,.. Но в совокупности с JavaScript можно сделать интерактивную графику.

Встроить в страницу можно как файл изображение:

<img src="ourSvgFile.svg" alt="SVG">

Ещё очень интересные методы работы с SVG я увидел на одном веб ресурсе:

<a href="/" class="logo">Logo</a>

.logo {
    width: 100px;
    height: 50px;
    background-image: url(logo.svg);
    background-size: 100px 50px;
} 

Тем самым мы создаем фон из svg файла, но необходимо указывать размер svg, поскольку по-умолчанию будет взят оригинальный размер.
Вставить SVG можно прямо на страницу:

<svg …>
<ellipse class="background" …/>
<path class=”logo” …/>
</svg>

При этом присвоив классы элементам, можно создавать необъятное.

Пример того что можно сделать, анимированные иконки http://tympanus.net/Development/AnimatedSVGIcons/

Ещё один пример со списками, http://tympanus.net/Development/AnimatedCheckboxes/
Сайт с использованием SVG графики с анимацией. Безусловно, все это впечатляет.

Есть легковесная библиотека SVG.JS для управления и анимации SVG http://svgjs.com/

Клипарты в SVG http://openclipart.org/http://openclipart.org/

Бесплатные иконки SVG для веб-разработки и не только http://www.flaticon.com/