SVG » Web Мастерская

Блог

Web Мастерская

Копирование SVG

При правках иконок на SVG, может появиться необходимость скопировать полностью или какую то часть иконки. Чтобы не плодить один и тот же код несколько раз, его можно выводить в нужном месте, при помощи тега <use>.

Так как все иконки находятся у меня в отдельном файле, в этом же файле я написал макет, который используется во многих SVG картинках:

	<defs>
		<g id="model">
			<!-- Код макета -->
		</g>
	</defs>

Теперь там, где мне нужен макет, получаю его в иконку так:

<use xlink:href="#model"/>

Важно: Если Вы как и я храните иконки в отдельном файле, и в этом файле используете тег <use>, в открывающемся теге <svg> должна присутствовать строка: xmlns:xlink="http://www.w3.org/1999/xlink":

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Чтобы не повторять мои ошибки: Тема: Ошибки в коде SVG.

Возможно, будет интересно:
- Тема: Масштабируемая векторная графика (SVG: Scalable Vector Graphics)
- Блог: Как выводить SVG иконки из отдельного файла...

Жалоба

CSS переменные в SVG

CSS SVG

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

Я создал файл: "svg.css", с таким содержимым:

:root {
	--cool:   #0074FF; /* Оттенок синего */
	--murk:   #033C59; /* Оттенок синего + зелёного */
	--spring: #48CFAD; /* Оттенок зелёного */
	--smoke:  #CCD3EB; /* Оттенок серого */
	--fire:   #FC6459; /* Оттенок красного */
}

Подключил "svg.css" к документу. Теперь в SVG меняю:

<g fill="#0074FF">

На:

<g fill="var(--cool)">

Готово. Переменная отдаёт указанный ей код цвета.

CSS переменная должна начинаться с двойного дефиса (--)....

Жалоба

Как выводить SVG иконки из отдельного файла (Подключение файла SVG)

SVG

Необходимо создать файл, где будут храниться у нас все спрайты SVG, назовём данный файл sprite.svg, с таким содержимым:

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

	<symbol id="sprite2" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite2" -->
	</symbol>
</svg>

Тут внутри тега <svg> находятся два спрайта, "завёрнутые" в тег <symbol> с id="sprite1" и id="sprite2". По этим идентификаторам мы и будем выводить на экран наши спрайты, а поможет нам в этом тег <use>. Для вывода первого спрайта (sprite1), в нужном нам месте делаем так:

<svg>
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

И, разумеется, для вывода второго спрайта (sprite2), делаем так:

<svg>
	<use xlink:href="sprite.svg#sprite2"></use>
</svg>

Для изменения стилей спрайтов, например, размеров, можете добавлять атрибут class в тег <svg>:

<svg class="nameClass">
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

.nameClass {

...

Жалоба