Category: svg

23
Апр
2019

Уроки CSSbattle

В начале апреля появилась затягивающая и познавательная онлайн-игра для верстальщиков — CSSbattle.dev. Вашего покорного слугу угораздило «влипнуть» в нее практически с самого начала (и даже пару раз какое-то время побыть в самом топе:). Это был интересный и поучительный опыт, которым хочется поделиться. Придумали и реализовали эту игру два друга-тёзки…
ДАЛЕЕ

09
Апр
2018

Анимированный радиальный SVG прогресс-бар

От автора: для клиентского проекта нам поручили не что иное, как сделать прогресс бар, причем радиальный. Раньше мы использовали целые Canvas графические библиотеки (156k / 44k gzip), но это казалось излишним. Я посмотрел проект Lottie от Airbnb, в котором экспортируется анимация After Effects, как JSON. Это классно для сложной анимации, но зависимости для одной этой […]

22
Май
2015

Трансформации для SVG-элементов

Перевод статьи Transforms on SVG Elements с сайта css-tricks.com, автор — Ана Тудор. Перед вами гостевой пост Аны Тудор. Ана всегда проделывает грандиозную работу, погружаясь в математику, стоящуя за тем, что мы можем делать графически в вебе. В данном случае,…
ДАЛЕЕ

06
Апр
2015

Маленькая неочевидность в SVG-паттернах: по следам трансформации-невидимки

Взрыв популярности SVG-графики приносит не только новые дизайнерские удачи, но и неожиданные «открытия» неочевидных тонкостей, малоизвестных особенностей и «белых пятен», разбросанных по обширной SVG-спецификации. Даже признанные гуру фронтенда не застрахованы от таких сюрпризов. Вот и наше расследование началось с недоуменного…
ДАЛЕЕ

25
Фев
2015

Обеспечение лучшей резервной поддержки SVG и управление оформлением с помощью элемента <picture>

Перевод статьи Better SVG Fallback and Art Direction With The <picture> Element с сайта http://sarasoueidan.com/, автор — Сара Суэйдан. Помимо использования SVG в CSS в качестве фонового изображения, вы можете использовать SVG и для изображений в контенте HTML с помощью одной из нескольких техник…
ДАЛЕЕ

18
Фев
2015

Использование встроенных SVG с резервной поддержкой Grunticon

Перевод статьи Inline SVG with Grunticon Fallback с сайта css-tricks.com, c разрешения автора — Криса Койера. Вышел Grunticon 2! Он обзавелся новым вебсайтом. Grunticon — это невероятно крутой инструмент для создания системы SVG-иконок. Рабочий процесс выглядит следующим образом: Поместите все…
ДАЛЕЕ

05
Дек
2014

Карманное руководство по написанию SVG. Глава 6

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

29
Ноя
2014

Карманное руководство по написанию SVG. Глава 5

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

21
Ноя
2014

Карманное руководство по написанию SVG. Глава 4

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

15
Ноя
2014

Карманное руководство по написанию SVG. Глава 3

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

08
Ноя
2014

Карманное руководство по написанию SVG. Глава 2

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

02
Ноя
2014

Карманное руководство по написанию SVG. Глава 1

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

02
Ноя
2014

Карманное руководство по написанию SVG. Введение

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел. Введение Глава 1. Организация документа Глава 2. Базовые фигуры и контуры Глава 3. Рабочая область Глава 4. Заливки и обводки Глава 5. Элемент <text> Глава 6. Продвинутые…
ДАЛЕЕ

20
Окт
2014

Руководство по SVG-анимациям (SMIL)

Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суэйдан. Публикуется с разрешения автора. Перед вами гостевой постинг Сары Суэйдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до…
ДАЛЕЕ