Как правильно подключить иконки SVG на сайт

@maxon-by · Регистрация: 06.10.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте, дорогие форумчане!

В процессе верстки макета появился вопрос про SVG - как правильно подключить, если мне нужно прописывать стили для наведения мыши?

Можно конечно в backgroung-image прописать два варианта....но это же не будет совсем правильным решением (при первой загрузке будет дополнительно подгружаться и вторая картинка SVG на ховере, да и 2 картинки прописывать - это не очень круто в 2к18 )

Как правильно подключить иконки SVG на сайт

и так ховер должны выглядеть иконки

Есть же вариант их сделать в виде шрифта, но это тоже считаю не вариант

Как же сделать правильно?

вот мой код с соц.иконками - подключил пока напрямую

HTML5
1
2
3
4
5
6
7
8
<!-- Icons-->
                <div class="icon-wrap">
                    <div class="icon"><a href="#"><img src="img/ico-1.svg" alt=""></a></div>
                    <div class="icon"><a href="#"><img src="img/ico-2.svg" alt=""></a></div>
                    <div class="icon"><a href="#"><img src="img/ico-3.svg" alt=""></a></div>
                    <div class="icon"><a href="#"><img src="img/ico-4.svg" alt=""></a></div>
                    <div class="icon"><a href="#"><img src="img/ico-5.svg" alt=""></a></div>
                </div>

Спасибо всем за ответы!!!!

@galawar · 22.04.2018, 22:05

Для такого использую SVG-спрайт

@maxon-by · 22.04.2018, 23:23 **[ТС]**

galawar, а вы спрайт в отдельном файле подключайте или сразу в хедер напрямую?

@galawar · 22.04.2018, 23:37

Не надо ничего в хедере подключать. Cпрайт лежит в папке images/sprite/sprite.svg
На страницах иконки выводятся так:

HTML5
1
2
3
<svg class="icon icon-clock">
  <use xlink:href="/images/sprite/sprite.svg#clock"></use>
</svg>

Стили для иконок:

CSS
1
2
3
.icon-clock:hover {
  fill: #f00;
}

@maxon-by · 24.04.2018, 00:25 **[ТС]**

galawar, Спасибо! А вы галпом пользуетесь? Подскажете для спрайта svg расширение?

@galawar · 24.04.2018, 00:33

maxon-by, да cпрайт собирается с помощью gulp и gulp-svg-sprite, gulp-svgmin, gulp-cheerio, gulp-replace

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	22.04.2018, 22:05
	Для такого использую SVG-спрайт 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	22.04.2018, 23:23 [ТС]
	galawar, а вы спрайт в отдельном файле подключайте или сразу в хедер напрямую? 0

@maxon-by 16 / 16 / 5 Регистрация: 06.10.2015 Сообщений: 245
	24.04.2018, 00:25 [ТС]
	galawar, Спасибо! А вы галпом пользуетесь? Подскажете для спрайта svg расширение? 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	24.04.2018, 00:33
	maxon-by, да cпрайт собирается с помощью `gulp` и `gulp-svg-sprite, gulp-svgmin, gulp-cheerio, gulp-replace` 1

Как правильно подключить иконки SVG на сайт

Решение