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

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ก.ย. 2024
  • Друзья, записал для вас гайд по svg. Вам обязательно нужна будет эта база для дальнейшего развития в svg анимации. Как говорится, сложный макет - это простой макет, в котором много сложных мелких деталей, часто эти детали можно решить, если вы имеете хорошую базу по svg.
    clip в css - bennettfeely.c...
    svg-path - yoksel.github....
    размеры в svg - yoksel.github....
    машинка - codepen.io/yok...
    SVG или иконочный шрифт:
    • SVG или иконочный шриф...
    Телеграм канал:
    t.me/from0to1com
    Сайт курса по верстке - from0to1.com.ua/
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

ความคิดเห็น • 182

  • @ROMAN-KVAS
    @ROMAN-KVAS 7 หลายเดือนก่อน +5

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

  • @AlexLee-do4min
    @AlexLee-do4min 2 ปีที่แล้ว +1

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

  • @user-YARILLO
    @user-YARILLO 7 หลายเดือนก่อน

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

    • @vadymprokopchuk
      @vadymprokopchuk  7 หลายเดือนก่อน

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

  • @gvitoss
    @gvitoss 2 ปีที่แล้ว +23

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

  • @serjmarkelov9915
    @serjmarkelov9915 2 ปีที่แล้ว +54

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 ปีที่แล้ว +6

      спасибо

    • @ligat-rome
      @ligat-rome ปีที่แล้ว +1

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

    • @sshcvc
      @sshcvc 11 หลายเดือนก่อน +2

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

    • @denissaveliev2664
      @denissaveliev2664 10 หลายเดือนก่อน

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

    • @НікітаКорчемний-г4ч
      @НікітаКорчемний-г4ч 8 หลายเดือนก่อน +1

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

  • @begovik9866
    @begovik9866 ปีที่แล้ว +2

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

    • @begovik9866
      @begovik9866 ปีที่แล้ว

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

  • @pavel.88
    @pavel.88 7 หลายเดือนก่อน +1

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

  • @myroadmalankajosef9192
    @myroadmalankajosef9192 2 หลายเดือนก่อน +1

    Молодчина ти, Вадим!!! Класно все розповідаєш і видно, що розумний ти хлопець!!!

  • @dimatsyhanenko9503
    @dimatsyhanenko9503 2 ปีที่แล้ว +27

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

  • @neo3248
    @neo3248 2 ปีที่แล้ว +1

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 ปีที่แล้ว

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

  • @mikesamurai
    @mikesamurai 2 ปีที่แล้ว +1

    Ще таке питання, контент українською мовою буде?

  • @ricardo_milos1977
    @ricardo_milos1977 16 วันที่ผ่านมา +1

    Не смог не написать ваша подача лучшая, самая лучшая правда

    • @vadymprokopchuk
      @vadymprokopchuk  16 วันที่ผ่านมา +1

      @@ricardo_milos1977 спасибо

  • @nugget_sti
    @nugget_sti 2 ปีที่แล้ว +6

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

  • @РоманЛебедев-о3э
    @РоманЛебедев-о3э 2 ปีที่แล้ว +31

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 ปีที่แล้ว +10

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

    • @РоманЛебедев-о3э
      @РоманЛебедев-о3э 2 ปีที่แล้ว +3

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

    • @Евгений-х4л2щ
      @Евгений-х4л2щ 2 ปีที่แล้ว

      @@РоманЛебедев-о3э зачем в 2022 году нужен галп?

    • @РоманЛебедев-о3э
      @РоманЛебедев-о3э 2 ปีที่แล้ว

      @@Евгений-х4л2щ а почему в 22 году галп не нужен?

    • @Евгений-х4л2щ
      @Евгений-х4л2щ 2 ปีที่แล้ว

      @@РоманЛебедев-о3э я не говорил что он не нужен. Я просто спросил почему он ещё используется, чем он лучше чем Парсел или Вит

  • @alexandraweather4156
    @alexandraweather4156 12 วันที่ผ่านมา

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

  • @x-diz
    @x-diz 3 หลายเดือนก่อน

    Нарисовал SVG рамку во весь экран. Уменьшаю экран браузера, а рамка обновляется/уменьшается только после того как нажму обновление страницы. Почему?

  • @tatianaagapkina8658
    @tatianaagapkina8658 2 ปีที่แล้ว +10

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

  • @ИгорьГлазков-с1б
    @ИгорьГлазков-с1б 7 หลายเดือนก่อน +1

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

  • @Andrew_Dreamer13
    @Andrew_Dreamer13 2 ปีที่แล้ว +1

    Иду с работы,смотрю в телефоне.Неудобно,надо быстрей домой к ноутбуку.
    Кажется я уже почти знаю как мне нарисовать одну заковыристую кнопку

  • @googoogle
    @googoogle 6 หลายเดือนก่อน

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

  • @Тороид
    @Тороид ปีที่แล้ว

    В целом хорошее видео. Но не сказано ни слова об анимации в непосредственном коде svg без css. И тишина относительно градиентной заливки. Всё остальное отлично.

  • @alanweik3987
    @alanweik3987 ปีที่แล้ว

    Блин а я тупо не могу найти как прописать в html скачанный свг при нажатии на который я переходил бы по ссылке. Ни типа навигационная панель домой, поиск, контакты и ТД.

  • @Ayt0_on
    @Ayt0_on ปีที่แล้ว

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

  • @bulatm9699
    @bulatm9699 2 ปีที่แล้ว

    На главных страницах некоторых больших интернет магазинов всякие пнг и жпг хотя там место свг. Аш глазам больно

  • @alyonachashchina7347
    @alyonachashchina7347 ปีที่แล้ว +3

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

  • @akhmad_goytinski
    @akhmad_goytinski ปีที่แล้ว

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

  • @pilotar
    @pilotar ปีที่แล้ว

    Спасибо.

  • @pavelfedevych5086
    @pavelfedevych5086 2 ปีที่แล้ว +1

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

  • @КостяШкамбула
    @КостяШкамбула 2 ปีที่แล้ว +1

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 ปีที่แล้ว

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

  • @Андрейдазабей
    @Андрейдазабей 2 ปีที่แล้ว

    ну svg похож на canvas но в canvas можно не только вектор рисовать но и растр

  • @martinyis6453
    @martinyis6453 2 ปีที่แล้ว +1

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

  • @antoha9486
    @antoha9486 11 หลายเดือนก่อน +1

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

  • @maksimdmitrenko
    @maksimdmitrenko 4 หลายเดือนก่อน

    Вадим, в телеграме бываете? ))

  • @jonmace3522
    @jonmace3522 2 ปีที่แล้ว

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

  • @VitaliySunny
    @VitaliySunny 11 หลายเดือนก่อน

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

  • @olgaorlova2131
    @olgaorlova2131 ปีที่แล้ว

    еще drag and drop итересно

  • @МаксимГиря-в1й
    @МаксимГиря-в1й 2 ปีที่แล้ว +4

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

  • @Oleg_Artemov
    @Oleg_Artemov 2 ปีที่แล้ว +1

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

  • @niceman5890
    @niceman5890 ปีที่แล้ว +1

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

  • @ЕлизаветаКазакова-у7м
    @ЕлизаветаКазакова-у7м 11 หลายเดือนก่อน

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

  • @user-wp1qb3nf4p
    @user-wp1qb3nf4p ปีที่แล้ว +1

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

    • @k.u.r.w.a.
      @k.u.r.w.a. 10 หลายเดือนก่อน

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

  • @azat3577
    @azat3577 ปีที่แล้ว

    На тебе лайк

  • @николайкраснов-р3о
    @николайкраснов-р3о 2 ปีที่แล้ว +1

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

  • @A_A_A182
    @A_A_A182 2 ปีที่แล้ว

    Спасибо

  • @СергейПресняков-о4р
    @СергейПресняков-о4р ปีที่แล้ว

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

  • @samtop4899
    @samtop4899 2 ปีที่แล้ว

    Лучший)

  • @liammango8652
    @liammango8652 2 ปีที่แล้ว

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

  • @РустамГильмутдинов-о3э
    @РустамГильмутдинов-о3э 2 ปีที่แล้ว

    Опять я провафлил транслейшн((
    p.s. Сегодня еще и футбол. Не проспать бы

  • @ilgizreklama
    @ilgizreklama 2 ปีที่แล้ว

    для меня inkskape удобнее для работы с SVG , чем figma

  • @olik9253
    @olik9253 ปีที่แล้ว

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

  • @walterwhite4407
    @walterwhite4407 ปีที่แล้ว

  • @олеголег0080
    @олеголег0080 ปีที่แล้ว

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

  • @andeesrg
    @andeesrg 2 ปีที่แล้ว

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

  • @jeka_stec2953
    @jeka_stec2953 2 ปีที่แล้ว

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

  • @КостяШкамбула
    @КостяШкамбула 2 ปีที่แล้ว

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

  • @ЕвгенийГавриленко-д4б
    @ЕвгенийГавриленко-д4б 2 ปีที่แล้ว

    Что за напиток пьешь????Все имеет значение))))

    • @vasya8441
      @vasya8441 2 ปีที่แล้ว

      кипяченую, воду надо кипятить, а то кто знает что в ней плавает

  • @MrSirus83
    @MrSirus83 ปีที่แล้ว

    Як вам бредова ідея створити дизайн сайту на svg, самі ж кажете, навіщо обмежуватися базой

  • @psix9618
    @psix9618 2 ปีที่แล้ว

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

  • @ИльназГарайшин-ч6о
    @ИльназГарайшин-ч6о 2 ปีที่แล้ว

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

  • @annadwar9534
    @annadwar9534 ปีที่แล้ว +1

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

  • @Диана-с3ф2ъ
    @Диана-с3ф2ъ ปีที่แล้ว

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

  • @BillGadov
    @BillGadov ปีที่แล้ว

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

  • @baytszy
    @baytszy 2 ปีที่แล้ว

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

  • @sivilrishar2927
    @sivilrishar2927 2 ปีที่แล้ว

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

  • @Grigoren_com
    @Grigoren_com ปีที่แล้ว

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

  • @velikorossnationalist4259
    @velikorossnationalist4259 ปีที่แล้ว

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

  • @domakook753
    @domakook753 10 หลายเดือนก่อน

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

  • @xu2593
    @xu2593 2 ปีที่แล้ว

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

  • @ДмитрийЛуба
    @ДмитрийЛуба ปีที่แล้ว

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

  • @m8l8t20
    @m8l8t20 หลายเดือนก่อน

    дай бог тебе место в вальхале

  • @demidronder
    @demidronder ปีที่แล้ว

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

  • @vitaliisapryga4825
    @vitaliisapryga4825 2 ปีที่แล้ว

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

  • @Tech-m3o
    @Tech-m3o 2 ปีที่แล้ว

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

  • @Ushjsuuhensb
    @Ushjsuuhensb 5 หลายเดือนก่อน

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

  • @ruslanshyiovych736
    @ruslanshyiovych736 ปีที่แล้ว

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

  • @ИрикК
    @ИрикК 2 ปีที่แล้ว

    Хорошие у вас уроки. Делайте шрифт крупнее, на экране с высоким разрешением приходится напрягать глаза

    • @vadymprokopchuk
      @vadymprokopchuk  2 ปีที่แล้ว

      буду стараться, спасибо

  • @Игорь-ц1т3ж
    @Игорь-ц1т3ж 2 ปีที่แล้ว

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

  • @dimadiv6583
    @dimadiv6583 2 ปีที่แล้ว +3

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

  • @ДмитрийВяхирев-щ3х
    @ДмитрийВяхирев-щ3х 2 ปีที่แล้ว

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

  • @psix9618
    @psix9618 2 ปีที่แล้ว

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

  • @bergghest
    @bergghest 6 หลายเดือนก่อน

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

  • @hawardgreenwich3249
    @hawardgreenwich3249 2 ปีที่แล้ว

    Шо такое SVG?

  • @megalodonn9356
    @megalodonn9356 2 ปีที่แล้ว

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

  • @artemiy8234
    @artemiy8234 2 ปีที่แล้ว

    I'm first 🤠

  • @maxet2374
    @maxet2374 2 ปีที่แล้ว

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

  • @yuriykolomytsyn2352
    @yuriykolomytsyn2352 ปีที่แล้ว

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

  • @АнтонПетров-й8э
    @АнтонПетров-й8э 2 ปีที่แล้ว +3

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

  • @ponokost
    @ponokost 2 ปีที่แล้ว

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

    • @ponokost
      @ponokost 2 ปีที่แล้ว

      23.38 топчик))

  • @lounge_studio
    @lounge_studio 2 ปีที่แล้ว

    Круто!

  • @ПавелКузнецов-ы2к
    @ПавелКузнецов-ы2к 2 ปีที่แล้ว

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

  • @MrStelian4k
    @MrStelian4k 2 ปีที่แล้ว

    Красава

  • @valeraaligator999
    @valeraaligator999 2 ปีที่แล้ว

    Дякую!

  • @_Iokanaan_Marusidze_
    @_Iokanaan_Marusidze_ 2 ปีที่แล้ว

    Дякую !

  • @denisboyko264
    @denisboyko264 2 ปีที่แล้ว

    дякую

  • @egorbystrov9770
    @egorbystrov9770 2 ปีที่แล้ว

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

  • @svitlanakalmutska8998
    @svitlanakalmutska8998 2 ปีที่แล้ว +1

    Дякую за відео. Єдине прохання на майбутні відоси: якщо матимете також цікаві англомовні статті по темі - кидайте, будь ласка, лінк і на них, бо дуже не хочеться послуговуватися росконтеном.

  • @Диман-е9ш
    @Диман-е9ш 2 ปีที่แล้ว

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

  • @Александр-я6ц2ы
    @Александр-я6ц2ы 2 ปีที่แล้ว

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

    • @gio2156
      @gio2156 2 ปีที่แล้ว

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

    • @Александр-я6ц2ы
      @Александр-я6ц2ы 2 ปีที่แล้ว +1

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 ปีที่แล้ว

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

    • @Александр-я6ц2ы
      @Александр-я6ц2ы 2 ปีที่แล้ว

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

    • @Александр-я6ц2ы
      @Александр-я6ц2ы 2 ปีที่แล้ว

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

  • @felixfelixovich2150
    @felixfelixovich2150 2 ปีที่แล้ว

    Ты лучший

  • @Andrew-q5w
    @Andrew-q5w 2 ปีที่แล้ว

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