SVG

С чего начать Этот урок поможет вам начать использовать 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 (интерактивные карты для визуализации данных)