8. Векторная графика и резиновая графика

Векторная графика в веб-программировании. В этой статье рассмотрим что такое векторная и резиновая графика. А после прочтения сможете проверить знания пройдя тест. Сертификат о прохождении теста можно обменять на валюту нашей школы GoMother — коины. Коины можно обменять на различные подарки. Начнем!
Векторная графика необходимый элемент на сайте. Она имеет небольшие размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В этой статье мы расскажем, как встраивать векторную графику на Вашу страницу.

Важно: эта статья нацелена ознакомить вас с векторной графикой в разрезе веб-страниц.

Векторная графика в веб-программировании

Есть два типа изображений в веб-разработке — растровая и векторная.

• Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
• Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Давайте рассмотрим различие между типами графики. Вы видите два изображения. Первое в формате PNG, а втрое SVG. Сначала можно не заметить разницу, но если изменить масштаб страницы — PNG изображение портиться в качестве и становиться пиксельным, так как содержит главную информацию, что обозначает положение и цвет всех пикселей. Это происходит в результате того, что при увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны пиксели. Векторное изображение остается на вид качественным и красивым, так как фигуры, меняют масштаб совместно с ним.

 

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

Что такое SVG?

SVG это язык на базе XML для описания векторных изображений. То есть это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как <circle>(круг) и <rect>(прямоугольник). Более сложные SVG элементы включают <feColorMatrix> (en-US) (разложение цвета с использованием матрицы), <animate> (анимация частей вашего векторного изображения) и <mask> (en-US) (применение маски к изображению.)

В качестве простого примера, следующий код создаёт круг и прямоугольник:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

В результате получается следующее:

Из примера выше можно сделать вывод, что SVG легко создавать вручную. Но это не совсем так, используя текстовый редактор можно создать только простые SVG изображения. Что бы создать сложную графику стоит использовать редакторы, такие как Inkscape или Illustrator. Эти приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

Как добавить SVG на страницу

Чтобы встроить SVG используя элемент, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (, или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите нашу статью — изображения в HTML.

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

Как включить SVG в ваш HTML код

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов  <svg></svg>(не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
<svg width=»300« height=»200«> <rect width=»100%« height=»100%« fill=»green« /> </svg> 

Резиновые изображения

Масштабирования изображений пропорционально «резиновому» дизайну для современных браузеров не будет проблемой. Для этого нужно лишь написать в коде CSS следующее:

Img { max-width: 100%;

}

В результате все изображения будут масштабироваться вплоть до 100 % ширины их элемента-контейнера. Помимо этого, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:

Img, object, video, embed { max-width: 100%;

}

Они тоже будут масштабироваться, не считая нескольких примеров исключений. Такие, как видео в теге <iframe>. Давайте сейчас рассмотрим принцип добавления изображений.
А сейчас сосредоточимся на изображениях, поскольку принцип будет тем же, что и раньше, независимо от мультимедиа.

Используя этот подход нужно учитывать несколько моментов:

• упреждающее планирование: добавлять изображения нужно большого размера, что бы изображения соразмерно крупным областям просмотра масштабировалось.
• независимо от размера области просмотра или устройства, используемое для просмотра сайта, в любом случае придется загружать большие изображения, даже если в области просмотра на определенных устройствах пользователям потребуется увидеть то или иное изображение размером всего лишь 25 % от его фактической величины.
  Желаем вам удачи на тесте! У вас все получиться!