Вступление

Итак, что такое SVG и почему мы должны даже подумать об их использовании? Это вводный блог о SVG. Я собираюсь быстро объяснить и показать несколько вещей, которые вы можете с ними делать, и после прочтения этого блога вы получите базовое представление о них и о том, как их кодировать.

Что такое SVG?

SVG означает «Масштабируемая векторная графика», а векторная графика - это просто объект, которому даны определенные математические инструкции, которые будут отображать форму. Почему мы должны даже подумать об их использовании, если мы всегда можем добавить изображение из Интернета или наших файлов? Мы можем иметь в виду некоторые формы или структуры, которые слишком сложны для поиска изображения в Интернете. Давайте сравним увеличенное изображение PNG со стрелкой с увеличенной стрелкой SVG и увидим разницу.

Как видите, обычное изображение отображается в пикселях. Другими словами, если мы захотим когда-нибудь увеличить значок, в SVG появятся уродливые пиксели. С другой стороны, у нас есть четкое изображение независимо от того, насколько близко вы увеличиваете масштаб или насколько большим вы его делаете.

Еще одна замечательная особенность SVG заключается в том, что они буквально состоят из кода, поэтому их размер минимален, и вам не придется иметь дело с HTTP-запросами, поэтому ваш код работает немного более эффективно.

Как мы на самом деле кодируем SVG?

Теги SVG интерпретируют все внутри себя как XML, поэтому каждый атрибут, который будет использоваться для создания SVG, находится внутри тега ‹svg /›. В этом блоге я расскажу о различных элементах, которые использует SVG для создания формы: круги, прямоугольники, линии и многоугольники. Каждая форма использует разные атрибуты для определения объекта, давайте разберем каждый из них.

Круги

Круги имеют три основных атрибута: радиус, который представлен буквой «r», центр по оси X, который представлен «cx», и центр по оси Y. Давайте посмотрим, как мы можем использовать их, чтобы на самом деле сформировать круг.

Итак, если мы рассмотрим изображение в левой части, мы увидим, что есть тег ‹svg /›, который имеет ширину и высоту, а внутри у нас есть тег ‹circle /›, который имеет только атрибут «r», но почему мы можем только увидеть 1/4 круга? Ну, это потому, что мы не указали, где центрировать круг, давайте посмотрим, как это сделать.

Здесь мы указываем, где разместить центр круга на основе оси X или, проще говоря, где разместить круг слева направо. У нас все еще нет полного круга, поэтому давайте воспользуемся нашим третьим атрибутом.

Вуаля! Теперь у нас есть полный круг, обратите внимание, что мы указали положение круга по оси Y или сверху вниз.

Прямоугольники

Прямоугольники имеют шесть основных атрибутов для образования прямоугольных форм. Атрибуты «x» и «y» в прямоугольниках относятся к положению верхнего левого угла фигуры в отличие от центра на кругах. Итак, если мы укажем «x» равным 0, форма будет полностью слева, а если мы укажем «y» равным 0, форма будет наверху. У нас есть ширина и высота, которые определяют именно это, а затем у нас есть «rx» и «ry», теперь эти двое будут определять «округлость» формы, которую они действуют как «border-radius» в CSS. Давайте посмотрим, как мы можем объединить их, чтобы получить форму.

Если мы проверим изображение, то увидим, что «x» задан на расстоянии 10 пикселей от левого края, а «y» указывает фигуре позиционировать себя на расстоянии 10 пикселей от вершины. Мы также видим, что можем применить атрибут «заливка», чтобы наш квадрат менял цвет. Как теперь использовать «rx» и «ry»?

Изучая изображение, мы видим, что rx определяет границы по оси X или верхнюю и нижнюю границы, поэтому, если мы укажем «rx» равным 25, форма перестанет изгибаться через 25 пикселей по оси X, а «ry» определяет границы по оси Y или левая и правая границы; Обратите внимание, что если нет округления ни по оси y, ни по оси x, округление фактически не произойдет.

Линии

Линии более простые. У нас есть шесть основных атрибутов в строках: «X1», «Y1», «X2», «Y2», «stroke» и «stroke-width». Таким образом, «X1» будет определять начальную точку линии по оси X, а «Y-1» указывает начальную точку линии по оси Y, естественно, «X-2» указывает конечную точку линии относительно ось X и «Y-2» задают конечную точку линии относительно оси Y. «Stroke» указывает цвет линии, а «stroke-width» определяет ширину линии. Посмотрим, как это работает.

Полигоны

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

Итак, давайте внимательно проверим атрибут точек, у нас есть три пары чисел внутри атрибута, первая пара определяет первую точку, вторая пара определяет вторую точку, а третья пара указывает третью точку, каждая точка представляет крайнюю точку форма. Каждую пару разделяет запятая, номер слева представляет положение точки по оси X, а число справа представляет положение по оси Y. Пары разделяются пробелами. К полигонам можно добавлять любое количество точек.

Здесь мы добавляем еще одну точку, которая идет в середине треугольника, образуя форму стрелки.

Свойства стиля

SVG использует несколько иные свойства для их стилизации, чем CSS. Двумя важными свойствами являются: «заливка», используемая для указания цвета SVG, «обводка», используемая для указания границы, «ширина обводки», которая определяет ширину границы. Чтобы указать ширину и высоту, мы используем… ширину и высоту, как и css.

Различные способы включения SVG в разметку

Есть разные способы включения SVG в наш HTML-файл, я покажу вам несколько способов сделать это.

Импорт SVG как изображения из другого файла

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

Обратной стороной использования этого метода является то, что мы не можем напрямую изменить стиль всего, что находится внутри тега ‹svg /›, мы можем управлять только стилем самого SVG, но не формой внутри него.

Запись SVG прямо в HTML-файл

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

Недостатком такого способа встраивания SVG является то, что наша разметка может быстро стать очень большой.

Использование тега ‹use /›

Итак, третий метод, который мы можем использовать, - это использование тега use. Это работает так, что мы встраиваем SVG прямо в разметку, разница в том, что мы заключаем наш SVG в тег ‹symbol /›.

Тег ‹symbol /› предотвратит отображение SVG, то есть там, где используется тег ‹use /›.

Каждый раз, когда мы используем тег ‹use /› (без каламбура), заключенный внутри тега ‹svg /›, будет отображаться наш SVG. Преимущество этого метода в том, что мы можем создать множество SVG в нашем файле и поместить их все в снизу, поэтому всякий раз, когда мы хотим его использовать, мы просто используем тег ‹use /›.

Заключение

Итак, мы познакомились с основами SVG, есть еще много интересного по этой теме, и я очень хочу узнать о ней больше. С помощью SVG мы можем делать потрясающие вещи: они дают нам возможность создавать четкие и креативные значки для отображения на наших веб-страницах. Удачного кодирования!