Этот урок поможет вам начать использовать SVG.
Масштабируемая векторная графика (Scalable Vector Graphics — SVG) является {{Glossary("язык разметки", "языком разметки")}} расширенным из XML для описания двухмерной {{Glossary("векторная графика", "векторной графики")}}. SVG по существу является графикой, так же, как {{Glossary("XHTML")}} — текстом.
SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG является рекомендацией W3C (то есть, стандартом), и тем, что это формат, основанный на {{Glossary("XML")}}, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартами W3C, такими, как CSS, DOM и SMIL.
Документация
- Справочник по элементам SVG
- Подробная информация о каждом элементе SVG.
- Справочник по атрибутам SVG
- Подробная информация о каждом атрибуте SVG.
- Справочник по интерфейсу SVG DOM
- Подробная информация по всему SVG DOM API.
- Улучшение содержимого HTML
- SVG работает вместе с {{Glossary("HTML")}}, {{Glossary("CSS")}} и {{Glossary("JavaScript")}}. Используйте SVG для улучшения обычной страницы HTML или веб-приложения.
- SVG в Mozilla
- Замечания и информация о том, как SVG реализован в Mozilla.
Сообщество
- Обращайтесь на форумы Mozilla… {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
Инструменты
- Набор для тестирования 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) для добавления поддержки анимации с использованием {{Glossary("SMIL")}}
- Интерактивное управление фотографиями
- Использование
foreignObject
из SVG для изменения HTML
Карты, диаграммы, игры и эксперименты с 3D
В то время, как маленькие документы SVG могут серьёзно улучшить веб-контент, здесь представлены некоторые примеры тяжёлого использования SVG.
- Тетрис
- Connect 4
- Популяционная карта США
- 3D-коробка и 3D-коробки
- jVectorMap (интерактивные карты для визуализации данных)