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
- Валидатор 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 (интерактивные карты для визуализации данных)