8 (495) 374-54-72

SVG-изображения

С момента появления первой версии “языка разметки текста HTML”, наполнение интернет информацией значительно ускорилось. В самом деле, язык html давал возможность оформления страничек в стиле классического текстового редактора, только снабженного ссылками на странички других сайтов. Стандарт html продолжал расширяться. Добавилась возможность использования графических файлов т.н. растровых форматов. Наиболее популярным (или востребованным) элементом html той версии было анимационное gif-изображение.

С ростом потребностей в представлении новых типов данных расширялся и стандарт HTML, правда, расширение чуть отставало от потребностей, но, зато, на 100 процентов следовало правилам стандартизации. На рубеже 4 и 5 версий, HTML описывал практически все атрибуты современного интернет-сайта, включающие в себя аудио/видео контент, активную графику, профессиональные форматы документов и т.д. Среди таких дополнений было и дополнение стандарта векторной графики, которое можно было использовать непосредственно в коде страницы. Оно называлось SVG - Scalable Vector Graphics.

Необходимость в таком дополнении была давно. Причина этому заключается в том, что классическую растровую графику (jpg, gif, png) невозможно масштабировать с сохранением качества. Если размер изображения требуется увеличить, то на увеличенном изображении появляются артефакты виде ступенек и лесенки. Это связано с тем, что если требуемый размер изображения (в пикселях) превышает исходный, то изображение “растягивается” таким образом, что на 1 пиксель исходного изображения приходится не кратное число пикселей требуемого размера. Это несоответствие приводит к своеобразным артефактам, из-за которых изображение выглядит некачественным, грубым. Понятно, что изображение, состоящее из геометрических фигур, таких недостатков не имеет. Сегодня все современные браузеры способны корректно отображать SVG-графику.

При ближайшем рассмотрении SVG – это набор графических операторов, описывающих формирование простых графических элементов (фигур), таких, как векторы, многоугольники, окружности, дуги и пр. Стандартом определяется их способ размещения на страницы, параметры размеров в соответствии с требуемыми размерами изображения. Будучи включенным в общую структуру DOM, SVG-изображения учитывают другие способы разметки (CSS, события и пр.). Это означает, что они могут реагировать на различные события (фокус, клик мыши и пр.). Параметры SVG-элементов могут изменяться средствами HTML (Javascript, Java и т.д.)

Несмотря на кажущуюся простоту, область применения такой графики относительно невелика. Способ формирования графических изображений в виде последовательных команд хорошо подходит для построения различных гистограмм, диаграмм и прочих элементов т.н. “деловой графики”, которые до этого использовались в растровом формате, а их генерация производилась на стороне сервера.

Недостаток же вытекает прямо из преимуществ: большое количество графических деталей значительно увеличивает объем инструкций, требуемых для изображения, и в итоге объем изображения в формате SVG начинает значительно превышать объем этого же изображения, сформированного в виде растра (правда, это в какой-то мере компенсируется сжатием данных при передаче). Главное достоинство svg-графики – это способность изменять размер изображения без ухудшения качества (или артефактов) свойственного растровым форматам.

Современные сайты редко используют возможности SVG-графики. В основном, это та же деловая графика или простые элементы оформления.

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

Использование SVG значительно упрощает реализацию “деловой графики” и делает вывод любой графической информации строгим и структурированным.

Похожие по теме публикации:


наверх