SVG Filters — разбираемся и сравниваем с CSS Filters

Опубликовано: 16 Сентябрь 2026
на канале: Ювебдизайн (uwebdesign)

10,155

134

uWebDesign Обзор #40 — в этом обзоре мы разберем технологию SVG filters, сравним ее с более молодыми CSS Filters и рассмотрим большое количество конкретных примеров.

Плейлист про SVG:    • Все про SVG

Полезные ссылки:
• Мой Codepen с W3C примером: http://codepen.io/websanya/pen/eNBOPE
• Мой Codepen со всеми фильрами: http://codepen.io/websanya/pen/bdwEQJ

• Статья на CSS-Tricks: https://css-tricks.com/gooey-effect/
• Squiggly Text: http://codepen.io/lbebber/pen/KwGEQv
• SVG Filters Showcase: http://codepen.io/jorgeatgu/pen/wBRmBZ
• Blurred background with filters: http://codepen.io/ejsado/pen/kmrtp
• Grungy text: http://codepen.io/DirkWeber/pen/LVRPEd

• Документация W3C: http://dev.w3.org/fxtf/filters/
• Поддержка браузеров CSS Filters: http://caniuse.com/#feat=css-filters
• Поддержка браузеров SVG Filters: http://caniuse.com/#feat=svg-filters

Сегодняшняя музыка — Nest HQ Guest Mix: Zeds Dead [Full Flex Express Edition]. Все права принадлежат не нам.

Мы на твиттере:
• Александр Гончаров:   / websanya
• Никита Тарасов:   / justelementar

uWebDesign это:
• Сайт: http://uwebdesign.ru
• Подкаст в iTunes: https://itunes.apple.com/ru/podcast/u...
• Паблик на ВК: http://vk.com/uwebdesign
• Лента в Twitter:   / uwebdesgn
• Канал на YouTube:    / uwebdesign
• Страница на Facebook:   / uwebdesgn