| 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] |
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-разметка.
В общем, вся знакомая по 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: прямоугольник, круг, эллипс, линии... |
|
|
| Всего комментариев: 1 | |
|
| |
