SVG
SVG (Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки, удовлетворяющий спецификации XML, предназначенный для описания векторных изображений. Основное предназначение — публикация несложных качественных изображений в вебе, таких, как элементы дизайна страниц, диаграммы, графики, карты и т.п. Благодаря некоторым особенностям языка, появляется возможность разделять «черновую» разметку картинки и стиль для неё, и размещать их в разных документах (например, множество схожих картинок содержат в себе только основную разметку, а стиль для них содержится в другом документе).
SVG не следует понимать как ещё один формат для описания изображений (такой, как, например, PNG). Благодаря своим возможностям SVG становится полноценным элементом веб-среды, таким же, как HTML-страницы.
Возможности[edit | edit source]
- Благодаря соответствию XML появляется возможность преобразовывать XML-данные в SVG при помощи трансформаций XSL.
Анимация[edit | edit source]
Анимация реализуется с помощью ECMAScript и языка SMIL.
Перспективы[edit | edit source]
Implementations[edit | edit source]
Opera[edit | edit source]
Gecko[edit | edit source]
KSVG[edit | edit source]
WebKit[edit | edit source]
В настоящее время нет браузеров, на должном уровне поддерживающих SVG. Нативная поддержка частично реализована в движке Gecko, а, соответственно, и во всех браузерах на его основе (например, Firefox), в браузерах Opera и Safari.
В браузере IE нативной поддержки SVG нет.
Структура документов[edit | edit source]
Как и другие XML-документы, SVG-документ может начинаться с XML-декларации, но её размещение не обязательно:
<?xml version="1.0" standalone="no"?>
Затем идёт определение типа документа:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Основные элементы[edit | edit source]
- svg — корневой элемент документа.
- title
- image
- g - семантическая группировка элементов
- defs - контейнер для элементов-источников
Основные фигуры[edit | edit source]
- Прямоугольник — rect
- Окружность — circle
- Эллипс — ellipse
- Прямая — line
- Ломаная — polyline
- Многоугольник — polygon
Пример документа[edit | edit source]
Документ
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Local URI references within ancestor's 'defs' element.</desc>
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="1cm" y="1cm" width="6cm" height="1cm"
fill="url(#Gradient01)" />
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
должен отображаться следующим образом:
SVG на сервере Традиции[edit | edit source]
Проект Традиция поддерживает использование SVG непосредственно в тексте статей на wiki. Подробная информация содержится в разделе Traditio:SVG