Протестировал разные сценарии, что могу сказать по итогу.
Случай 1
Да, работает отлично только с same-origin
, т.е. только с тем же доменом. Как не изгаляйся, из под use
в svg
с внешних источников загрузить не получится.
Подробнее на Mozilla, третий абзац.
Но, выдумать кое-что интересное, всё же, можно. Например загрузить SVG как текст через fetch
в js, затем создать SVG через document.createElementNS
и работать с ним, ссылаясь на необходимые символы. Но, согласитесь, это изврат. К тому же загрузка SVG даже через JS будет ерепениться, об этом подробнее дальше.
Случай 2
Опять же, если тут внешний ресурс, то не так всё строго. Если Access-Control-Allow-Origin
позволяет загрузить, то загрузится. Если не позволяет, то можно использовать что-то вроде данного прокси, который проставляет нужный header, но на постоянной основе так делать не станешь, да и упомянутый ресурс даёт пользоваться временно for debugging purposes.
Что касается утверждения "Does not work at all". На самом деле работает, но не с symbol
.
Символы находятся в shadow DOM, доступ к которому есть внутри SVG, как в случае 1, но CSS его не видит, поэтому выдаёт пустую картинку.
CSS в данном виде отлично работает с ID селектором если помещать иконки не в symbols
, а в view
. Чтобы было понятно о чём речь, на примере двух иконок:
<svg viewBox="0 0 104 52" xmlns="http://www.w3.org/2000/svg">
<defs>
<view id="some_icon" viewBox="52 0 52 52">
<title>Some icon</title>
</view>
<view id="anywhere_chat" viewBox="0 0 52 52">
<title>Anywhere chat</title>
</view>
</defs>
<path d="M26 2.7c-13.21 0-24 9.62-24 21.59v.42a20.64 20.64 0 007.71 15.43l.32.27v.08a11.05 11.05 0 01-3.1 4.67 1.79 1.79 0 001.45 3.12l1.17-.17.53-.08c4.76-.73 8.13-1.59 10.23-2.66l.15-.08.5.11a27.38 27.38 0 005.06.48c13.21 0 24-9.62 24-21.59S39.21 2.7 26 2.7z" id="anywhere_chat1"/>
<path d="M 54 25 C 54 13 65 4 78 4 C 92 4 102 13 102 26 C 102 38 91 47 78 48 C 74 48 70 46 66 44 C 65 44 65 44 64 44 L 56 47 C 55 48 54 47 54 46 L 57 38 C 58 37 58 37 57 36 C 55 33 54 29 54 25 Z M 66 17 C 65 17 64 17 64 18 C 64 19 65 20 66 20 L 93 20 C 94 20 95 19 95 18 C 95 17 94 17 93 17 L 66 17 Z M 64 26 C 64 25 65 25 66 25 L 87 25 C 88 25 89 25 89 26 C 89 27 88 28 87 28 L 66 28 C 65 28 64 27 64 26 Z M 66 33 C 65 33 64 34 64 35 C 64 36 65 36 66 36 L 80 36 C 81 36 82 36 82 35 C 82 34 81 33 80 33 L 66 33 Z" fill-rule="evenodd"/>
</svg>
Таким образом можно хранить иконки в одном SVG и обращаться в коллекции к определённой через ID селектор. Но для этого придётся переформатировать изначальный SVG на вашем сайте и разбить на view
. Но как-то слишком сложно, даже если писать под это скрипт.
Также можно, опять же, изгаляться через JS, загрузить искомый SVG, найти по ID текстово нужную иконку, заменить symbol
на svg
и создать как отдельный SVG, затем использовать. И, опять, это слишком муторно и сложно, на странице для пользователя такое использовать через чур угрюмо.
В итоге
Можно использовать первый вариант в пределах одного домена, почему бы и нет. Но, искомый файл symbols.svg весит 338kb, многовато для иконок на мой взгляд.
IMHO, лучше разбить на отдельные файлы и использовать каждую иконку по необходимости. Так и вес будет меньше, и второй способ будет работать. Преобразование не должно быть сложным, достаточно регулярками выцепить symbol
, заменить на svg
, взять id
как имя файла и убрать из строки, сохранить отдельными файлами.
Прочие варианты возможны, но это сродни извращению.
file://
никогда не позволит подгрузить, только если поднимать локальный сервер и ссылаться на SVG в нём, и то, вероятно, потребуется повозиться. С внешних источников можно грузить приcrossorigin="anonymous"
, если, конечно, север пришлётheader
, т.е. не для всех серверов. По второму варианту надо посмотреть что происходит.Access-Control-Allow-Origin: *
и логотип подгружается.