Как браузер обрабатывает SVG
Предыстория. Предположим имеется веб страница на которой все SVG элементы запакованы в спрайт и положены возле закрывающегося тега <body> По необходимости они вызываются через <use> в <html> разметке документа.
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
При создании страницы, согласно документации все теги клонируют унаследованный элемент (в моем случаи который храниться в спрайте), и в этом месте у меня возникло недопонимание по поводу производительности. Если элемент клонируется, то он раздувает DOM дерево? Видит ли google бот эти полотна svg кода при парсинге страницы при индексации ? Что будет производительнее - подключить 5 иконок через тег <use> или же предположим подключить их через <div> с свойством background-image="../my-icon.svg" (там запрос происходит один раз, а потом отдается из кэша браузера)
Ответы (1 шт):
svg для google бота такая же картинка как и png, причем в плане SEO и скорости сайта она даже лучше чем png. СВГ код он не индексирует, читает только svg-заголовок - берет его вместо alt текста обычной картинки. В основном свг подключают через div, use лично я не встречал.