Тёмный

SVG. Руководство по использованию векторных изображений 

MaxGraph - cайты как страсть
Подписаться 30 тыс.
Просмотров 16 тыс.
50% 1

Привет! SVG уже давно вошел в веб-разработку как некий стандарт для создания иконок на страницах. Данный формат легче, удобнее, производительнее и просто четче, потому что при изменении размеров не меняется четкость изображения. В этом видео я расскажу, как использовать и создавать svg-графику на сайтах. Поехали!
Содержание:
00:00 - Вступление
02:18 - Виды подключения svg на страницу
07:10 - Как создавать svg-изображения с нуля
19:07 - Про размеры и viewBox
20:33 - Про теги g, defs
22:22 - Тег path
31:11 - Заливка и обводка
37:11 - SVG-спрайты в html-файле
42:08 - SVG-спрайты во внешнем файле
44:30 - Пример простого градиента в SVG
46:32 - Заключение
github.com/maxdenaro/maxgraph... - примеры из видео
blog.maxgraph.ru/2019/04/22/s... - моя статья про вставку svg
codepen.io/MaxGraph/pen/abbLdeO - пример svg-градиента
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #svg #векторнаяграфика

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 84   
@olegs.2152
@olegs.2152 3 года назад
Благодарю за видео, тренсляцию ночью не осилил, а вот в качестве нового видео с удовльствием посмотрю
@user-xs5cb1dc6s
@user-xs5cb1dc6s 2 года назад
Отличное видео! В какой уже раз говорю спасибо! Про градиент на svg - потрясно!
@maxgraph
@maxgraph 2 года назад
Спасибо)
@Learn-Dev_
@Learn-Dev_ 3 года назад
Очень крутой материал!!! Спасибо и с наступившим :)))
@maxgraph
@maxgraph 3 года назад
Спасибо, с новым годом)
@alexandrgusletsov2567
@alexandrgusletsov2567 2 года назад
сколько раз посмотрел столько и лайков Максиму! SVG style component path SVG-спрайты в html-файле
@maxgraph
@maxgraph 2 года назад
Спасибо!)
@alexOvcar
@alexOvcar Год назад
Благодарю, узнал очень важную информацию)))
@mrzlanx5328
@mrzlanx5328 4 месяца назад
Очень полезно. Большое спасибо
@Alexus1504
@Alexus1504 3 года назад
Автор, спасибо большое за видео!!!
@maxgraph
@maxgraph 3 года назад
Рад помочь)
@user-xs8ty9dg5s
@user-xs8ty9dg5s Год назад
спасибо за классный урок
@it400
@it400 3 года назад
О, я тоже ждал это видео)
@pherum
@pherum 3 года назад
какой красавчик.. спасибо👍
@niteilcaesgo2907
@niteilcaesgo2907 2 года назад
Большое спасибо за информацию!
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@user-mz8yd2hb8g
@user-mz8yd2hb8g Год назад
спасибо большое за градиент :)
@ivanfedorov7934
@ivanfedorov7934 3 года назад
Супер видео спасибо с наступающим
@maxgraph
@maxgraph 3 года назад
С наступающим =)
@AntonioBenderas
@AntonioBenderas Год назад
@@maxgraph с наступающим)
@Anatoli-bq1pe
@Anatoli-bq1pe 9 месяцев назад
Благодарю!
@user-bx1ub6qv1h
@user-bx1ub6qv1h 3 года назад
Классное видео) Особенно в конце про карту из svg - буду юзать! По поводу оптимизации - лично я вставляю иконку через img, но к странице у меня подключён скрипт, который отвечает за деформацию из img в svg. И всё - никаких спрайтов и лишнего кода. Единственным минусом является то, что все изменения увидеть можно только в онлайне, потому что скрипт преобразовывает в svg только в онлайне) Но это вообще не страшно!
@maxgraph
@maxgraph 3 года назад
Ну тут кому как, галп делает работу с свг простой))
@mefioz2397
@mefioz2397 2 года назад
Лайк Максим!!!!!
@maxgraph
@maxgraph 2 года назад
Спасибо)
@kirillkononov5094
@kirillkononov5094 3 года назад
Спасибо, очень полезный урок! Как раз недавно столкнулся с проблемой, очень много всяких диаграмм в презентациях делается на svg, на сайтах.. Также с hover эффектом как на карте России, только вместо площадей, часть графика (шаг I, шаг II итд)
@anton-vr5xw
@anton-vr5xw 3 года назад
мегаполезное видео, спасибо)
@maxgraph
@maxgraph 3 года назад
Пожалуйста)
@maksacool
@maksacool 3 года назад
Спасибо)
@podpalmoi
@podpalmoi 6 месяцев назад
Автор, благодарю за полезное видео. Теперь научился. Осталось только порисовать, и очередной стек пойдёт в резюме. Рисовать карту РФ это, конечно, вы круто сделали. Видно, что хороший дизайнер. Желаю успехов и хорошей работы!
@maxgraph
@maxgraph 6 месяцев назад
Спасибо)
@vipdeveloper
@vipdeveloper 3 года назад
Вот и мой заказ))
@user-islamkaz
@user-islamkaz 2 года назад
Ещё не посмотрел, но на ютубе из самых понятных про svg, из за тайм кода, все сортировано и понятно
@maxgraph
@maxgraph 2 года назад
👍
@bayanbokan4971
@bayanbokan4971 3 года назад
Топчик
@maxgraph
@maxgraph 3 года назад
спасибо )
@AlexandruBejenari
@AlexandruBejenari 2 года назад
Thx!!!
@maxgraph
@maxgraph 2 года назад
You're welcome :)
@Lyfthrasyrr
@Lyfthrasyrr 2 года назад
Спасибо, лучший урок, что нашёл на ютубе по svg
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@Crocus-City-Hall-Fire
@Crocus-City-Hall-Fire 2 года назад
Спасибо за ролик. Добавлю от себя что не обязательно svg весит меньше чем например png. Я сгенерил svg по подобию аналогичного png и вышла такая картина logo_128_1.svg 391 B 13 ms logo_128_1.png 390 B 11 ms
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@user-dh4wz6yz7r
@user-dh4wz6yz7r 3 года назад
Видео классное, автор, а ты мог бы сделать уроки как стилизовать видео и аудио и добавить к ним плей листы и прочие современные плюшки как например на ютубе?
@maxgraph
@maxgraph 3 года назад
Да, это в планах, просто не в ближайших)
@lisofsky8151
@lisofsky8151 3 года назад
good
@maxgraph
@maxgraph 3 года назад
Спасибо)
@lisofsky8151
@lisofsky8151 3 года назад
@@maxgraph вам спасибо !
@marina-ej4qd9kc1wh
@marina-ej4qd9kc1wh Год назад
Морда микки мауса)))
@_cyborg
@_cyborg 2 года назад
Мужик, ты меня спас. Я тебя сначала дизлайкнул. Потом еле нашел твой видос. И чуть не прослезился. То что нужно. Большое спасибо!
@maxgraph
@maxgraph 2 года назад
Круто, рад помочь =)
@Edgar_Malkhasyan
@Edgar_Malkhasyan 2 года назад
Спасибо автору, все отлично за исключением точек координат треугольника, там не правильно объясняется. Правильно вот так - ( x,y x,y x,y )
@maxgraph
@maxgraph 2 года назад
Пожалуйста)
@Bugelhagen
@Bugelhagen 2 года назад
Приветствую! У меня странный глюк с svg происходит: когда экспортирую его из Иллюстратора, то выглядит он правильно, но если его забросить в Adobe XD и экспортировать потом оттуда, то в объектах пропадают дырки. То есть, например, буква О превращается в сплошной круг (без пустоты внутри). Любая пустая область в объектах просто схлопывается. НО, если SVG изначально делается в Inkscape и проходит ту же процедуру импорта-экспорта через Adobe XD, то с ним таких глюков нет и дырки в объектах никуда не пропадают. Не знаете, почему может быть такое? Как сделать, чтобы отверстия в объектах в SVG не исчезали?
@AntonioBenderas
@AntonioBenderas Год назад
14:30 проще говоря координаты центра
@iGotton
@iGotton 3 года назад
+
@b.7690
@b.7690 3 года назад
Svg спрайт на фон можно вешать background-image: url(../images/icons/icons.svg#libra); Есть вопрос как можно path готовой svg иконки подогнать под размер svg. Например я ставлю svg 34 и 21 размер, фактически иконка получается 16 и 10, preserveAspectRatio="none" не помогает, остается задавать размер svg намного больше, но не удобно ее позиционировать.
@maxgraph
@maxgraph 3 года назад
Спрайт не работает, я и спрашивал у Макеева того же, и сам пытался. Не хочет) насчет размера - играться с preserveAspectRatio еще, или с viewBox. Но я нередко просто прошу дизайнера переделать)
@b.7690
@b.7690 3 года назад
@@maxgraph Странно, но вот я закинул через фон из свгспрайта cdn1.savepice.ru/uploads/2020/8/15/2750fa72bb0b2f047d85ff1f0858008b-full.jpg, в левом углу письмо, на before...
@nickdunne1235
@nickdunne1235 2 года назад
То есть, если использовать спрайты, то конкретно в плане запросов на сервер у SVG нет преимуществ перед другими форматами изображений?
@maxgraph
@maxgraph 2 года назад
Можно менять цвет иконок ещё
@nefed-L
@nefed-L 6 месяцев назад
Когда я вставляю несколько свг на страницу, то у меня все Dom-элементы, которые идут после свг исчезают из дерева. Их просто нет в html-документе. Кто-нибудь сталкивался с таким? Нормально работает только вставка с помощью тега img и object, все остальные способы ломают разметку.
@googoogle
@googoogle 2 года назад
в тестовом задании в логотипе нужно передвинуть красную букву на место. как это можно сделать?
@sosningrigorii2567
@sosningrigorii2567 3 года назад
svg спрайт будет работать только сервере в интернете, или на локальном тоже будет работать?
@maxgraph
@maxgraph 3 года назад
Только на сервере
@sosningrigorii2567
@sosningrigorii2567 3 года назад
@@maxgraph Спасибо! Ты первый, кто ответил на мой коммент из всех блогеров, кому я задавал вопросы!! Есть ведь и бесплатные хостинги на первое время найти?
@maxgraph
@maxgraph 3 года назад
Насчёт хостинга - наверняка что-то есть, но я не искал)
@user-or1hy4xz8u
@user-or1hy4xz8u Год назад
@@maxgraph ого... не думал, что при статичном html-css спрайт не работает.
@egorbystrov9770
@egorbystrov9770 2 года назад
А вот такая задачка svg спрайт в отдельном файле, и нужно подключить иконку, простой шарик заполненный градиентом, справа от него текст. При подключении виден только текст, а градиента нет
@maxgraph
@maxgraph 2 года назад
Я бы просто сделал иконку фоном, без спрайтов
@egorbystrov9770
@egorbystrov9770 2 года назад
@@maxgraph в этом то и проблема, по ТЗ нужно подключать все возможные иконки из спрайта, понятное дело за исключением простых картинок по типу фото и тд. Намучился с этими спрайтами уже. Спасибо за контент и за то, что отвечаешь
@maxgraph
@maxgraph 2 года назад
Что за тз такое странное))
@egorbystrov9770
@egorbystrov9770 2 года назад
@@maxgraph хз, отборочное на трудоустройство, но у меня горит уже с этих спрайтов, можно, конечно, в разметке через юз, но во-первых не хочется засорять код, а во-вторых хочется через ::after или :: before
@AntonioBenderas
@AntonioBenderas Год назад
@@egorbystrov9770 ну как, решил задачу?
@assetdev1859
@assetdev1859 2 года назад
Есть ли у него минус?
@maxgraph
@maxgraph 2 года назад
У чего?
@assetdev1859
@assetdev1859 2 года назад
@@maxgraph svg
@maxgraph
@maxgraph 2 года назад
Да вроде нет)
@moneyhouse4365
@moneyhouse4365 3 года назад
Блин, все бы ничего, если бы не говорил скороговорками. Куча слов нифига непонятно. Строчит как из пулемёта. Половину слов просто проглатывает...
@maxgraph
@maxgraph 3 года назад
Есть такое (
@higgsboson3849
@higgsboson3849 2 года назад
То есть, если svg спрайты лежат во внешнем файле sprite.svg, то в style.css через background-image не получиться подключать?
@maxgraph
@maxgraph 2 года назад
Да
@higgsboson3849
@higgsboson3849 2 года назад
@@maxgraph Спасибо.
Далее
SVG Viewport and viewBox (For Complete Beginners)
12:25
What Should Be Next? 👀🤯
00:56
Просмотров 8 млн
♀ 🔁 ♂ = ...❓ #OC #늦잠 #vtuber
00:12
Просмотров 1,6 млн
Форматы изображений (jpg, png, svg)
15:04
Learn To Build An SVG Animation With CSS
18:32
Просмотров 749 тыс.
What Should Be Next? 👀🤯
00:56
Просмотров 8 млн