Когда я вставляю несколько свг на страницу, то у меня все Dom-элементы, которые идут после свг исчезают из дерева. Их просто нет в html-документе. Кто-нибудь сталкивался с таким? Нормально работает только вставка с помощью тега img и object, все остальные способы ломают разметку.
У меня вопросы по поводу svg. Я использую Вашу сборку gulp, где есть svg спрайты. Мне часто попадаются иконки, которые просто не отображаются. 1) Пишу, как сказано в гайде, g-use, раскрывается сниппет, туда пишу id иконки из папки svg, но иконка не отображается, навожу на тэг в инструментах разработчика и там отображено 0 пикселей. Немного поискал информацию, некоторые пишут, что svg иконки ломаные, поэтому ничего не поделать. Другие иконки появляются чёрными в виду удаления всяких fill, stroke и style, они настраиваются, всё окей. 2) Но тут тоже нюанс, если svg картинка огромная и/или имеет разные цвета (к примеру, мне попалась svg картинка с мордой лисы какой-то компании metamask) то её восстановить уже не получается, так как слишком много тэгов с разными цветами, и я так понимаю, что в данном случае лучше отказаться от спрайта и просто вставлять svg. Что делать в обоих случаях?
Здравствуйте. По поводу первого момента надо смотреть, почему свг вообще не показывается. По поводу второго - да, просто не кладите её в папку svg и все
Оказывается проблема была следующая: - нужно перезапускать gulp. svgSprites почему-то не пересобирается после добавления новой svg иконки в папку svg, хотя в терминале видно, как срабатывает функция svgSprites.
Приветствую! У меня странный глюк с svg происходит: когда экспортирую его из Иллюстратора, то выглядит он правильно, но если его забросить в Adobe XD и экспортировать потом оттуда, то в объектах пропадают дырки. То есть, например, буква О превращается в сплошной круг (без пустоты внутри). Любая пустая область в объектах просто схлопывается. НО, если SVG изначально делается в Inkscape и проходит ту же процедуру импорта-экспорта через Adobe XD, то с ним таких глюков нет и дырки в объектах никуда не пропадают. Не знаете, почему может быть такое? Как сделать, чтобы отверстия в объектах в SVG не исчезали?
Спасибо, очень полезный урок! Как раз недавно столкнулся с проблемой, очень много всяких диаграмм в презентациях делается на svg, на сайтах.. Также с hover эффектом как на карте России, только вместо площадей, часть графика (шаг I, шаг II итд)
Автор, благодарю за полезное видео. Теперь научился. Осталось только порисовать, и очередной стек пойдёт в резюме. Рисовать карту РФ это, конечно, вы круто сделали. Видно, что хороший дизайнер. Желаю успехов и хорошей работы!
Спасибо за ролик. Добавлю от себя что не обязательно svg весит меньше чем например png. Я сгенерил svg по подобию аналогичного png и вышла такая картина logo_128_1.svg 391 B 13 ms logo_128_1.png 390 B 11 ms
Классное видео) Особенно в конце про карту из svg - буду юзать! По поводу оптимизации - лично я вставляю иконку через img, но к странице у меня подключён скрипт, который отвечает за деформацию из img в svg. И всё - никаких спрайтов и лишнего кода. Единственным минусом является то, что все изменения увидеть можно только в онлайне, потому что скрипт преобразовывает в svg только в онлайне) Но это вообще не страшно!
Видео классное, автор, а ты мог бы сделать уроки как стилизовать видео и аудио и добавить к ним плей листы и прочие современные плюшки как например на ютубе?
А вот такая задачка svg спрайт в отдельном файле, и нужно подключить иконку, простой шарик заполненный градиентом, справа от него текст. При подключении виден только текст, а градиента нет
@@maxgraph в этом то и проблема, по ТЗ нужно подключать все возможные иконки из спрайта, понятное дело за исключением простых картинок по типу фото и тд. Намучился с этими спрайтами уже. Спасибо за контент и за то, что отвечаешь
@@maxgraph хз, отборочное на трудоустройство, но у меня горит уже с этих спрайтов, можно, конечно, в разметке через юз, но во-первых не хочется засорять код, а во-вторых хочется через ::after или :: before
Svg спрайт на фон можно вешать background-image: url(../images/icons/icons.svg#libra); Есть вопрос как можно path готовой svg иконки подогнать под размер svg. Например я ставлю svg 34 и 21 размер, фактически иконка получается 16 и 10, preserveAspectRatio="none" не помогает, остается задавать размер svg намного больше, но не удобно ее позиционировать.
Спрайт не работает, я и спрашивал у Макеева того же, и сам пытался. Не хочет) насчет размера - играться с preserveAspectRatio еще, или с viewBox. Но я нередко просто прошу дизайнера переделать)
@@maxgraph Странно, но вот я закинул через фон из свгспрайта cdn1.savepice.ru/uploads/2020/8/15/2750fa72bb0b2f047d85ff1f0858008b-full.jpg, в левом углу письмо, на before...
@@maxgraph Спасибо! Ты первый, кто ответил на мой коммент из всех блогеров, кому я задавал вопросы!! Есть ведь и бесплатные хостинги на первое время найти?
Благодарю!
О, я тоже ждал это видео)
Когда я вставляю несколько свг на страницу, то у меня все Dom-элементы, которые идут после свг исчезают из дерева. Их просто нет в html-документе. Кто-нибудь сталкивался с таким? Нормально работает только вставка с помощью тега img и object, все остальные способы ломают разметку.
в тестовом задании в логотипе нужно передвинуть красную букву на место. как это можно сделать?
спасибо большое за градиент :)
14:30 проще говоря координаты центра
То есть, если использовать спрайты, то конкретно в плане запросов на сервер у SVG нет преимуществ перед другими форматами изображений?
Можно менять цвет иконок ещё
Морда микки мауса)))
Вот и мой заказ))
У меня вопросы по поводу svg. Я использую Вашу сборку gulp, где есть svg спрайты. Мне часто попадаются иконки, которые просто не отображаются.
1) Пишу, как сказано в гайде, g-use, раскрывается сниппет, туда пишу id иконки из папки svg, но иконка не отображается, навожу на тэг в инструментах разработчика и там отображено 0 пикселей.
Немного поискал информацию, некоторые пишут, что svg иконки ломаные, поэтому ничего не поделать. Другие иконки появляются чёрными в виду удаления всяких fill, stroke и style, они настраиваются, всё окей.
2) Но тут тоже нюанс, если svg картинка огромная и/или имеет разные цвета (к примеру, мне попалась svg картинка с мордой лисы какой-то компании metamask) то её восстановить уже не получается, так как слишком много тэгов с разными цветами, и я так понимаю, что в данном случае лучше отказаться от спрайта и просто вставлять svg.
Что делать в обоих случаях?
Здравствуйте. По поводу первого момента надо смотреть, почему свг вообще не показывается. По поводу второго - да, просто не кладите её в папку svg и все
Оказывается проблема была следующая:
- нужно перезапускать gulp.
svgSprites почему-то не пересобирается после добавления новой svg иконки в папку svg, хотя в терминале видно, как срабатывает функция svgSprites.
Блин, все бы ничего, если бы не говорил скороговорками. Куча слов нифига непонятно. Строчит как из пулемёта. Половину слов просто проглатывает...
Есть такое (
Thx!!!
You're welcome :)
Благодарю, узнал очень важную информацию)))
Приветствую! У меня странный глюк с svg происходит: когда экспортирую его из Иллюстратора, то выглядит он правильно, но если его забросить в Adobe XD и экспортировать потом оттуда, то в объектах пропадают дырки. То есть, например, буква О превращается в сплошной круг (без пустоты внутри). Любая пустая область в объектах просто схлопывается. НО, если SVG изначально делается в Inkscape и проходит ту же процедуру импорта-экспорта через Adobe XD, то с ним таких глюков нет и дырки в объектах никуда не пропадают. Не знаете, почему может быть такое? Как сделать, чтобы отверстия в объектах в SVG не исчезали?
Лайк Максим!!!!!
Спасибо)
Очень полезно. Большое спасибо
Благодарю за видео, тренсляцию ночью не осилил, а вот в качестве нового видео с удовльствием посмотрю
good
Спасибо)
@@maxgraph вам спасибо !
Спасибо, очень полезный урок!
Как раз недавно столкнулся с проблемой, очень много всяких диаграмм в презентациях делается на svg, на сайтах.. Также с hover эффектом как на карте России, только вместо площадей, часть графика (шаг I, шаг II итд)
спасибо за классный урок
Автор, благодарю за полезное видео. Теперь научился. Осталось только порисовать, и очередной стек пойдёт в резюме. Рисовать карту РФ это, конечно, вы круто сделали. Видно, что хороший дизайнер. Желаю успехов и хорошей работы!
Спасибо)
Спасибо автору, все отлично за исключением точек координат треугольника, там не правильно объясняется. Правильно вот так - ( x,y x,y x,y )
Пожалуйста)
сколько раз посмотрел столько и лайков Максиму! SVG style component path SVG-спрайты в html-файле
Спасибо!)
какой красавчик.. спасибо👍
Мужик, ты меня спас. Я тебя сначала дизлайкнул. Потом еле нашел твой видос. И чуть не прослезился. То что нужно. Большое спасибо!
Круто, рад помочь =)
Есть ли у него минус?
У чего?
@@maxgraph svg
Да вроде нет)
Спасибо за ролик.
Добавлю от себя что не обязательно svg весит меньше чем например png.
Я сгенерил svg по подобию аналогичного png и вышла такая картина
logo_128_1.svg 391 B 13 ms
logo_128_1.png 390 B 11 ms
Пожалуйста)
+
Ещё не посмотрел, но на ютубе из самых понятных про svg, из за тайм кода, все сортировано и понятно
👍
Очень крутой материал!!!
Спасибо и с наступившим :)))
Спасибо, с новым годом)
Классное видео) Особенно в конце про карту из svg - буду юзать!
По поводу оптимизации - лично я вставляю иконку через img, но к странице у меня подключён скрипт, который отвечает за деформацию из img в svg. И всё - никаких спрайтов и лишнего кода. Единственным минусом является то, что все изменения увидеть можно только в онлайне, потому что скрипт преобразовывает в svg только в онлайне) Но это вообще не страшно!
Ну тут кому как, галп делает работу с свг простой))
Большое спасибо за информацию!
Пожалуйста)
Спасибо)
Отличное видео! В какой уже раз говорю спасибо! Про градиент на svg - потрясно!
Спасибо)
Видео классное, автор, а ты мог бы сделать уроки как стилизовать видео и аудио и добавить к ним плей листы и прочие современные плюшки как например на ютубе?
Да, это в планах, просто не в ближайших)
А вот такая задачка svg спрайт в отдельном файле, и нужно подключить иконку, простой шарик заполненный градиентом, справа от него текст. При подключении виден только текст, а градиента нет
Я бы просто сделал иконку фоном, без спрайтов
@@maxgraph в этом то и проблема, по ТЗ нужно подключать все возможные иконки из спрайта, понятное дело за исключением простых картинок по типу фото и тд. Намучился с этими спрайтами уже. Спасибо за контент и за то, что отвечаешь
Что за тз такое странное))
@@maxgraph хз, отборочное на трудоустройство, но у меня горит уже с этих спрайтов, можно, конечно, в разметке через юз, но во-первых не хочется засорять код, а во-вторых хочется через ::after или :: before
@@egorbystrov9770 ну как, решил задачу?
То есть, если svg спрайты лежат во внешнем файле sprite.svg, то в style.css через background-image не получиться подключать?
Да
@@maxgraph Спасибо.
мегаполезное видео, спасибо)
Пожалуйста)
Автор, спасибо большое за видео!!!
Рад помочь)
Svg спрайт на фон можно вешать background-image: url(../images/icons/icons.svg#libra);
Есть вопрос как можно path готовой svg иконки подогнать под размер svg. Например я ставлю svg 34 и 21 размер, фактически иконка получается 16 и 10, preserveAspectRatio="none" не помогает, остается задавать размер svg намного больше, но не удобно ее позиционировать.
Спрайт не работает, я и спрашивал у Макеева того же, и сам пытался. Не хочет)
насчет размера - играться с preserveAspectRatio еще, или с viewBox. Но я нередко просто прошу дизайнера переделать)
@@maxgraph Странно, но вот я закинул через фон из свгспрайта cdn1.savepice.ru/uploads/2020/8/15/2750fa72bb0b2f047d85ff1f0858008b-full.jpg, в левом углу письмо, на before...
Топчик
спасибо )
Супер видео спасибо с наступающим
С наступающим =)
@@maxgraph с наступающим)
svg спрайт будет работать только сервере в интернете, или на локальном тоже будет работать?
Только на сервере
@@maxgraph Спасибо! Ты первый, кто ответил на мой коммент из всех блогеров, кому я задавал вопросы!!
Есть ведь и бесплатные хостинги на первое время найти?
Насчёт хостинга - наверняка что-то есть, но я не искал)
@@maxgraph ого... не думал, что при статичном html-css спрайт не работает.
Спасибо, лучший урок, что нашёл на ютубе по svg
Пожалуйста)