Как создавать SVG спрайты? | SVG Sprites 

полностью согласен

а если не было ,но целая куча ? Нужно добавить, верно?

@@alexkogotko3981 это группировка элементов по каким-то признакам. Если нет ничего общего можно и не добавлять, но, если у всех элементов один цвет? каждому из них прописывать цвет что ли? 100500 строчек кода добавится... а если все одноцветные элементы обернуть в и самому присвоить цвет? вуаля - нужный цвет у всех, кто вошел в группу =))

Скажи пожалуйста, а ты не сталкивался с проблемой отображения градиента в SVG иконках? Я почитал, что это из-за свойства display: none. Я его убрал. Но если я добавляю все иконки в index.html и подключаю тегом use, то градиент нормально работает, а если все svg иконки выношу в отдельный файл и подключаю тегом use, то градиент перестает работать.

Спустя год знай, - твой коммент всё ещё полезен. Спасибо.

@@nickangelf1325 Я бы сказал, что спустя 2 года он все еще полезен)

как успехи

где вы об этом узнали?

Чувак, такая же фигня - сделал, остановил видео, пробую и так и сяк , не получается...включаю видео - Вуаля!!!!

Не думал что можно создавать свою мнемонику с помощью svg-спрайтов. Круто! Спасибо

та же самая проблема. Место на странице занимает, но иконка не отображается. И заливку делал и всё без толку.

Решили проблему?

Если иконка белая, на белом фоне ее будет не видно, сделай фон черным. Я пару раз из-за этого много времени потерял

без сервера svg подключеный через xlink:href не отображаются. нужен галп с установленым browser-synk

или любой другой локальный сервер

@@skywalker2090 спасибо

Присоединюсь к вопросу

задаете класс для конкретного path в иконке (яблоко и листочек должны быт отдельными patha-ми) и задаете ему fill

Оох, у меня такая же проблема! Ты надеюсь решил?

+1

С чего вы это взяли?

