Как использовать svg?

Question

[WebDev]

Извините за глупый вопрос, но объясните пожалуйста разницу:
Есть файл img.svg - картинка, вставляю на страницу через img
Есть файл icons.svg, открыть его ничем не получается, но в нем много иконок, которые доступны через #, подключаются они вот таким образом:

<svg>
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#facebook"></use>
</svg>

Во втором случае я могу для тега svg задавать стили, и, например, менять цвет svg картинки.
А одиночный файл img.svg я не могу подключить через теги svg и use.
Вопросы: чем отличаются одиночные файлы от сгруппированных? Как или чем эти файлы группируют? Чем их можно открыть? И как мне работать с одиночным файлом через тег svg, чтобы менять его стили?
Спасибо!

Comments

[Adamos]

"icons.svg, открыть его ничем не получается" - плохо искали.
Мало того, что он действительно текстовый, так это еще и родной формат для векторного редактора Inkscape, например.

[Артём Щурин]

https://habrahabr.ru/post/230443/
не факт, что по теме не оч понял вопроса

Answer 1

[Дмитрий Христоев]

https://www.youtube.com/watch?v=S0OnkpIoEyQ

Comments

[WebDev]

Спасибо, помогло!

Answer 2

[svgartru2016]

icons.svg#facebook
Этот файл является спрайтом, в котором лежат иконки, каждая из которых обернута скорее всего в тег <symbol id="facebook"> .... </symbol>
Для каждой иконки свой уникальный идентификатор. Тег symbol скрывает все, что лежит внутри, также как и тег defs. Поэтому вы и не видите иконки открывая броузером файл icons.svg Иконки становятся видны, когда их вызывают с помощью use

<!-- когда спрайт находится внутри файла -->
<use xlink:href="#facebook"></use> 
<!-- когда спрайт находится вне файла -->
<use  xlink:href="/img/icons/icons.svg#facebook"></use>

Как менять стили SVG из внешней таблицы CSS можно посмотреть здесь