Теория
Если спрайт, в котором находится иконка является отдельным файлом, то необходимо сначала добавить этот файл в HTML
<object type="image/svg+xml" data="images/svgdefs.svg">
Your browser does not support SVG
</object>
И только потом вызывать иконку по ID
из этого спрайта:
<svg>
<g transform="translate(-452 -1183)"><use fill="#a86ac7" xlink:href="svgdefs.svg#plus"></use></g>
</svg>
Note
Экспериментальные технологии Chrome
в этом вызове допускают не указывать имя файла, в котором хранится иконка, но для более полной поддержки всеми браузерами лучше указывать имя файла
Практика
Теги <symbol id="plus">
c ID
используются по двум показаниям:
- svg код внутри этих тегов скрывается до вызова командой
<use>
и в
одном файле спрайте можно поместить несколько иконок с разными ID
- Каждому тегу
<symbol id="icon2" viewBox="0 0 24 24">
можно
присвоить свой viewBox
, который позволяет отдельно масштабировать
каждую иконку.
Ниже код вашей иконки. Аккуратно убрал лишнее.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
<g transform="translate(-452 -1183)">
<use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
</g>
</svg>
Окружаем код <symbol id="plus">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<symbol id="plus" >
<path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
</defs>
<g transform="translate(-452 -1183)">
<use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
</g>
</symbol>
</svg>
Как и ожидалось всё скрывается до вызова с помощью <use>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<symbol id="plus">
<path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
<g transform="translate(-452 -1183)">
<use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
</g>
</symbol>
</svg>
<svg>
<use xlink:href="#plus" />
</svg>
Теперь можно вызывать эту иконку сколько угодно раз
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<symbol id="plus">
<path id="qq8ea" d="M460 1193.998a1.002 1.002 0 0 0 0 2.004h2.999V1199a1.002 1.002 0 0 0 2.003 0v-2.998H468a1.002 1.002 0 1 0 0-2.004h-3V1191a1.002 1.002 0 0 0-2.002 0v2.998zm3.998 12.002c-6.064 0-10.998-4.934-10.998-10.998 0-2.941 1.145-5.705 3.222-7.781a10.92 10.92 0 0 1 7.776-3.223 10.93 10.93 0 0 1 7.781 3.223 10.936 10.936 0 0 1 3.222 7.781c0 2.937-1.145 5.7-3.222 7.775a10.93 10.93 0 0 1-7.781 3.223z"/>
<g transform="translate(-452 -1183)">
<use fill="#a86ac7" stroke="#a86ac7" xlink:href="#qq8ea"/>
</g>
</symbol>
</defs>
</svg>
<svg>
<use xlink:href="#plus" />
<use xlink:href="#plus" transform="scale(2)" x="15" />
<use xlink:href="#plus" transform="scale(3)" x="30" />
</svg>