SVG (от англ. Scalable Vector Graphics - масштабируемая векторная графика) - язык разметки двумерной масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML.

Применяется для описания двумерной графики: статических изображений или анимированных (описание трёхмерных объектов не поддерживается). Изображения SVG — отличная среда для создания масштабирования картинок и легковесных анимаций.

Файлы SVG являются простыми текстовыми файлами, их легко можно править в блокноте или в любом другом текстовом редакторе. Поддержка SVG включена в такие векторные редакторы, как Adobe Illustrator, CorelDRAW, Adobe Fireworks, Inkscape.

SVG легко встраивается в HTML-документы, картинки в SVG не имеют артефактов масштабирования, свойственных PNG или JPEG.

Svg — это открытый стандарт, который является рекомендацией консорциума W3C.

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

SVG можно стилизовать с помощью, как встроенных, так и внешних таблиц стилей.

С помощью Javascript можно работать с объектами SVG: добавлять стили, анимацию.

Пример SVG файла

<svg width="25%" height="25%" viewBox="0 0 30 40" > 
 <defs>
  <filter id="shadow" height="120%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
 </defs>

 <polyline transform="translate(-0.5 2.5)" filter="url(#shadow)" points="5,5 25,20 5,35" stroke="grey" stroke-width="1" fill="none"/>
 <polyline points="5,5 25,20 5,35" stroke="grey" stroke-width="2" fill="none"/>
</svg>

Отображаемый результат

Example SVG Scene

Ссылки: