SVG

SVG (Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки, удовлетворяющий спецификации XML, предназначенный для описания векторных изображений. Основное предназначение — публикация несложных качественных изображений в вебе, таких, как элементы дизайна страниц, диаграммы, графики, карты и т.п. Благодаря некоторым особенностям языка, появляется возможность разделять «черновую» разметку картинки и стиль для неё, и размещать их в разных документах (например, множество схожих картинок содержат в себе только основную разметку, а стиль для них содержится в другом документе).

SVG не следует понимать как ещё один формат для описания изображений (такой, как, например, PNG). Благодаря своим возможностям SVG становится полноценным элементом веб-среды, таким же, как HTML-страницы.

ВозможностиПравить

Благодаря соответствию XML появляется возможность преобразовывать XML-данные в SVG при помощи трансформаций XSL.

АнимацияПравить

Анимация реализуется с помощью ECMAScript и языка SMIL.

ПерспективыПравить

ImplementationsПравить

OperaПравить

GeckoПравить

KSVGПравить

WebKitПравить

В настоящее время нет браузеров, на должном уровне поддерживающих SVG. Нативная поддержка частично реализована в движке Gecko, а, соответственно, и во всех браузерах на его основе (например, Firefox), в браузерах Opera и Safari.

В браузере IE нативной поддержки SVG нет.

Структура документовПравить

Как и другие 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">

Основные элементыПравить

svg — корневой элемент документа.
title
image
g - семантическая группировка элементов
defs - контейнер для элементов-источников

Основные фигурыПравить

Прямоугольник — rect
Окружность — circle
Эллипс — ellipse
Прямая — line
Ломаная — polyline
Многоугольник — polygon

Пример документаПравить

Документ

<?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 на сервере ТрадицииПравить

Проект Традиция поддерживает использование SVG непосредственно в тексте статей на wiki. Подробная информация содержится в разделе Traditio:SVG

SVG

Содержание