Blogerator.org

× Версия для печати

Новичку часто приходится самостоятельно учиться каким-то основам дизайна и верстки, в том числе на новомодном и продвинутом HTML5, применяя при этом современные варианты разметки CSS и графики SVG. Недавно нашёл бесплатное онлайн-руководство которое меня очень порадовало, а именно понравилась его глава, посвященная анимации в SVG, в которой описано много весьма занимательных штук и приколов. Почитать что такое анимация svg можно отдельно (эта ссылка на главу 9 этого руководства по SVG), а далее я хочу вообще порассуждать про компьютерную графику, но применительно к её современном аспекту.

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

SVG и будущее векторной веб-графики

Никуда не денешься, весь современный интернет постепенно дрейфует в сторону всё более тяжелого и медийного контента, и те, кто отказываются участвовать в этой гонке (я имею ввиду дизайнеров и веб-строителей) — обрекает себя на неизбежные проблемы и сложности. Так вот, такие элементы интерактивного взаимодействия и просто украшательства современного сайта как анимация — всё больше и больше рулят, т.е. захватывают внимание зрителя и заставляют более внимательно с эстетической точки зрения относиться именно к вашему веб-сайту.

И тут мы приходим к выбору самых разных техник для анимаций в интернете, от слегка устаревшей GIF, до спрайтов и анимации построенной на CSS или SVG. Объемная трехмерная графика также в некотором смысле наступает, и это требует новых и более продвинутых инструментов анимации элементов сайта, поэтому не будем касаться 3D именно в этом разделе.

Как читатель уже понял — это реальная проблема, которая наиболее элегантно решается через стандарт SVG. Итак, SVG (Scalable Vector Graphics) — язык разметки масштабируемой векторной графики, созданный для нужд веба. Говоря проще, по сути это язык для описания двумерной графики в формате XML. Делая шаг вперёд можно сказать, что SVG включает в себя всего три типа объектов: фигуры, изображения и текст. Этот стандарт не очень популярен в сети, хотя нужно признать, что его возможности сильно недооценены — в сочетании с JavaScript этот язык позволяет создавать очень даже сложные и продвинутые графические композиции, в том числе и динамические.

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

Заключение для вводной части

На этой заметке-введении пока всё, а в следующем посте мы поговорим более подробно про SVG и его принципы работы. Следите за моими выпусками о векторной графике!