Как создавать SVG спрайты? | SVG Sprites
ฝัง
- เผยแพร่เมื่อ 6 มี.ค. 2019
- В этом видео рассмотрим два способа создания и использования SVG спрайтов. Научимся изменять стили SVG иконок и многое другое! Если вы еще не используете SVG спрайты на своем сайте и в работе, тогда пора это исправить. Это легко и быстро!
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Верстка сайта транспортной компании: brainscloud.ru/landing/logist...
Файлы урока: files.brainscloud.ru/file/kak...
Иконки: www.flaticon.com
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #svg
Мужик, ты офигенный! Я столько инфы перерыл как оптимальнее всего вставлять svg, чтобы и цветом управлять через css, и разметку не засирать, нигде внятной инфы нет, а у тебя всё по полочкам и понятно! Респект тебе и кучу бабла!)
полностью согласен
Оч круто, все по полочкам разложил, но пару моментов я упомяну, это будет полезно для тех, кто прочитает коммент =)
1) атрибут xlink:href является устаревшим и не рекомендуется, вместо него рекомендуется писать просто href как у обычной html ссылки;
2) svg тег является группой, в состав которой входит несколько тегов, если же внутри группы тег всего один, тег группы бессмысленно использовать (меньше кода писать, ура =)).
а если не было ,но целая куча ? Нужно добавить, верно?
@@alexkogotko3981 это группировка элементов по каким-то признакам. Если нет ничего общего можно и не добавлять, но, если у всех элементов один цвет? каждому из них прописывать цвет что ли? 100500 строчек кода добавится... а если все одноцветные элементы обернуть в и самому присвоить цвет? вуаля - нужный цвет у всех, кто вошел в группу =))
Скажи пожалуйста, а ты не сталкивался с проблемой отображения градиента в SVG иконках? Я почитал, что это из-за свойства display: none. Я его убрал. Но если я добавляю все иконки в index.html и подключаю тегом use, то градиент нормально работает, а если все svg иконки выношу в отдельный файл и подключаю тегом use, то градиент перестает работать.
Спустя год знай, - твой коммент всё ещё полезен. Спасибо.
@@nickangelf1325 Я бы сказал, что спустя 2 года он все еще полезен)
Очень классный формат уроков - только то, что нужно и ничего лишнего и отвлекающего. Спасибо!!!
Спасибо тебе большое! Даже спустя 3 года твой ролик очень помог. Весь ютуб перешарил и ничего не помогло, а у тебя все понятно и без воды! Еще раз спасибо
Просто огромнейшее спасибо! Все доходчиво. Боялся, что что-то не услышу и придется искать про изменение размеров и цвета, а также динамику при :hover
Дмитрий огромное спасибо Вам!!! Вы объясняете понятно, доходчиво и без воды!!! С уважением к Вам Ахмад
Спасибо! Реально просто, доходчиво и понятно всё рассказано!
Очень доступно и круто!!! Наконец все понятно! Спасибо огромное, у тебя талант! Успехов!!!
Спасибо! Очень доходчиво всё объяснил! Помогло!
По больше бы подобных видео!
Дима, спасибо! До сих пор данное видео очень полезно! Очень тебе благодарен!🤝
это лучшее, что я видел из уроков про svg спрайты
Спасибо огромное! У меня такая же фигня как и у многих здесь, сколько ресурсов не перекопал все мямлят что то себе делают и в итоге все выходит, но вообще не то что нужно было изначально, + ничего сам не понял, а тут все получилось буквально с первого раза и то что нужно! Всем своим коллегам посоветовал с этим ознакомится, так как это очень полезная информация!
Спасибо! Как и остальные в комментариях перерыл много инфы, как нормально импортировать svg чтобы иметь возможность красить их через классы. Очень помог!
Офигеть!!! Спасибо!!Даже не знал об этом, знал только что спрайты можно через css подключать background! Огромное спасибо!!!
Огромное спасибо, учусь у скилбокса, вроде прослушал материал и ничего не понятно ты за 10 минут рассказал и показал так, что это стало простым и ясным!!! Огромная благодарность!!!!
как успехи
Видос как раз в тему! Благодарю за твой труд!) Го еще видосов по верстке) И конечно же ЛАЙК!
Большое спасибо! Лаконично, по делу.
Большое спасибо 🎉 Ты показал то, что я искал давно
Красавчик просто я давно искал как так делать, щас нашел благодаря тебе чел, ты просто просто золотце
Спасибо! Видео - бомба!!!! Удачи Вам!
Спасибо! Всё по делу! Быстро и просто!
четко и ясно с примерами, спасибо!
Спасибо большое! Очень интересный урок.
Одно из поштучных действительно полезных видею ютуба.
Ты крутой чувак, всё ясно и для людей!
Спасибо, все понятно и просто!
Спасибо большое!!! Очень круто и понятно!!
Спасибо, Дмитрий! Как раз не получалось подключить спрайты из стороннего файла!
вкотре дякую пану Дмитру за чудову навчальний матеріал
Ребята всегда смотрите до конца!
Вот я посмотрел только как сделать, сделал, и 20 минут думал как же менять цвет при ховере :D
Цените время!
Чувак, такая же фигня - сделал, остановил видео, пробую и так и сяк , не получается...включаю видео - Вуаля!!!!
Просто Гений, СПАСИБО !!!
так же следует отметить, что: при повреждении(ошибке) хотя бы в одном элементе внешнего файла-спрайта бракуются сразу все элементы и не отображаются, нет полной совместимости - часть функций в svg изображении из спрайта наглухо игнорируются, например , таблицы стилей внутри svg... х.з. чего ещё. Слава яйцам - анимация воспроизводится (вроде). Основной прикол: изображения из спрайта не кешируются браузерами и при обновлении страницы браузер заново запрашивает весь файл и изображения заметно дёргаются, НО - по этой же причине, так просто изображение нельзя угнать со страницы правой кнопкой мыши "Сохранить изображение", в общем это довольно скользкий путь, имеющий как свои достоинства, так и недостатки...
где вы об этом узнали?
Спасибо вам большое!!! Очень помогли
Супер видео!!! Спасибо!!!
Царский лайк однозначно 👍
отличный контент!
Супер, спасибо!
Спасибо, было полезно
Очень понятно, спасибо
Спасибо! Четко.
Круто! Спасибо
Спасибо большое!)
Спасибо, хорошее видео
Лайк и подписка. Годно :)
Спасибо тебе за столь внятное и доходчивое объяснение. Потратил часа 3 на поиск инфы, так ничего и не разумел, и тут на, твой видос. Огромный респект.
Круто! Узнал новое. Но в одном проекте видел, вызов "шрифта" в виде SVG который был описан в body, хотя можно и отдельным файлом. Узнал сегодня из видео, что это называют спрайтом. Вызывается такой символ просто в такой способ &#число; в своем класе, например < svg > или < i class=svg >&#символ; < / i >
Не думал что можно создавать свою мнемонику с помощью svg-спрайтов. Круто! Спасибо
Дмитрий, у тебя много интересного по SVG, может стоит систематизировать - цикл за пилить? В инете мало качественной инфы. Я по твоим видео сделал у себя на сайте SVG анимацию с vivus.js
Спасибо!
Доброго времени суток. К сожалению больше Ваша конструкция подгрузки иконок из другого файла не работает. В чем может быть причина?
та же самая проблема. Место на странице занимает, но иконка не отображается. И заливку делал и всё без толку.
спасибо!
Пожалуйста сдеалейте видео про интерактивному карту, буду очень блогадарен, спасибо большое
Пасибо!
Это что, код иконки можно вставлять в html да ещё и её цвет через css менять? Балдёж)
Привет! Классное видео!!! Столкнулась с такой проблемой, это поле вокруг иконки, его можно как-то убрать? Или оно ни куда не денется и надо это просто учитывать? Заранее спасибо за ответ!) 😁
Интересно было бы увидеть, как поставить иконку со спрайта фоном...
Спасибо
Такой спрайт будет работать без интернета? Для него ссылка на сайт - это длинное название атрибута или адрес подгрузки иконок?
Ты крут
👍🏻👍🏻👍🏻
Спасибо. А как менять цвет не у круга, а например у f иконки facebook ? Когда он был встроенный, то я для path задавал класс и в css менял цвет. А когда свг иконки подключаемые, то классы не применялись. Через style="fill:#fff'" не пойдет. Потому что я хочу менять цвет при наведении например. Подскажи если знаешь.
Спасибо Вам, добрый человек!!! Уже бился как рыба об лед, почему у меня через не отображается иконка. Сделал файл спрайтов и возрадовался!
способ еще проще, но хз как он в кросбраузерах. тупо открываем иконку в IE, открываем инспектор, копируем, вставляем, работает!)))
Возможно ли с помощью спрайтов заполнить всю страницу иконками используя один файл svg? Есть один рисунок в форме квадрата и в формате svg. Нужно отобразить 10000, при чем первый должен быть в центре, а остальные вокруг против часовой стрелки. Рисунок состоит из двух слоев, и номер квадрата на втором слое. Возможно отобразить все не прописывая каждый, а использовать, например цикл или массив? А менять номер квадрата с помощью переменной.
Все работает до момента когда нужно вынести все в отдельный файл...повторил и перепроверил все уже раз 25-30, все равно не отображает. не могу понять в чем дело...я даже пробовал указать полный путь к файлу из корня диска, но никак...
Решили проблему?
Если иконка белая, на белом фоне ее будет не видно, сделай фон черным. Я пару раз из-за этого много времени потерял
без сервера svg подключеный через xlink:href не отображаются. нужен галп с установленым browser-synk
или любой другой локальный сервер
@@skywalker2090 спасибо
спасибо за объяснение.. как я отстал от жизни.. хтмл мутировал очень кардинально за последние 10 лет. SVG это получается что типа xbm hex image только для вэба
братуха я бы тебе поставил 1000 лайков сидел бы и тыкал, спасибо огромное
добрый день! Подскажи какой плагин для gulp на mac os используешь для сборки спрайта, у меня gulp-svg-sprite не работает.
Вопрос: если svg-иконка двухцветная, то как менять цвет у одного из элементов? Например, иконка в виде яблока и листочка. Яблоко красного цвета, листочек зеленого. При hover надо яблоко покрасить в желтый, а листочек в серый.
Думаю, тут свойство fill уже не прокатит. Как в таком случае поступить?
Присоединюсь к вопросу
задаете класс для конкретного path в иконке (яблоко и листочек должны быт отдельными patha-ми) и задаете ему fill
спасибо за видео
а как применить transition?
Добрый день! Спасибо за видео. Но у меня возник следующий вопрос: мне нужно кучу svg графики вывести через background, пробую следующим способом:
background: url("../img/sprite.svg#tel")
к сожалению, когда речь заходит о спрайте - данный способ не работает.
Подскажите, пожалуйста, как вывести svg изображение из спрайта через background
Оох, у меня такая же проблема! Ты надеюсь решил?
+1
здравствуйте, возможно ли применить к спрайту тени ?
Если да, то как это сделать?
А как быть с более сложными фигурами, где есть не только path и их несколько? Что-то уже и так, и так пробовал, получается, что если в sprite засовываю, то вообще не вызывается, а если напрямую в html пишу, то расползается и выглядит уже не так, как было в figma
Отлично Супер! но блин почему "при наводе"? :)
лайк
добавлю еще что без сервера svg подключеный через xlink:href не отображаются. Когда без галпа открыл был немного удивлен пропажей скриптов))
Есть варианты как вставить иконки svg не занимая так много места в html ?
видео классное, но что делать если все иконки разные на странице от размера до цвета, как прописывать свойства ? не обёртке, а самой иконке ?
При подключении иконки через use из внешнего сайта все подключённые к ней атрибуты типа линейного градиента или css из тега style тупо отваливаются. По всей видимости такой способ подойдёт если просто покрасить иконку, если использовать фильтры, градиенты, то печаль беда
Здравствуйте, можете помочь, я создаю картинки в корэле и когда экспортирую в SVG, то они сохраняются как свг формат, но имеет путь html, вот как мне их экспортировать, чтобы это был обычный свг, который открывается в соответствующих программах без браузера, помогите, пожалуйста
Привет! Открыл index.html из файлов урока в браузере, svg-иконки там уже не отображаются(( Не подскажешь с чем это связано?
При вставлении SVG добавляются еще поля вокруг SVG как можно убрать?
Почему такой метод не работает, если я хочу использовать спрайт в background?
background: url(my-url/menu.svg#home) no-repeat;
при этом через svg -> use все работает
тоже это искал, никто толком не рассказывает, нашел способ такой, в спрайте нужно иконки (массив вложенных svg элементов ) разложить (т.е. сместить по координатам геометрию)в колонку или столбик, потом для каждого svg создать view с айдишкой, и уже на нее можно сослаться в css url(my-url/menu.svg#home), т.е. #home это ид атрибут тега view вюбокс которого направлен на нужный svg в общем спрайте, тогда работает
Привет. Я всё еще с тем же вопросом. Когда я выношу информацию с svg во внешний файл, он просто не работает, и выдает ошибку. Может знает кто, в чём может быть причина?
Сейчас уже по классу на svg стили не применяются, только по уже заранее прописанному классу в коде самой svg-картинки!
С чего вы это взяли?
Сделал все по инструкции , но при display="none" я вижу толь хитбокс картинки а саму картинку нет.
Просто часы поисков привели меня сюда. Черт, я нашел алмаз.
Почему может не работать SVG картинка когда я переношу её в отдельный файл? Всё делаю как по видео, а иконка всё равно не появляется?
Та же история..
Сперва думалось, что сам поди кривой, хотя где там косячить в трех строчках кода, непонятно. Окончательно отмел эту версию, скачав исходники урока - там всё то ж самое - ниче не отображается. Видать, в новых браузерах что-то поменялось в этом отношении, надо гуглить..
А что если я пишу и у меня попадает иконка?
Здравствуйте! У меня не меняется цвет круга, почему? Подскажите пожалуйста, я новичок.
Спасибо большое. Но почему в 3:00 display:none?
чтобы не отображалось
Кстати у Вас то-же самое.Я скачал исходники и открыл индексный файл.Иконки не отображаются.
Да , иконки не отображаются ! Что делать ?
Как добавить иконки уже в существующий спрайт?
А что делать если path нет? ну например png иконка в макете а её надо вставить как svg и когда её пытаешься экспортировать в формате svg то path нет там, да скорее всего дизайнер там виноват но и конвертировать - не выходит, тогда как быть?
Нашли решение проблемы?
Сегодня кучу иконок в спрайт засунул, но с долбанным плюсом весь день провозился и в итоге плюнул и через 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 с кодом графики? Просто где-то, чтобы не мешалось или есть какие-то правила хорошего тона (красивого кода)?
я размещаю обычно в начале документа, сразу после открытия тега body
@@BrainsCloud спасибо
а как сделать svg спрайты с помощью pug + gulp ?
Для тех у кого не выводится и кто не заметил: нужно запускать через Live Preview
А по какой собственно причине обычная браузерная сессия не ворочает это дело как до́лжно?
@@bslday Если вкратце, то это из-за нарушения правил CORS.
Если я вставлю svg'шки такими способами на страницу, они закешируются? Я знаю, что inline не кешируется. А ваш способ?
Я проверил. Кешируются. Круто!
Если рисунок имеет две векторные детали, как менять цвет по отдельности?
Хороший вопрос, погуглил, нашел такое решение. github.com/jesstelford/color-svg-sprite
подскажите, не отображается ни в одном браузере. пробовал с несколькими картинками, за вами повтрял с вашей картинкой, а итог один - Не видит браузер и все !!!
без сервера svg подключеный через xlink:href не отображаются. нужен галп с установленым browser-synk
@Сергій browser-sync это плагин галп, он создает локальный сервер для авто обновления браузера, без сервера svg не работает, ты можешь запустить страницу через любой локальный сервер
Странно! Когда я работаю в редакторе то иконка отображается.Но когда я открываю index.html в браузере то иконки уже нет.Почему?
если просто открывать так не работает, нужно запускать локальный сервер
Спасибо за ответ...сегодня же попробую