Как добавить svg?

Question

[Ratibor]

Доброе время суток! Как добавить svg-изображение таким образом, что бы с ним можно было взаимодействовать с помощью внешней таблицы стилей (CSS) и например при наведении (:hover) изменить цвет заливки или обводки, но при этом запрещено использовать inline-svg подход.

Comments

[tema_sun]

Почему нельзя инлайн?

[Ratibor]

условие вопроса такое.

Answer 1

[Антон Спирин]

Можно использовать SVG спрайты и тег use. Это не совсем inline-svg.
Про fill, currentColor и способах их совместного использования, думаю слышали.

Answer 2

[forspamonly2]

у svg не бывает интерактивности когда он вставлен картинкой или фоном. только если он инлайновый или вставлен как object. если инлайновые вам по какой-то причине не подходят, ставьте в своём html

<object data="file.svg" type="image/svg+xml"></object>

а css-ку внутри svg подключайте так

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="file.css" ?>
<svg xmlns="http://www.w3.org/2000/svg">