С чего начатьЭтот урок поможет вам начать использовать SVG.

Масштабируемая векторная графика (Scalable Vector Graphics — SVG) являетсяязыком разметки расширенным изXML для описания двухмернойвекторной графики. SVG по существу является графикой, так же, какXHTML — текстом.

SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG являетсярекомендацией W3C (то есть, стандартом), и тем, что это формат, основанный наXML, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартамиW3C, такими, какCSS,DOM иSMIL.

SVG-графика и связанные с ней поведения определяются в текстовых XML-файлах, что означает, что их можно искать, индексировать, создавать сценарии и сжимать. Кроме того, это означает, что они могут быть созданы и отредактированы с помощью любого текстового редактора и программ для рисования.

SVG — открытый стандарт, разработанныйWorld Wide Web консорциумом (W3C) с 1999 года.

Документация

Справочник по элементам SVG

Подробная информация о каждом элементе SVG.

Справочник по атрибутам SVG

Подробная информация о каждом атрибуте SVG.

Справочник по интерфейсу SVG DOM

Подробная информация по всему SVG DOM API.

Применение эффектов SVG к содержимому HTML

SVG работает вместе сHTML,CSS иJavaScript.Используйте SVG для улучшения обычной страницы HTML или веб-приложения..

SVG в Mozilla

Замечания и информация о том, как SVG реализован в Mozilla.

• Полнота реализации SVG в Firefox
• SVG - учебное руководство
• SVG в XHTML

Инструменты

• Набор для тестирования SVG
• Валидатор SVG (уже не работает)
• Больше инструментов…
• Другие ресурсы:XML,CSS,DOM,Canvas

Примеры

• Карты Google (маршруты поверх карты) иДокументы Google (диаграммы в электронных таблицах)
• Меню из пузырьков на SVG
• Рекомендации по составлению SVG
• ОбзорПроекта Mozilla SVG
• Часто задаваемые вопросы, касающиеся SVG и Mozilla
• Слайды и демонстрации с обсужденияSVG и Mozilla, проходившего на SVG Open 2009
• Использование SVG в качестве изображения
• SVG анимация при помощи SMIL
• Художественная галерея SVG
• Больше примеров (примеры SVG сcarto.net)

Анимация и взаимодействие

Как и HTML, SVG имеет объектную модель документа (DOM) и события и всё это может быть доступно через JavaScript. Это позволяет разработчикам создавать роскошные анимации и интерактивные изображения.

• Некоторые захватывающие работы с использованием SVG наsvg-wow.org
• Расширение Firefox (Grafox) для добавления поддержки анимации с использованиемSMIL
• Интерактивное управлениефотографиями
• ИспользованиеforeignObject из SVG дляизменения HTML
• АнимацияSVG спидометр

Карты, диаграммы, игры и эксперименты с 3D

В то время, как маленькие документы SVG могут серьёзно улучшить веб-контент, здесь представлены некоторые примеры тяжёлого использования SVG.

• Тетрис
• Connect 4
• Популяционная карта США
• jVectorMap (интерактивные карты для визуализации данных)