Пример SVG

SVG пишется на XML.

Пример SVG

Ниже приведен пример простого SVG файла. SVG файлы должны сохраняться с расширением .svg:

<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Смотрите пример (только для браузеров, поддерживающих SVG)

(Если нужно просмотреть исходный код SVG, откройте этот пример, затем нажмите правой кнопкой мыши в окне и выберите «Просмотреть исходный код».)

Комментарий к коду:

Первый абзац содержит宣言 XML. Обратите внимание на атрибут standalone! Этот атрибут определяет, является ли этот SVG документ «независимым» или содержит ссылки на внешние файлы.

standalone="no" означает, что SVG документ будет ссылаться на внешний файл - в данном случае, это файл DTD.

Второй и третий строки ссылаются на этот внешний SVG DTD. DTD находится по адресу “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. DTD находится на W3C и содержит все разрешенные элементы SVG.

Код SVG начинается с элемента <svg>, включая открывающий тег <svg> и закрывающий тег </svg>. Это корневой элемент. Атрибуты width и height могут устанавливать ширину и высоту этого документа SVG. Атрибут version может определить используемую версию SVG, а атрибут xmlns определяет пространство имен SVG.

SVG <circle> используется для создания круга. Атрибуты cx и cy определяют координаты x и y центра круга. Если эти атрибуты пропущены, то точка будет установлена в (0, 0). Атрибут r определяет半径 круга.

Свойства stroke и stroke-width контролируют способ отображения контура формы. Мы установим черную рамку шириной 2px для круга.

Свойство fill устанавливает цвет внутри формы. Мы установим красный цвет для заливки.

Закрывающие теги закрывают элементы SVG и сам документ.

Комментарий:Все открывающие теги должны иметь соответствующие закрывающие теги!