Инструменты пользователя

Инструменты сайта


svg_intro

Назад

Введение в SVG

SVG (Scalable Vector Graphics) масштабируемая векторная графика базирующийся на XML, имеющий свою DOM (Document Object Model) что позволяет работать через JavaScript.

В настоящий момент актуальная версия стандарта – SVG 1.1 проходит процесс обновления до второй редакции и буквально совсем недавно эта спецификация достигла статуса Proposed Recommendation.

Есть два способа включить SVG графику в веб-страницы:

  • Вставить SVG как обычный HTML элемент:
<svg width="300" 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>
  • Для описания целого изображения отдельно от страницы следует использовать немного другой образец:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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>