HTML5 [1]
CSS3 [1]
JavaScript [3]
JS in HTML5 [4]
Canvas (Context2D) [1]
Canvas (WebGL) [0]
Browser Technologies [2]
jQuery [1]
ExtJS [0]
Prototype.js [2]
SVG [2]
Browsers [2]
Mozilla Plugins [0]
XUL, Jetpack, etc.
Web [2]
MeowW [4]
iOS [0]
Алгоритмы [0]
Криптография [0]
Теория игр [0]
Теория вероятностей [0]
Математика [1]
Мат. анализ [0]
Алгебра [0]
Дискретная математика [0]
Теория графов [0]
Комбинаторика [0]
Теория чисел [0]
Комплексный анализ [0]
Матлогика [0]
Математическая логика, её связь с теорией алгоритмов и т.п.
Тензоры [0]
Геометрия [0]
Топология [0]
Дифференциальная геометрия [0]
Дифференциальные уравнения [0]
19 Июнь 2011 в 12:02:18
01:23:13
Основы SVG

What is SVG?

Привет. Сегодня мы будем изучать SVG. SVG - означает Scalable Vector Graphics, масштабируемая векторная графика. Зачем она, собственно, нужна? SVG входит в HTML5 наравне с Canvas 2D. Только canvas - это растровая графика. Там нету DOM-элементов, картинку можно разбирать по пикселям... А вот SVG создан на основе XML, и для рисования там используются теги. На самом деле это очень удобно: можно управлять элементами с помощью обычного DOM, удалять их, изменять свойства... А вдобавок там есть куча разных фильтров и специальные теги для создания анимации. В общем, возможности чуть ли не такие, как у Flash. Ведь флеш позволяет оперировать объектами, это тоже векторная графика. А в SVG ещё и формы можно внедрять - прям как в flash. Но к сожалению, SVG имеет два значительных минуса перед Canvas. Во-первых, он значительно медленнее. Во-вторых, нету метода getImageData, или какой там... В общем, нельзя SVG-картинку конвертировать в GIF или JPEG специальным методом, как это происходит с canvas. Хотя можно попробовать заюзать какой-нибудь хак...

С SVG, кстати говоря, умеет работать Adobe Illustrator; а также весьма популярный векторный редактор Inkscape. Но ведь SVG - это текстовый формат, значит и мы можем его изучить и создавать вручную. Давайте изучать?

Основы

В отличие от html, svg - это xml. То есть, должна быть строгая xml-разметка.

  • Все имена тегов пишутся маленькими буквами. - не <RECT/>, и не <ReCt/>, а только <rect/>.
  • Все значения атрибутов ставятся в кавычки. - не <rect x=10/>, а <rect x="10"/> или <rect x='10'/>.
  • Все теги завершаются. - не <rect>, а только <rect/> или хотя бы <rect></rect>.
  • Все атрибуты имеют значения - не <input disabled/>, а <input disabled="disabled"/>.

В общем, вся знакомая по xhtml разметка. И это только то что я припомнил. Ладно... Главный во всём документе тег - <svg>. Он играет ту же роль, что и <html> в html. Только разметка должна быть обязательно такая:

Code
<?xml version="1.0" encoding="UTF-8" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">    </svg>

Попробуйте убрать атрибут xmlns или не завершить какой-нибудь тег. Какой-нибудь обозреватель картинок, может быть, ничего и не скажет, а вот браузер точно скажет. Цитирую: This XML file does not appear to have any style information associated with it. The document tree is shown below.

Ладно, поехали дальше. Есть стандартный тег <title>, знакомый ещё по html. Есть тег <desc> - (от description) он может содержать любой текст, который нигде на странице показываться не будет и предназначен для индексации поисковиками. Атрибуты width и height у тега svg заметили? Это размеры картинки.

Hello, rect

Поехали дальше. По традиции, знакомясь с языком программирования, надо написать простенький Hello, world. Но у нас даже не язык программирования, а xml.
Но всё равно надо хотя бы один пример посмотреть. Сделаем:

Code
<?xml version="1.0" encoding="UTF-8" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">  <rect x="50" y="40" width="400" height="200"/>  </svg>

У нас получается следующее:

Good bye

В общем, будем изучать SVG. Это интересно. В следующей статье мы подробно осмотрим все простые фигуры SVG: прямоугольник, круг, эллипс, линии...

Просмотров: 1557 | | Теги: круг, графика, векторная, кривые, рисование, квадрат, svg
Всего комментариев: 1
1 Аноним (23 Июнь 2011 15:10:47) +1  
Спасибо. А то всё слышу: SVG, SVG, а что это такое - непонятно.
Спам
Имя *:
Email:
Код *: