Векторная графика SVG. HTML уроки

Поделиться
HTML-код
  • Опубликовано: 15 июл 2020
  • Привет!📢
    В этом уроке, я рассказываю как использовать svg иконки на сайте. Рассказываю про отличия svg от png. Также показываю как влияет использование svg на оптимизацию сайта.
    SVG - язык разметки масштабируемой векторной графики.
    SVG изображения можно увеличивать сколько угодно абсолютно без потери качества.
    НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
    Желаю приятного обучения! 🔥
    ▶ Телеграм: t.me/Dmitry_Kolotilshikov
    📢 Автор видеоурока: Дмитрий Колотильщиков

Комментарии • 62

  • @maclikbez
    @maclikbez 4 месяца назад +1

    Спасибо огромное. Единственный кто объяснил как это сделать!!!

  • @katewilson9871
    @katewilson9871 3 месяца назад +1

    Большое тебе спасибо!!

  • @maximmaximov1038
    @maximmaximov1038 3 года назад +9

    Спасибо! Единственное толковое объяснение! Подписался везде.

  • @user-mu9gf6kf8t
    @user-mu9gf6kf8t 3 года назад +1

    Благодарю вас за отличный урок!

  • @olik9253
    @olik9253 Год назад +1

    Спасибо! Интересно и понятно было

  • @NatalyaPB
    @NatalyaPB 3 месяца назад +1

    Спасибо!

  • @konstantinreut2577
    @konstantinreut2577 2 года назад +1

    Да, ты просто красава! Спасибо огромное!)

  • @Alexus1504
    @Alexus1504 2 года назад +1

    Отличный урок!

  • @maxet2374
    @maxet2374 3 года назад +2

    Просто и понятно. молодец

  • @gorbulevsv
    @gorbulevsv 6 месяцев назад +1

    Спасибо🎉

  • @user-du3ek7wf5d
    @user-du3ek7wf5d 2 года назад +1

    Спасибо за инфу!

  • @its_fley
    @its_fley Год назад +1

    Спасибо большое за это видео! Очень помогли с ховером

  • @muradbendaliyev3624
    @muradbendaliyev3624 3 года назад +1

    Спасибо большое! С меня лайк и подписка

  • @user-jq6tr6rr8v
    @user-jq6tr6rr8v 7 месяцев назад +1

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

  • @nikolajml
    @nikolajml 4 года назад +8

    Было полезно

  • @DodgerEcho
    @DodgerEcho 2 года назад +1

    Старался лайк достоин ты

  • @victorirzunov3108
    @victorirzunov3108 3 года назад +3

    Очень полезно

  • @aassdd549
    @aassdd549 5 месяцев назад +1

    Like!

  • @aleksandrsrudkevics6384
    @aleksandrsrudkevics6384 3 года назад +1

    Супер

  • @ivankrashevskyi3837
    @ivankrashevskyi3837 3 года назад +5

    Познавательно, но как подключать картинки с макета при верстке сохраненные в svg? Там внутри не такой код.

  • @light-bringer
    @light-bringer 2 года назад +8

    А есть способ импортнуть эти пути из отдельного файла и вставить как переменную например, а не засорять html документ этой кучей букв?)

  • @zaya2868
    @zaya2868 3 года назад +3

    🔥🔥🔥🔥🔥🔥

  • @user-xc6fv1kj6z
    @user-xc6fv1kj6z 2 года назад

    спасибо

  • @xapbu8883
    @xapbu8883 2 года назад +1

    отличное видео. спасибо!

  • @L1yoon
    @L1yoon 3 года назад +1

    ты супер.
    больше роликов.
    больше инфо.

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  3 года назад

      спасибо за мотивацию!)

    • @L1yoon
      @L1yoon 3 года назад +1

      спасибо
      по больше роликов.
      js

  • @Крокус-Сити-Хол-Горит-Красиво

    Спасибо за ролик.
    Добавлю от себя что не обязательно svg весит меньше чем например png.
    Я сгенерил svg по подобию аналогичного png и вышла такая картина
    logo_128_1.svg 391 B 13 ms
    logo_128_1.png 390 B 11 ms

    • @mynameiscat__
      @mynameiscat__ Год назад

      это в байтах тебе показывает, то есть это треть одного килобайта

  • @dmitry_kolotilshikov
    @dmitry_kolotilshikov  4 года назад +1

    ▶ Telegram: t.me/Dmitry_Kolotilshikov

  • @suffering2024
    @suffering2024 3 года назад +3

    Sir, I hope you can make videos in English for your international viewers.

  • @MrSirus83
    @MrSirus83 2 года назад

    однозначно решает

  • @sergey_dm
    @sergey_dm 3 года назад

    Добрый день. Если svg и symbol добавить в отдельный файл браузеры не отображают эти иконки. Как обойти запрет браузеров на отображение svg/

  • @deanwichester6412
    @deanwichester6412 9 месяцев назад +1

    скрыть дисплей, потом вызвать?

  • @Anitizer
    @Anitizer 2 года назад +1

    полезное видео
    но запутанно когда подключаешь SVG картину к сайту и задаешь id

  • @user-ww8tb2vz1r
    @user-ww8tb2vz1r 3 года назад +4

    Инфа про svg неполная. Например что такое viewbox(на этом могут ногу сломать)

    • @konsul2272
      @konsul2272 3 года назад

      View box что это? Расскажите пожалуйста

  • @ashenmemorias1013
    @ashenmemorias1013 2 года назад

    пиво, хочу холодное я хряпнуть пиво

  • @crocus161
    @crocus161 3 года назад

    А нужно ли сохранять svg иконки в папке для картинок или можно этого и не делать и просто вставлять в разметку?

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  3 года назад

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

  • @user-ix5vl2ry8j
    @user-ix5vl2ry8j Год назад +1

    фух,наконецто более понятно стало.Ну можна же спокойно обьяснить,чего все усложняют,куда то спешат,молча печатают и потом:понятно???

  • @SeganMert
    @SeganMert 3 года назад +3

    Хэй, видос годный, но не упомянул о возможности разных методов вставки SVG, в конторах не одобрят такую грязь в коде.
    И да, точечное изменение цвета, возможно, CSS-переменные помогут!
    Всем guys - peace :3

    • @mynameiscat__
      @mynameiscat__ Год назад +1

      а как одобряют, как это вынести или минимизировать?

  • @alexchannel7406
    @alexchannel7406 3 года назад +1

    А если вставлять svg в теге img, вместо jpg или png, это сильно будет отличаться от вашего метода?

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  3 года назад +1

      в уроке дело в том, что вы вставляете код, а не изображение, это производительнее и меньше весит

  • @AnastasiiaSagittarius
    @AnastasiiaSagittarius 3 года назад

    Здравствуйте, можете помочь, очень нужно! Как преобразовать SVG файл, который имеет иконку браузера гугл и открывается в гугле в нормальный обычный SVG формат, который открывается в соответствующих программах, а не гугле

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  3 года назад

      Здравствуйте! вы можете переконвертировать файл в Adobe Photoshop или в Adobe Illustrator

    • @AnastasiiaSagittarius
      @AnastasiiaSagittarius 3 года назад

      @@dmitry_kolotilshikov благодарю вас за ответ, а как это сделать в иллюстраторе, объясните, пожалуйста, вот я открыла его в иллюстраторе, а потом как переконвертировать?

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  3 года назад

      @@AnastasiiaSagittariusнужно выделить каждый элемент картинки и правой кнопкой мыши выбрать export selection

    • @AnastasiiaSagittarius
      @AnastasiiaSagittarius 3 года назад +1

      @@dmitry_kolotilshikov благодарю вас, все получилось))))

  • @Anitizer
    @Anitizer 2 года назад

    и вообще цвет в svg не меняется у меня хотя сделал как у тебя

  • @dmitriyzaxarov1354
    @dmitriyzaxarov1354 2 года назад

    вставляю цветные а они чёрно-белые по факту

  • @shpioner42
    @shpioner42 9 месяцев назад

    слава україні

  • @user-wj4pc7te1j
    @user-wj4pc7te1j 9 месяцев назад

    И нахрена так через жопу?! Сначала скрыть дисплей, потом вызвать?

  • @user-my1rp2bi7o
    @user-my1rp2bi7o 3 года назад +1

    Много ненужной инфы, диз

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  3 года назад +1

      спасибо за первый дизлайк на канале)

    • @user-gd5xg5hd6m
      @user-gd5xg5hd6m 3 года назад +2

      @@dmitry_kolotilshikovВсе доходчиво и понятно. Спасибо.

    • @denzeroneYT
      @denzeroneYT Год назад +1

      "Не нужной" для тебя, а мне даже этой инфы не достаточно, чтобы всё понять, кто ж виноват, что ты "Гением родился", если ты уже шаришь, нахер смотришь? Я смотрю как новичок, и эта инфа полезная + даже хотелось бы еще некоторые моменты уточнить