Стандарт масштабируемой векторной графики SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics, стандарт масштабируемой векторной графики) - формат описания двумерных векторных графических изображений, основанный на XML и подготовленный консорциумом W3C (World Wide Web Consortium). Векторная графика намного эффективнее используемой в настоящее время растровой графики. Основная причина:

SVG-файлы представляют собой обычный текст, и они чаще всего занимают меньший объем, чем аналогичные графические образы в форматах JPEG или GIF. Другие преимущества векторной графики включают способность изменения размеров без потери качества.

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

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

Спецификация формата SVG является одним из наиболее перспективных решений для использования векторной графики в Internet/Intranet. Она разрабатывается World Wide Web Consortium с участием специалистов крупнейших софтверных корпораций. В общих чертах проект предусматривает создание более гибкой и менее объёмной Web-графики, естественно, при большей интеграции с Web-документами. Векторная графика может быть легко масштабирована, что позволит представлять её на различных устройствах, начиная с дисплеев сотовых телефонов и заканчивая мониторами с большим экраном и экранами коллективного пользования.

Перевод графики в XML позволит повысить уровень интеграции и позволит управлять ей с помощью тех же инструментов, какими мы управляем данными и текстом.

В консорциуме рассчитывают, что SVG в состоянии стать для графики таким же значимым инструментом, каким XML уже стал для документов и Web-данных.

Чтобы показать насколько компактно изображение в формате SVG с точки зрения занимаемого им дискового пространства рассмотрим небольшой пример кода SVG-файла.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20020502//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20020502.dtd">
<svg; width="300" height="200">
<title;>Example; SVG code</title>
<path; d="M 0,0 c10,100 250,100 250,200" style="fill:none;stroke:blue; stroke-width:3 "/>
</svg>

Получим кривую Безье:

Рис. 1 Кривая Безье

Размер полученного файла 325 байт, для сравнения файл в формате GIF, с двадцатью цветной палитрой, занимает 1.66 Кбайт.

Давайте посмотрим на качество масштабируемости, увеличим изображение в четыре раза.

Фрагмент изображения в SVG формате:

Рис. 2 Фрагмент изображения кривой Безье в SVG формате

Фрагмент изображения в GIF формате:

Рис. 3 Фрагмент изображения кривой Безье в GIF формате