#11. SVG для НАЧИНАЮЩИХ (Оптимизируем SVG. Спрайты и минификаторы)

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024
  • Поддержать автора:
    www.donational...
    Минификатор: jakearchibald....
    ***** Музыка:
    Music from Tunetank.com
    SFRecords - Summer Lofi (Copyright Free Music)
    Download free: tunetank.com/t...
    IsaevIlnarMusic - Afternoon (Copyright Free Music)
    Download free: tunetank.com/t...
    IsaevIlnarMusic - Calmness (Copyright Free Music)
    Download free: tunetank.com/t...
    MelancholicBird - Night Of Nostalgia (Copyright Free Music)
    Download free: tunetank.com/t...
    Alex GL - Morning Walk (Copyright Free Music)
    Download free: tunetank.com/t...

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

  • @AntonioBenderas
    @AntonioBenderas Год назад +5

    7:30 path fill="currentColor"

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

      Блин, а я чота и не вспомнил про currentColor :с
      Надо будет доснять видео. Спасибо за подсказку

    • @AntonioBenderas
      @AntonioBenderas Год назад +2

      @@kakieToYroki только я не правильно написал, каррентКолор не path, а родитель надо задавать

  • @AntonioBenderas
    @AntonioBenderas Год назад +3

    То есть в спрайт по сути в 1 файл можно запихнуть 100 иконок и в разных частях страницы отображать разные части спрайта через позишн относительно viewBox?

    • @kakieToYroki
      @kakieToYroki  Год назад +3

      Да. Еще я видел техники, когда этот спрайт в localStorage сохраняют, чтобы каждый раз пользователь не скачивал этот файл. И получается такая небольшая оптимизация. Мы вот у себя на проекте хотим это внедрить :)

    • @exelione2229
      @exelione2229 7 месяцев назад

      слушай, а интересно

  • @AntonioBenderas
    @AntonioBenderas Год назад +2

    А можно же спрайт ввнести из html в отдельный файл sprite.svg и обращаться к нему в href="./img/sprite.svg#idname"

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

      Хмм… интересный способ. Надо будет попробовать

