Можно и спрайтом, чтобы если и устраивать свалку - то в одном месте.)))

Этот способ не хвалят, т.к. он более ресурсоёмкий для компьютера (когда загруж. сайт). Или это миф?

а хтмл разметка тоже ресурсоемкая процедура для компьютера?

Хз. Знал бы ответ - не спрашивал бы).

на какие то чуть заметные для человека показатели может повлиять только сильная вложенность элементов. И то, там скорее это будет влиять на расчет стилей.
Единственное, чем выигрывает вариант с встройкой через img - это кеширование. Но в твоем случае это настолько незначительно, что разницы не будет. Будь у тебя спрайт из 100+ иконок, то загружать из кеша его было бы предпочтительнее, чем напрямую встраивать. Но опять же все зависит от задачи)

Ясно. Спасибо 😊.

эээ а чем рендеринг свг из файла отличается от инлайнового?)

Не знаю. Вопрос изначально простой: прописать иконки соцсетей и сделать изменение цвета одновременно с ссылкой, в которой эти СВГ прописаны.
Столкнулся с вопросом как правильно в этом случае прописать эти иконки.
Начал гуглить как лучше.
В том, что находил пишут примерно в таком стиле:

"Если хочется выжать максимум из SVG, используйте <object>. В качестве альтернативы подходит встроенный SVG, который не повлияет на HTTP-запрос, но не будет кешироваться. Если SVG выступает в роли обычного изображения, то подойдёт <img> или background-image. Можно использовать <iframe> и <embed>, но я не думаю, что это лучшие варианты, и поэтому не буду больше заострять на них внимание."

Вот и решил переспросить у знающих людей как лучше 😊.

Вопрос к размеру самой иконки. Если она не большая, то не страшно в инлайне. Если хитровыдуманая, и ее кода больше чем самого html то да, лучше отдельно.

Ок, спасибо.

Почему никто не рассмотривает варианта выносоного СВГ-спрайта?

Я работаю с инлайновыми спрайтами уже где-то месяца 2 и довольна как слон.

https://wild-berries.online/epoxy_wb/ - мягко говоря адово тяженький лендос. Я спрайт вынесла в бади...(((

я рассматривал такой вариант года два назад) но ие не понимает таких приколов, поэтому для него приходилось изощряться..

Ну я ж бэкэндер и о фронте больше рассуждаю как потребитель контента. Если с траница грузит мегабайты кода чтобы нарисовать простой интерфейс - для меня эти плохо. :) и мне плевать что эта реализация была удобной для фронта

Искренне сочувствую, что приходится поддерживать ИЕ...😓

Вот тут я всю кожу себе сожрала....
У СВГ есть заноза со сложными градиентами. Они не кросбраузерны, отрисовываются как попало то в Хроме, то в Лисе, то в Сафари...
Чтобы не попасть на 9+1 круг ада для фронтов, для себя я этот вопрос решила так

1. Если СВГ сложный и длина его кода превышает разметку страницы - делаю ... png - ТОЛЬКО НЕ ПРИСТРИЛИТЕ 🙏

2. Если СВГхи простенькие, нет адских заливок и ваще это больше похоже на кастомный фонт - выношу в sprite.svg или отдельный файл.

3. Если мне необходима анимация СВГ - отдельный файл

4. Если у меня 2-3 свг, которые используются несколько раз с небольшими изменениями (например отдельные элементы убиваются на отдельных экранах) - инлайню.

Пока работаю так... Пока не подводило...
Если где не права - прошу, поправьте!
Я с СВГ - на ВЫ!

Особлива после ... Эм... фразы Макеева, про... эм... ПРОГРАММИРОВАНИЕ на свг... ШУТКА КОНЕЧНО... Но углубившись в его спеку - уже не так смешно....

"1. Если СВГ сложный и длина его кода превышает разметку страницы - делаю ... png" - а просто как файл .svg почему не загрузить через img? обычно даже так вес вектора меньше пнгэхи..

"3. Если мне необходима анимация СВГ - отдельный файл" - это речь про SMIL-анимацию? Если да, то понятно. А если управление анимацией через CSS идет, тогда вопроооос...

1. Поддерживаю. Но если это какая-то иконка 100х100 и таких с дюжину - я лучше по старинке.)))

3. Тут я пока поступаю так, что у меня ВЕСЬ код и css, и js внутри файла. Получается что-то типа gif-ки, т.е. цельный кусок, в котором отдельные части СВГ анимируются keyframe.(((((

про SMIL-анимацию - только начинаю раскуривать. Адски круто!!!

Я пока пробую варианты. Смотрю что лучше. Под каждый проект подбираю инструменты.