тоже это искал, никто толком не рассказывает, нашел способ такой, в спрайте нужно иконки (массив вложенных svg элементов ) разложить (т.е. сместить по координатам геометрию)в колонку или столбик, потом для каждого svg создать view с айдишкой, и уже на нее можно сослаться в css url(my-url/menu.svg#home), т.е. #home это ид атрибут тега view вюбокс которого направлен на нужный svg в общем спрайте, тогда работает

чтобы не отображалось

я размещаю обычно в начале документа, сразу после открытия тега body

@@BrainsCloud спасибо

Та же история.. Сперва думалось, что сам поди кривой, хотя где там косячить в трех строчках кода, непонятно. Окончательно отмел эту версию, скачав исходники урока - там всё то ж самое - ниче не отображается. Видать, в новых браузерах что-то поменялось в этом отношении, надо гуглить..

Нашли решение проблемы? Сегодня кучу иконок в спрайт засунул, но с долбанным плюсом весь день провозился и в итоге плюнул и через img поставил

@@Dik131WZD не помню, можно заинлайнить svg , то есть сделать её фоном у какого-либо элементы через mask к примеру mask: url('/src/images/products.svg') 50% 50% no-repeat; -webkit-mask: url('/src/images/products.svg') 50% 50% no-repeat; и через стили color,background - манипулировать цветом ( не через fill и т.д) И прошу обратить внимание на то что её нужно заинлайнить, а не тупо вставить как фон. В крайнем случае - заменить иконку или заебашить png - похую.

@@llwebstylell242 ну, вот хотел крайний случай избежать. Спасибо за совет. Попробую

@@Dik131WZD в результате/в инспекторе должно быть что-то типо mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgOEMwIDcuNzM0NzggMC4xMDUzNTcgNy40ODA0MyAwLjI5Mjg5MyA3LjI5Mjg5QzAuNDgwNDMgNy4xMDUzNiAwLjczNDc4NCA3IDEgN0gzQzMuMjY1MjIgNyAzLjUxOTU3IDcuMTA1MzYgMy43MDcxMSA3LjI5Mjg5QzMuODk0NjQgNy40ODA0MyA0IDcuNzM0NzggNCA4VjEzQzQgMTMuMjY1MiAzLjg5NDY0IDEzLjUxOTYgMy43MDcxMSAxMy43MDcxQzMuNTE5NTcgMTMuODk0NiAzLjI2NTIyIDE0IDMgMTRIMUMwLjczNDc4NCAxNCAwLjQ4MDQzIDEzLjg5NDYgMC4yOTI4OTMgMTMuNzA3MUMwLjEwNTM1NyAxMy41MTk2IDAgMTMuMjY1MiAwIDEzVjhaTTYgNEM2IDMuNzM0NzggNi4xMDUzNiAzLjQ4MDQzIDYuMjkyODkgMy4yOTI4OUM2LjQ4MDQzIDMuMTA1MzYgNi43MzQ3OCAzIDcgM0g5QzkuMjY1MjIgMyA5LjUxOTU3IDMuMTA1MzYgOS43MDcxMSAzLjI5Mjg5QzkuODk0NjQgMy40ODA0MyAxMCAzLjczNDc4IDEwIDRWMTNDMTAgMTMuMjY1MiA5Ljg5NDY0IDEzLjUxOTYgOS43MDcxMSAxMy43MDcxQzkuNTE5NTcgMTMuODk0NiA5LjI2NTIyIDE0IDkgMTRIN0M2LjczNDc4IDE0IDYuNDgwNDMgMTMuODk0NiA2LjI5Mjg5IDEzLjcwNzFDNi4xMDUzNiAxMy41MTk2IDYgMTMuMjY1MiA2IDEzVjRaTTEyIDFDMTIgMC43MzQ3ODQgMTIuMTA1NCAwLjQ4MDQzIDEyLjI5MjkgMC4yOTI4OTNDMTIuNDgwNCAwLjEwNTM1NyAxMi43MzQ4IDAgMTMgMEgxNUMxNS4yNjUyIDAgMTUuNTE5NiAwLjEwNTM1NyAxNS43MDcxIDAuMjkyODkzQzE1Ljg5NDYgMC40ODA0MyAxNiAwLjczNDc4NCAxNiAxVjEzQzE2IDEzLjI2NTIgMTUuODk0NiAxMy41MTk2IDE1LjcwNzEgMTMuNzA3MUMxNS41MTk2IDEzLjg5NDYgMTUuMjY1MiAxNCAxNSAxNEgxM0MxMi43MzQ4IDE0IDEyLjQ4MDQgMTMuODk0NiAxMi4yOTI5IDEzLjcwNzFDMTIuMTA1NCAxMy41MTk2IDEyIDEzLjI2NTIgMTIgMTNWMVoiIGZpbGw9IiM5Q0EzQUYiLz4KPC9zdmc+Cg==) 50% 50% no-repeat; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgOEMwIDcuNzM0NzggMC4xMDUzNTcgNy40ODA0MyAwLjI5Mjg5MyA3LjI5Mjg5QzAuNDgwNDMgNy4xMDUzNiAwLjczNDc4NCA3IDEgN0gzQzMuMjY1MjIgNyAzLjUxOTU3IDcuMTA1MzYgMy43MDcxMSA3LjI5Mjg5QzMuODk0NjQgNy40ODA0MyA0IDcuNzM0NzggNCA4VjEzQzQgMTMuMjY1MiAzLjg5NDY0IDEzLjUxOTYgMy43MDcxMSAxMy43MDcxQzMuNTE5NTcgMTMuODk0NiAzLjI2NTIyIDE0IDMgMTRIMUMwLjczNDc4NCAxNCAwLjQ4MDQzIDEzLjg5NDYgMC4yOTI4OTMgMTMuNzA3MUMwLjEwNTM1NyAxMy41MTk2IDAgMTMuMjY1MiAwIDEzVjhaTTYgNEM2IDMuNzM0NzggNi4xMDUzNiAzLjQ4MDQzIDYuMjkyODkgMy4yOTI4OUM2LjQ4MDQzIDMuMTA1MzYgNi43MzQ3OCAzIDcgM0g5QzkuMjY1MjIgMyA5LjUxOTU3IDMuMTA1MzYgOS43MDcxMSAzLjI5Mjg5QzkuODk0NjQgMy40ODA0MyAxMCAzLjczNDc4IDEwIDRWMTNDMTAgMTMuMjY1MiA5Ljg5NDY0IDEzLjUxOTYgOS43MDcxMSAxMy43MDcxQzkuNTE5NTcgMTMuODk0NiA5LjI2NTIyIDE0IDkgMTRIN0M2LjczNDc4IDE0IDYuNDgwNDMgMTMuODk0NiA2LjI5Mjg5IDEzLjcwNzFDNi4xMDUzNiAxMy41MTk2IDYgMTMuMjY1MiA2IDEzVjRaTTEyIDFDMTIgMC43MzQ3ODQgMTIuMTA1NCAwLjQ4MDQzIDEyLjI5MjkgMC4yOTI4OTNDMTIuNDgwNCAwLjEwNTM1NyAxMi43MzQ4IDAgMTMgMEgxNUMxNS4yNjUyIDAgMTUuNTE5NiAwLjEwNTM1NyAxNS43MDcxIDAuMjkyODkzQzE1Ljg5NDYgMC40ODA0MyAxNiAwLjczNDc4NCAxNiAxVjEzQzE2IDEzLjI2NTIgMTUuODk0NiAxMy41MTk2IDE1LjcwNzEgMTMuNzA3MUMxNS41MTk2IDEzLjg5NDYgMTUuMjY1MiAxNCAxNSAxNEgxM0MxMi43MzQ4IDE0IDEyLjQ4MDQgMTMuODk0NiAxMi4yOTI5IDEzLjcwNzFDMTIuMTA1NCAxMy41MTk2IDEyIDEzLjI2NTIgMTIgMTNWMVoiIGZpbGw9IiM5Q0EzQUYiLz4KPC9zdmc+Cg==) 50% 50% no-repeat; пробуйте, поддержка у mask в принципе не плохая, на caniuse можно глянуть

@@llwebstylell242 спасибо

Да , иконки не отображаются ! Что делать ?

Я проверил. Кешируются. Круто!

без сервера svg подключеный через xlink:href не отображаются. нужен галп с установленым browser-synk

@Сергій browser-sync это плагин галп, он создает локальный сервер для авто обновления браузера, без сервера svg не работает, ты можешь запустить страницу через любой локальный сервер

Хороший вопрос, погуглил, нашел такое решение. github.com/jesstelford/color-svg-sprite

если просто открывать так не работает, нужно запускать локальный сервер

Спасибо за ответ...сегодня же попробую

А по какой собственно причине обычная браузерная сессия не ворочает это дело как до́лжно?

@@bslday Если вкратце, то это из-за нарушения правил CORS.