Масштабируемая векторная графика (SVG: Scalable Vector Graphics)

16.06.2024 02:50:14 pm

Идея начать данную тему появилась из за мизерных знаний в масштабируемой векторной графики (SVG: Scalable Vector Graphics) и большом желании пополнить эти знания. Тут я буду выкладывать то, что узнал нового про SVG. Тут я попытаюсь создать свою первую иконку.

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

Возможно, будет интересно:
- Блог: Как выводить спрайты SVG из отдельного файла (Подключение файла SVG)
- Опрос: Лучший формат для иконок сайта

Жалоба

16.06.2024 03:02:11 pm

Код спрайта (Или иконки) находится внутри тега <svg>:

<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
	<!-- Код спрайта -->
</svg>

Атрибут viewBox имеет четыре значения, разделённых пробелом:

Минимальная координата X.
Минимальная координата Y.
Ширина спрайта в точках (Пикселях).
Высота спрайта в точках (В пикселях).

Подстрока/атрибут: xmlns="http://www.w3.org/2000/svg" сообщает браузеру, чтобы обрабатывал код, как SVG.

Внутри тега: <svg> я планирую использовать тег <g>, что означает группу, что будет находится внутри данного тега. Группе можно задать общие параметры, например, цвет (fill="#XXXXXX" или stroke="#XXXXXX"), установить закругленные края у линий (stroke-linecap="round") и прочие параметры.

Конечно же, я буду работать с тегом <path>, как же без него. Данный тег может иметь множество атрибутов, но, самый главный атрибут, я считаю, это d, значение которого определяет рисунок.

В атрибуте d, думаю использовать такие параметры как:

M - Устанавливает точку старта (Место начала "рисунка").
A - Закругление линии.
H - Рисует линию строго по горизонтали.
V - Рисует линию строго по вертикали.
L - Рисует линию в указанном направлении.

Список параметров будет пополняться, по необходимости.

Жалоба

28.01.2025 05:44:05 pm

Для одного своего приложения, мне потребовалось нарисовать серый плюс, сделать это хотелось в формате SVG. Первый вариант выглядел так (Тег: <path>):

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
	<path d="M 5 1 5 9" stroke="#999999" stroke-linecap="round" />
	<path d="M 1 5 9 5" stroke="#999999" stroke-linecap="round" />
</svg>

Но, мне показалось, что нарисовать две ровные линии, будет правильнее, при помощи специального тега (<line>), хоть и рисунок внешне, ни чем не отличается:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
	<line x1="5" y1="1" x2="5" y2="9" stroke="#999999" stroke-linecap="round" />
	<line x1="1" y1="5" x2="9" y2="5" stroke="#999999" stroke-linecap="round" />
</svg>

Разберём тег: <line> по основным атрибутом:

x1: Указатель начала линии по оси X.
y1: Указатель начала линии по оси Y.
x2: Указатель конца линии по оси X.
y2: Указатель конца линии по оси Y.

Атрибут: stroke: Указывает цвет линии. Атрибут: stroke-linecap: В данном случае, указывает округление.

Жалоба