16. HTML векторная графика, тег svg. Как выгрузить SVG изображение из Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ม.ค. 2025

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

  • @КонстантинКашапов
    @КонстантинКашапов 5 หลายเดือนก่อน +6

    Крутейшие видео. Просто, понятно, быстро. Обычно все подобные видео по 40 минут зачем-то, а тут на много коротких разбито и легко смотрится, можно подтему посмотреть, обдумать, передохнуть и дальше. А в длинном видео теряешься в итоге. Спасибо за уроки)

  • @ВладЛитвин-с6д
    @ВладЛитвин-с6д 11 หลายเดือนก่อน +3

    Кратко и ясно)

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

    Крутая подача. Спасибо 😊

  • @darlindtryhgbvgft
    @darlindtryhgbvgft 5 หลายเดือนก่อน +1

    спасибо!

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

    Спасибо 👍

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

    ждем видео про спрайты, использовал use тег для спрайтов, но вроде читал, что есть более современные способы. могу ошибаться

  • @АнтонИванов-т4р3г
    @АнтонИванов-т4р3г ปีที่แล้ว +1

    А ещё SVG-код можно добавлять через CSS, с помощью свойства content у псевдоэлементов.
    К сожалению, поменять цвет можно только изменив вставленный SVG код. Поэтому CSS анимации работать не будут.
    Но зато этот способ очень заметно улучшает чистоту html разметки

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

      Да, всё верно. Про более глубокую работу с SVG ещё точно будет видео на канале, где и это упомяну, спасибо :)

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

    Александр, спасибо за видео! Звук довольно тихий, пришлось макбук на полную выкручивать.

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

      Исправляюсь! Уже буквально через пару роликов аудиодорожка с голосом будет выкручена на максимум :)

  • @it400
    @it400 10 วันที่ผ่านมา

    Когда-то краем уха слышал про такой инструмент как Canvas в HTML, я так понял на нём тоже что-то рисуют, и на первый взгляд он похож на SVG, тоже как-будто там на математике все устроено. Для чего он используется? Для игр? Вам приходилось с ним сталкиваться?

    • @AleksanderLamkov
      @AleksanderLamkov  10 วันที่ผ่านมา +1

      Для игр и сложной графики (диаграмм, к примеру). Использовал этот тег напрямую пару раз в экспериментальных целях. Зачастую есть библиотеки (ThreeJS, к примеру), которые работают под капотом с канвасом, ну а сами предоставляют более удобный интерфейс.

    • @it400
      @it400 10 วันที่ผ่านมา

      @@AleksanderLamkov Понял, спасибо за ответ)

  • @tosterman3505
    @tosterman3505 11 วันที่ผ่านมา

    Скопировал svg логотип (небольшой) с онлайн сайта и вставил в учебную html разметку, где он стал оочень огромных размеров. Почему так произошло???

    • @AleksanderLamkov
      @AleksanderLamkov  11 วันที่ผ่านมา

      Значит на сайте, с которого скопировал SVG, были применены стили к этому элементу, которые ограничивали его размер.

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

    4:27 А почему девелопер мод в фигме не юзаешь? Вроде на острие технологий, а такую полезную фичу игноришь. Вон же у тебя переключатель выключен.

    • @AleksanderLamkov
      @AleksanderLamkov  ปีที่แล้ว +4

      Потому что это видео не про фигму. А выгружать ассеты можно и из стандартного режима.

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

      @@AleksanderLamkov можно. Согласен. Но в девелопер моде это бы заняло меньше экранного времени. ИМХО

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

    4:00 В 99% ситуаций фронтендеры сами код не пишут. Согласен. Но делают они это зря. Качество кода SVG-файла сгенерированного Фигмой или векторным редактором такое-же низкое, как автоматически сгенерированный программими HTML. В 90% случаев руками можно нарисовать иконку во много раз проще, чем это делают проги. Ни какое автоматическое сжатие так не сможет. Но если это видео для новичков, то им об этом можно пока и не говорить.

    • @alexb.2616
      @alexb.2616 ปีที่แล้ว +1

      Да ну как же зря. Качества вполне хватает. Ещё не хватало учиться иконки рисовать. Давайте ещё и на это время потратим помимо изучения 100500 технологий.

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

      @@alexb.2616 Такова профессия. Рано или поздно выучишь и 200600 технологий. Если не сдашься завтра конечно :)

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

    2:48 PNG и ни какой другой? Здрасте, профессионалушка... А WEBP кому разрабатывали?

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

      Спасибо за комментарий!
      Евгений, видео - для новичков. Я привожу в примеры те форматы, которые присутствуют в стандартном наборе селекта при экспорте ассета из фигмы.
      Я бы мог перечислить все форматы, поддерживаемые браузером, но чтобы что? Я углубляюсь в тему настолько, насколько это нужно новичкам.