Что можно сделать с помощью SVG
Лучшие актуальные приложения, сделанные с помощью SVG, покажут, что можно сделать с помощью этого стандартного графического языка.
SVG - язык преобразования данных в графику. Следующий список приложений покажет, что на самом деле это может представлять очень большое разнообразие применений.
Но прежде всего, скажем прямо, SVG подходит не для всех сценариев, и часто лучше заменить код простым изображением, возможно, картой изображений, чтобы добавить немного интерактивности...
- Поскольку код SVG тяжелый, его часто можно заменить изображением, не замедляя загрузку страницы. Поэтому он более подходит, когда важна интерактивность.
- Он не всегда полностью поддерживается браузерами, поэтому мы должны ориентироваться на аудиторию, которая может выбрать рекомендуемый браузер.
- Были случаи, когда обновление браузера снимало совместимость с определенными SVG-тегами. Поэтому предыдущее условие применимо еще больше.
- Canvas лучше подходит, когда не нужно обращаться к отдельным элементам изображения. См. сравнение Canvas и SVG.
Но когда условия правильные, возможно доставить удивительные вещи с помощью SVG...
Веб-демонстрация SVG
Этот сайт предлагает инструмент, который преобразует SVG во Flash, чтобы его можно было отобразить на всех браузерах. Это может быть решением для старых браузеров.
Рисование контура на карте
Благодаря фреймворку Raphael, использующему SVG и базу данных карты, можно нарисовать путь между начальной и конечной точками на карте. В демоверсии используется скриншот OpenStreetMap и несколько строк JavaScript. Это приложение хорошо подходит, например, для того, чтобы показать посетителям, как добраться до места с железнодорожной станции.
Настольная игра
Ссылка на файл SVG. На ней изображена машина Руба Голдберга в действии, иными словами, механизм связывания действий воедино для достижения конечного результата. Понятно, что в этой системе есть весь потенциал 2D-настольной игры вроде Mario или Duke Nukem .
Игра захватчиков
Ещё один SVG-файл, показывающий возможные применения этой аркадной классики в играх. Он не оптимизирован, и игра довольно медленная, но тем не менее полная!
Игра «Тетрис»
Еще одна классика в SVG-файле. Скорость здесь менее важна, поэтому демонстрация более убедительна. Мы видим в заключении, что SVG подходит для игр, при условии, что они не являются экшенами. Холст более уместен, но и не оптимален. Для этого сценария использования необходимо переключиться на WebGL.
Визуальная музыка
Программа позволяет выбрать музыкальное произведение, а затем отображает сопровождающие тексты.
Он зависает при загрузке аудио в некоторых браузерах, но можно продолжить, нажав на изображение.
Анатомия: Анимированный рот
Эта демонстрация, предоставленная svg-whiz.com, показывает анатомические компоненты рта.
Дом Траяна разобран
Эта анимация, предоставленная Викимедиа, показывает интерьер дома римского императора Траяна, который разбирается как головоломка, когда вы нажимаете на изображение ...
Игральные карты
Поскольку эта колода из 52 карт основана на векторах, они могут быть увеличены без потери качества, и поэтому все колоды могут быть преобразованы в JavaScript для запуска в браузере. Они также доступны в формате EPS. Есть и CSS-версия!
В заключение, когда SVG находится в своей предпочтительной области применения, где скорость не имеет решающего значения, но взаимодействие с частями изображения необходимо, и аудитория не ограничивается старыми версиями браузера, этот формат позволяет получить очень красивые результаты и очень приятный пользовательский опыт.