SVG, большой гайд

Sdílet
Vložit
  • čas přidán 31. 05. 2022
  • Друзья, записал для вас гайд по svg. Вам обязательно нужна будет эта база для дальнейшего развития в svg анимации. Как говорится, сложный макет - это простой макет, в котором много сложных мелких деталей, часто эти детали можно решить, если вы имеете хорошую базу по svg.
    clip в css - bennettfeely.com/clippy/
    svg-path - yoksel.github.io/svg-path/
    размеры в svg - yoksel.github.io/svg-sizes/
    машинка - codepen.io/yoksel/pen/YzPgmw
    SVG или иконочный шрифт:
    • SVG или иконочный шриф...
    Телеграм канал:
    t.me/from0to1com
    Сайт курса по верстке - from0to1.com.ua/
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

Komentáře • 177

  • @serjmarkelov9915
    @serjmarkelov9915 Před 2 lety +53

    Спасибо огромное! Даже в невероятных условиях войны, ты продолжаешь вкладывать силу и энергию в обучение.
    Нет слов. Дякую

    • @vadymprokopchuk
      @vadymprokopchuk  Před rokem +6

      спасибо

    • @ligat-rome
      @ligat-rome Před rokem +1

      Брат как у вас там в Украине? Я из Кыргызстана. Как вы там? насколько тяжело стала жить после войны?

    • @sshcvc
      @sshcvc Před 7 měsíci +2

      просто Россия воюет не так как Израиль

    • @denissaveliev2664
      @denissaveliev2664 Před 6 měsíci

      @@sshcvc откуда ты выползло ? залазь обратно

    • @user-sp8ty2ol8m
      @user-sp8ty2ol8m Před 5 měsíci +1

      @@ligat-rome жил в Николаеве , взорвало соседний дом снарядом
      переехал в Одессу , а тут шахеды летают по ночам постоянно + вижу как их сбивают ( я у моря живу и тут очень хорошая видимость всего этого )

  • @alyonachashchina7347
    @alyonachashchina7347 Před rokem +3

    Я кажется влюбляюсь в Вашу работу! Сердечное спасибо 💛

  • @ROMAN-KVAS
    @ROMAN-KVAS Před 3 měsíci +3

    8:22 Рисование прямоугольника.
    13:34 Рисование круга.
    15:20 Рисование овала.
    17:08 Рисование многоугольника.
    21:55 Рисование линии.
    23:26 Рисование ломаной линии.
    28:08 Рисование кривой, Figma.

  • @annadwar9534
    @annadwar9534 Před rokem +1

    Просто огромное человеческое спасибо!
    Максимально доступно и информативно 🤘😎

  • @dimatsyhanenko9503
    @dimatsyhanenko9503 Před 2 lety +27

    Ждем такой же курс по Canvas!

  • @gvitoss
    @gvitoss Před 2 lety +23

    Привет! Рад что ты снова с нами! Можешь пожалуйста сделать видео по оптимизации сайта, для pagespeed? )

  • @user-wn7sx5ut4o
    @user-wn7sx5ut4o Před rokem

    Шикарно!!!! Просто и доступно все разъяснил. Спасибо большое!!! Мир вам!!

  • @user-ve7tx3ud6n
    @user-ve7tx3ud6n Před 3 měsíci

    Спасибо Вадим. Здоровья и Мирного неба Вам и вашей семье.

  • @yuriykolomytsyn2352
    @yuriykolomytsyn2352 Před rokem

    Огромное спасибо за отличный урок и практику!

  • @BillGadov
    @BillGadov Před rokem

    Вообще богато! Появилось понимание как работать с svg. Благодарочка!

  • @user-wp1qb3nf4p
    @user-wp1qb3nf4p Před rokem +1

    Очень круто объяснено. Спасибо. Хорошо что зашел на эту вечеринку

    • @k.u.r.w.a.
      @k.u.r.w.a. Před 7 měsíci

      Меня так разрывало, когда он говорил "вечеринка"🥳🥳🥳 приятный чел

  • @domakook753
    @domakook753 Před 6 měsíci

    Спасибо!
    Будьте здоровыми!

  • @niceman5890
    @niceman5890 Před rokem +1

    Спасибо большое! Было приятно смотреть!

  • @nugget_sti
    @nugget_sti Před 2 lety +5

    спасибо, полезно! жду в дальнейшем видосы с более сложными примерами анимации из реальных проектов)

  • @antoha9486
    @antoha9486 Před 8 měsíci +1

    Ай молодец! Спасибо за труд.

  • @pavelfedevych5086
    @pavelfedevych5086 Před 2 lety +1

    Спасибо,как всегда на высоте,много информации и позитива.Какой мак юзаешь.Для задач верстальщика,фронтендера удобно использовать?,или есть ньюансы

  • @maxet2374
    @maxet2374 Před rokem

    полноценно и быстро. было приятно смотреть

  • @xu2593
    @xu2593 Před 2 lety

    на одном дыхании смотрится! будь здоров!!!

  • @demidronder
    @demidronder Před rokem

    Самый приятный контент в этой сфере.

  • @Oleg_Artemov
    @Oleg_Artemov Před 2 lety +1

    Урраааа!
    Спасибо за ТОП контент 🥳

  • @Grigoren_com
    @Grigoren_com Před rokem

    спасибо! очень полезный ролик!))) толково всё! многое стало на свои места!)))

  • @tatianaagapkina8658
    @tatianaagapkina8658 Před rokem +10

    SVG-блокбастер, не иначе! спасибо, Вадим, все по полочкам, реально много любопытного для меня! добавила филл на svg палец под видео. вот бы еще видос с версткой макета и более-менее сложной svg-анимацией по мотивам твоих реальных проектов ))

  • @user-fq5mo4ei1x
    @user-fq5mo4ei1x Před 2 lety +31

    Вот это подгон,спасибо. Ещё очень хотелось бы увидеть видео про обновлённую сборку GULP

    • @vadymprokopchuk
      @vadymprokopchuk  Před 2 lety +10

      в плана есть обновление сборки

    • @user-fq5mo4ei1x
      @user-fq5mo4ei1x Před 2 lety +3

      Тогда с нетерпением ждём)

    • @user-vo7sm5sz7p
      @user-vo7sm5sz7p Před 2 lety

      @@user-fq5mo4ei1x зачем в 2022 году нужен галп?

    • @user-fq5mo4ei1x
      @user-fq5mo4ei1x Před 2 lety

      @@user-vo7sm5sz7p а почему в 22 году галп не нужен?

    • @user-vo7sm5sz7p
      @user-vo7sm5sz7p Před 2 lety

      @@user-fq5mo4ei1x я не говорил что он не нужен. Я просто спросил почему он ещё используется, чем он лучше чем Парсел или Вит

  • @sivilrishar2927
    @sivilrishar2927 Před 2 lety

    Аааааа, ура, то что надо, обязательно посмотрю. Лайк!

  • @user-fs3yr9yk6n
    @user-fs3yr9yk6n Před 2 lety

    видос ваще топовый!!! пасиб
    пойду ещё раз пересмотрю про маски

  • @bergghest
    @bergghest Před 2 měsíci

    Нереально крутой гайд! Низкий поклон и жирный лайк.

  • @VitaliySunny
    @VitaliySunny Před 7 měsíci

    Крутой гайд, спасибо

  • @user-gp5zx6xu1r
    @user-gp5zx6xu1r Před 2 lety

    Мега круто! Спасибо !

  • @user-tu7km2sj9i
    @user-tu7km2sj9i Před rokem

    Величезне Вам дякую! Дуже корисне відео!)

  • @user-bi4ln9pg3i
    @user-bi4ln9pg3i Před 2 lety

    Спасибо, будем изучать!

  • @user-to5fg5hq9r
    @user-to5fg5hq9r Před 2 lety +3

    Спасибо Вадос за твои труды!😁 Ты всегда будешь у нас в авторитете!😏😁

  • @Ushjsuuhensb
    @Ushjsuuhensb Před 2 měsíci

    "По центру пацанёныша" 🤣 Можно смотреть видосы просто ради этих фраз

  • @jeka_stec2953
    @jeka_stec2953 Před 2 lety

    Спасибо за такое информативное видео! Шрифт супер как называеться?

  • @user-km8dz9bg1r
    @user-km8dz9bg1r Před 8 měsíci

    Спасибо за все

  • @baytszy
    @baytszy Před rokem

    спасибо....думала сложно, по другим видео, но вроде все не сложна))

  • @user-db3fl4ri1l
    @user-db3fl4ri1l Před 2 lety

    Ну это царский ролик вышел

  • @pavelm7992
    @pavelm7992 Před 2 lety +1

    Вадим! Вот это подгон! Крутой контент! И, да, курсы твои огонь! Спасибо огромное! Это большой труд, большая работа!

  • @vitaliisapryga4825
    @vitaliisapryga4825 Před 2 lety

    Отличное видео!
    Хотелось бы увидеть как делать выпадающее меню

  • @megalodonn9356
    @megalodonn9356 Před 2 lety

    Спасибо, очень полезно

  • @onlydropped6479
    @onlydropped6479 Před 2 lety +1

    Вадим спасибо тебе большое за кучу полезной информации

  • @thewantedplay8639
    @thewantedplay8639 Před 2 lety +1

    Увидел видос Вадима, лайк поставил по автомату!)) Спасибо Вадим, огромное, без тебя ютуб не смотрю! Не останавливайся ПОЖАЛУЙСТА!!!

  • @AlexLee-do4min
    @AlexLee-do4min Před 2 lety +1

    Сапожник будет доволен - сапожник в восторге! ;)))
    Как всегда, улёт и супер!

  • @ruslanshyiovych736
    @ruslanshyiovych736 Před rokem

    Супер.... Дякую за пояснення.

  • @samtop4899
    @samtop4899 Před rokem

    Лучший)

  • @olik9253
    @olik9253 Před rokem

    Прекрасный материал, большое спасибо!
    Но остался один вопрос..мне все таки неясно зачем было заходить в фигму и менять размеры яблока, а потом ещё делать изменения в тегах в программе... Нельзя ли просто было изменить параметр wight в стилях css?

  • @psix9618
    @psix9618 Před 2 lety

    Спасибо большое

  • @pilotar
    @pilotar Před 10 měsíci

    Спасибо.

  • @user-YARILLO
    @user-YARILLO Před 4 měsíci

    просто ох@@@ваю насколько полезный канал

    • @vadymprokopchuk
      @vadymprokopchuk  Před 4 měsíci

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

  • @vasya8441
    @vasya8441 Před 2 lety

    Лайк и коммент не глядя

  • @Maratreason
    @Maratreason Před 2 lety

    О, долгожданный урок :) Спасибо!

  • @egorbystrov9770
    @egorbystrov9770 Před 2 lety

    Урааа, спасибо

  • @lounge_studio
    @lounge_studio Před 2 lety

    Круто!

  • @user-qx3tg5sw4m
    @user-qx3tg5sw4m Před 2 lety

    Вадим такой вопрос. Эти сайты, что мы делаем на марафонах можно вставлять в резюме?

  • @user-qe2oh6os8q
    @user-qe2oh6os8q Před 2 lety

    спасибо за видео

  • @vs5140
    @vs5140 Před 2 lety +1

    Спасибо! За урок! Как всегда топ! Доступно и понятно!

  • @A_A_A182
    @A_A_A182 Před rokem

    Спасибо

  • @ponokost
    @ponokost Před rokem

    "Ламаная" линия- линия которую поломали ))))))👍

  • @user-jt3su6le8i
    @user-jt3su6le8i Před 2 lety +1

    Очень годный контент. Как всегда все очень понятно. Очень жду новые курсы

  • @dimadiv6583
    @dimadiv6583 Před 2 lety +3

    Крутой видос. Ждём более сложные анимации с применением js. Маски возможно необычные покажешь для изображений. Спасибо!

  • @user-xm7dn8lw5y
    @user-xm7dn8lw5y Před 2 lety +1

    Красавчик, как всегда всё подробно и по делу. Заряд позитива и мотивации при каждом просмотре видео!=)
    С нетерпением жду новой инфы, новых видосов=)
    И уже наверно заядлый вопрос: когда будет курс по js?=))

    • @vadymprokopchuk
      @vadymprokopchuk  Před 2 lety

      не знаю, посмотрим, есть идейки

  • @pavel.88
    @pavel.88 Před 3 měsíci +1

    Вадим хотел нарисовать 卍 , когда показывал polyline

  • @Ayt0_on
    @Ayt0_on Před rokem

    Какую тему в vscode ты используешь?

  • @velikorossnationalist4259

    А про теги pattern, defs, use и т.д. хотелось бы услышать)

  • @psix9618
    @psix9618 Před rokem

    Насчёт тега clipPath, думаю, что в таком случае лучше использовать css свойство mask-image, оно попроще будет, а результат тот же

  • @sergeyaleksandrovich1958

    привет Вадим, спасибо за урок. ты лучший учитель в ютубе. жду следующих гайдов.

  • @MrStelian4k
    @MrStelian4k Před 2 lety

    Красава

  • @user-bm5ge3mr9u
    @user-bm5ge3mr9u Před 2 lety

    ОГРОМНОЕ СПАСИБО!!! - за такой урок! Кто вникал и смотрел до конца точно level Up-нул))
    В конце заинтриговал, теперь ждем вечеринку по закреплению этих скилов;)
    Как всегда жирный Лайк для продвижения контента!

  • @liammango8652
    @liammango8652 Před 2 lety

    svg из Font Awesom можно качать и вставлять в свой сайт без лицензии?

  • @user-qx3tg5sw4m
    @user-qx3tg5sw4m Před 2 lety +1

    Вадим, как тебе идея записать видос про полную работу на фрилансе. От поиску заказа до сдачи. Очень полезно будет для новичков

    • @vadymprokopchuk
      @vadymprokopchuk  Před 2 lety

      заказчику это не понравится, он не хочет чтобы все знали стоимость заказа, как я с ним общался, и видели как я создавал сайт, а без пруфов и цифр это не интересно

  • @andreysergienko02
    @andreysergienko02 Před rokem

    какая тема для иконок vscode
    стоит, скажите пожалуйста?)

  • @felixfelixovich2150
    @felixfelixovich2150 Před 2 lety

    Ты лучший

  • @akhmad_goytinski
    @akhmad_goytinski Před rokem

    Что там нажимаешь в Figme? Область мне нужно отдельно область чтобы менялась нихатыж а надобно шас

  • @Vova_mant
    @Vova_mant Před 2 lety +1

    Спасибо большое за гайд!

  • @googoogle
    @googoogle Před 2 měsíci

    пару раз видел на сайтах в зависимости от скролла плавали буквы по кривой линии. это через svg делается?

  • @bezmazbl
    @bezmazbl Před 2 lety

    Спасибо за урок. Большое дело делаешь!

  • @neo3248
    @neo3248 Před 2 lety +1

    Вадим не могу открыть макет из предыдущего ролика на Фигме, так как случилось так что я живу в рф, его можно в Фотошопе открыть? Сам пробовал не получилось!

    • @vadymprokopchuk
      @vadymprokopchuk  Před 2 lety

      макеты из фигмы в фотошопе не открыть

  • @user-rs2wy5yj8r
    @user-rs2wy5yj8r Před 2 lety

    Супер! Дякую.

  • @user-hu1um1gv4v
    @user-hu1um1gv4v Před 2 lety +4

    Оце я розумію крутий урок👍💪💪.Було би круто якби ти зробив уроки по JS, jQuery і по WP:)))

  • @oksanaponomarenko8478
    @oksanaponomarenko8478 Před 2 lety

    Дуже крутий відос, дякую! Это моя лучшая вечеринка 🔥🔥🔥

  • @littlecat8445
    @littlecat8445 Před rokem

    Большое спасибо . Было очень полезно!

  • @hilarious-_-7569
    @hilarious-_-7569 Před 2 lety

    как всегда, великолепно!!!

  • @gio2156
    @gio2156 Před 2 lety

    Только вчера решил левелапнуть свои знания по свг и тут такая царская вечерина подъехала. Дякую!

  • @jonmace3522
    @jonmace3522 Před 2 lety

    Что за шрифт у тебя в VS Code?

  • @begovik9866
    @begovik9866 Před rokem +1

    Инфы канешн не дуже насыщено, но лайкос впаял чуваку чисто за базар!!! Ни в коем случае не переходи на "нормальную" речь))) Бакланишь шедеврально!!!

    • @begovik9866
      @begovik9866 Před rokem

      З.Ы. Сделай, еслли шаришь видос про зум, очень мало инфы про ЭТО

  • @azat3577
    @azat3577 Před rokem

    На тебе лайк

  • @user-hx1qi7sw1q
    @user-hx1qi7sw1q Před 2 lety +1

    Супер! Дякую за класний урок!

  • @martinyis6453
    @martinyis6453 Před 2 lety +1

    Привет, жду стрим по продвинутой верстке)

  • @kirillguryanov4925
    @kirillguryanov4925 Před rokem

    Жёсткий буст, спасибо !🥹

  • @burda77
    @burda77 Před 2 lety

    Круто! Все ясно и понятно

  • @user-dv9fk1hd3s
    @user-dv9fk1hd3s Před rokem

    Если svg содержит id внутри себя, то если эта svg используется несколько раз на странице, html-валидатор будет ругаться, что несколько одинаковых id на странице

  • @user-yb5bx2ki4q
    @user-yb5bx2ki4q Před 2 lety +1

    Спасибо, мне кажется видео приобрели более высокий уровень

  • @user-se6ct5zu2f
    @user-se6ct5zu2f Před rokem

    очень мощное видео, спасибо большое!!!

  • @valeraaligator999
    @valeraaligator999 Před 2 lety

    Дякую!

  • @tercon8870
    @tercon8870 Před 2 lety

    Респект за контент и за юмор)

  • @Aks9293
    @Aks9293 Před 2 lety

    Братец. Открыл мне просто кучу новой информации. Огромное спасибо тебе за такое видео. Не оправданно мало комментариев и лайков. Буду ждать новые видео.
    P.S : Не когда не писал комментарии в ютубе , но тут не смог не написать 😀

  • @user-sv3ik3jr2u
    @user-sv3ik3jr2u Před 2 lety

    Всем привет! У меня вопрос немного не по теме видео.
    Стоит ли совмещать изучение английского языка и HTML, CSS, JS или лучше сначала учить фронт, а потом уже начинать английский, чтобы не разрываться?
    П.С. Вадос, ты крут!

    • @gio2156
      @gio2156 Před 2 lety

      Лучше сперва англ учи. Потом хтмл и цсс и в конце отдельно джс иначе взрыв мозга будет

    • @user-sv3ik3jr2u
      @user-sv3ik3jr2u Před 2 lety +1

      @@gio2156 Ну я буду сначала CSS и HTML. Я это к тому, стоит ли с английским совмещать. Просто считаю, что основное это все же верстка, а язык уже потом можно. Много где слышал, что в принципе норм подход.

    • @vadymprokopchuk
      @vadymprokopchuk  Před 2 lety

      я думаю что совмещать будет крайне сложно

    • @user-sv3ik3jr2u
      @user-sv3ik3jr2u Před 2 lety

      @@vadymprokopchuk ну это да. Тем более, на сколько я помню, ты сам недавно начинал учить английский и тебе особо он не был нужен.

    • @user-sv3ik3jr2u
      @user-sv3ik3jr2u Před 2 lety

      Еще, как вариант, английский по плейлистам слушать.

  • @denisboyko264
    @denisboyko264 Před 2 lety

    дякую

  • @user-ol1nx2ym1f
    @user-ol1nx2ym1f Před 2 lety

    Не вероятно крутой преподаватель!!!!!!!

  • @yuriilukianovych8660
    @yuriilukianovych8660 Před 2 lety

    Дякую, Вадим! Дуже корисне відео! 👍 🟦🟨

  • @Noname__name
    @Noname__name Před 2 lety

    Спасибо за уроки!