SVG.

Эта книга не углубляется детально в SVG, но кратко я поясню её работу. В конце главы я вернусь к сравнительным недостаткам методов, которые нужно принять во внимание, выбирая механизм рисования для конкретного применения.

Вот документ HTML, содержащий простую SVG-картинку:

<p>Normal HTML here.</p>

<svg xmlns="http://www.w3.org/2000/svg">

<circle r="50" cx="50" cy="50" fill="red"/>

<rect x="120" y="5" width="90" height="90".

Stroke="blue" fill="none"/>

</svg>

Атрибут xmlns меняет пространство имён элемента по умолчанию. Это пространство задаётся через URL и обозначает диалект, на котором мы сейчас говорим. Тэги <circle> и <rect>, не существующие в HTML, имеют смысл в SVG – они рисуют формы, используя стиль и позицию, заданные их атрибутами.

Они создают элементы DOM так же, как теги HTML. К примеру, такой код меняет цвет элемента на cyan:

Var circle = document.querySelector(«circle»);

Circle.setAttribute(«fill», «cyan»);