Формат SVG (масштабируемая векторная графика) давным-давно “пряталась в тени”, хотя был разработан ещё в 1999 году; главной причиной непопулярности данного формата являлась слабая браузерная поддержка, особенно в Internet Explorer.

Сегодня ситуация другая: IE9 и многие другие браузеры, включая мобильные, осуществляют поддержку SVG, так что можно сказать данный формат стал современным.

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

Главные преимущества формата SVG:

• SVG изображения являются масштабируемыми без потери качества.
• Внутри SVG ничем не отличается от формата XML, так что его можно создать при помощи обычного Блокнота.
• Размер файла будет небольшим, т.к. перед нами векторный формат. (так же SVG можно сжимать, используя gzip).
• Как и с XML, SVG изображением можно управлять при помощи JavaScript и других языков, с целью анимации, добавления интерактивности и много другого.
• Вставить SVG можно через обычный тег <img />. Так же можно использовать <object> и <iframe>. (В том числе можно применить и тег <svg>).

Если взглянуть на SVG в текстовом редакторе, то увидите следующее:

“Так, стоп! Это же смахивает на обычный файл XHTML!” Так и есть. Содержимое представляет собой координаты точек и кривых: вручную такое сделать практически невозможно, поэтому следует воспользоваться специальным софтом. (Adobe Illustrator или Flash, а так же другие программы).

Разница между SVG и Canvas

<canvas> так же является HTML5 элементом, где можно отображать изображения. Однако в случае использования <canvas>, результат всегда отображается в растровом формате. Если вам необходимо изображение с поддержкой свободного масштабирования, то используйте SVG.

Источник: http://ruseller.com/lessons.php?rub=43&id=2196