Следующие
Автовоспроизведение
#12. SVG для НАЧИНАЮЩИХ (Заключение)5:23#12. SVG для НАЧИНАЮЩИХ (Заключение)
#12. SVG для НАЧИНАЮЩИХ (Заключение)Какие-то уроки
Просмотров 711
#5 Gulp сборка проекта | assets, images, svg-sprite30:35#5 Gulp сборка проекта | assets, images, svg-sprite
#5 Gulp сборка проекта | assets, images, svg-spriteФронтендер
Просмотров 4,7 тыс.
How to create and use an SVG Sprite18:29How to create and use an SVG Sprite
How to create and use an SVG SpriteSelf Teach Me
Просмотров 18 тыс.
Gatlinburg & Pigeon Forge Hurricane Helene Update Tour | How Bad Is The Damage?20:42Gatlinburg & Pigeon Forge Hurricane Helene Update Tour | How Bad Is The Damage?
Gatlinburg & Pigeon Forge Hurricane Helene Update Tour | How Bad Is The Damage?Adventure Is Out There
Просмотров 725 тыс.
Hurricane or Tropical Storm Threat Again...15:50Hurricane or Tropical Storm Threat Again...
Hurricane or Tropical Storm Threat Again...Mr. Weatherman
Просмотров 1 млн
4.5 Years Living In An Abandoned Ghost Town41:314.5 Years Living In An Abandoned Ghost Town
4.5 Years Living In An Abandoned Ghost TownGhost Town Living
Просмотров 294 тыс.
38 Hours on Amtrak Overnight Train (WANTED FUGITIVE ONBOARD)38:4138 Hours on Amtrak Overnight Train (WANTED FUGITIVE ONBOARD)
38 Hours on Amtrak Overnight Train (WANTED FUGITIVE ONBOARD)Kara and Nate
Просмотров 800 тыс.
Header. Svg спрайты.21:20Header. Svg спрайты.
Header. Svg спрайты.Web Skills. Уроки по веб-разработке
Просмотров 301
35 pet-projects на Javascript. Идеи для начинающих frontend-разработчиков. Как выбирать проекты?15:3235 pet-projects на Javascript. Идеи для начинающих frontend-разработчиков. Как выбирать проекты?
35 pet-projects на Javascript. Идеи для начинающих frontend-разработчиков. Как выбирать проекты?Northern Lights
Просмотров 4,2 тыс.
🧪🧪🧪🧪Как увидеть гиперпространство (4-е измерение)23:19🧪🧪🧪🧪Как увидеть гиперпространство (4-е измерение)
🧪🧪🧪🧪Как увидеть гиперпространство (4-е измерение)Уже Наступило
Просмотров 1,9 млн
Ховер эффекты svg с помощью currentColor12:14Ховер эффекты svg с помощью currentColor
Ховер эффекты svg с помощью currentColorОнлайн-школа METHED
Просмотров 10 тыс.
Как создавать SVG спрайты? | SVG Sprites10:06Как создавать SVG спрайты? | SVG Sprites
Как создавать SVG спрайты? | SVG SpritesBrainsCloud
Просмотров 76 тыс.
SVG. Руководство по использованию векторных изображений47:42SVG. Руководство по использованию векторных изображений
SVG. Руководство по использованию векторных изображенийMaxGraph - cайты как страсть
Просмотров 16 тыс.
SVG Path Tutorial • Easy to Understand!16:44SVG Path Tutorial • Easy to Understand!
SVG Path Tutorial • Easy to Understand!Roberto Matthews
Просмотров 55 тыс.
Структура файлов и каталогов в Linux20:28Структура файлов и каталогов в Linux
Структура файлов и каталогов в LinuxAleksey Samoilov
Просмотров 399 тыс.
SVG Viewport and viewBox (For Complete Beginners)12:25SVG Viewport and viewBox (For Complete Beginners)
SVG Viewport and viewBox (For Complete Beginners)Envato Tuts+
Просмотров 28 тыс.
Airpod Through Glass Trick! 😱 #shorts00:19Airpod Through Glass Trick! 😱 #shorts
Airpod Through Glass Trick! 😱 #shortsWian
Просмотров 196 тыс.
Почему ИСЛАМ НЕДОЛЮБЛИВАЛ ЗУБАЙРУ ТУХУГОВА #мма00:41Почему ИСЛАМ НЕДОЛЮБЛИВАЛ ЗУБАЙРУ ТУХУГОВА #мма
Почему ИСЛАМ НЕДОЛЮБЛИВАЛ ЗУБАЙРУ ТУХУГОВА #ммаТайна ММА
Просмотров 132 тыс.
Арабы. Народ без империи @posle_zavtra33:14Арабы. Народ без империи @posle_zavtra
Арабы. Народ без империи @posle_zavtraПослезавтра
Просмотров 962 тыс.
I Took An iPhone 16 From A POSTER! 😱📱 #shorts00:18I Took An iPhone 16 From A POSTER! 😱📱 #shorts
I Took An iPhone 16 From A POSTER! 😱📱 #shortsWian
Просмотров 1,5 млн
Ко мне подкатил бармен00:58Ко мне подкатил бармен
Ко мне подкатил барменDobryak
Просмотров 137 тыс.
Почему?00:22Почему?
Почему?Сам себе сушист
Просмотров 283 тыс.
Teeth gadget every dentist should have 😬00:20Teeth gadget every dentist should have 😬
Teeth gadget every dentist should have 😬TheSoul Music Family
Просмотров 880 тыс.
ПОЮ ВЖИВУЮ🎙3:19:12ПОЮ ВЖИВУЮ🎙
ПОЮ ВЖИВУЮ🎙Саша Квашеная
Просмотров 881 тыс.