Главная/ Учимся Javascript, CSS, HTML/ Уроки SVG/ Svg Essentials/ Масштабируемость. Сущность SVG. J. David Eisenberg

Масштабируемость

Дата публикации: 16.11.2010

Хотя векторная графика пока еще не так популярна как растровая, она имеет одну особенность, которая делает ее бесценной во многих приложениях — возможность изменять масштаб изображения без потерь в качестве. Для примера, возьмем два изображения кота. Оба рисунка отображаются на экране при разрешении 72 пикселя на дюйм.

кот в растровом изображении Кот в растровом изображении
кот в векторном изображении Кот в векторном изображении

При увеличении растрового изображения, необходимо как-то растянуть каждый пиксель. Наиболее простой способ — при увеличении в 4 раза, увеличить каждый пиксель в 4 раза. Результат, как видно ниже, не очень лицеприятный:

результат увеличения растрового изображения Результат увеличения растрового изображения

Чтобы исправить ситуацию можно попробовать такие техники как «выделение контуров» и «подавление помех». Но эти техники трудоемки и, в случае автоматической реализации, ресурсоемки. Более того, так как все пиксели в рисунке безымянны, нет гарантии, что алгоритм сможет правильно определить края рисунка.

результат увеличения растрового изображения с подавлением помех Результат увеличения растрового изображения с подавлением помех

Чтобы увеличить векторное изображение в четыре раза, просто даем программе команду увеличить все координаты на 4 и перерисовать рисунок. Результатом будет изображение, у которого закругления и сглаженные углы отображены с ощутимо меньшим эффектом ступенек:

результат увеличения векторного изображения Результат увеличения векторного изображения

Куда дальше

Показать комментарии