SVG

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

Максим Усачев
5

Перевод статьи Transforms on SVG Elements с сайта css-tricks.com, автор — Ана Тудор.

Перед вами гостевой пост Аны Тудор. Ана всегда проделывает грандиозную работу, погружаясь в математику, стоящуя за тем, что мы можем делать графически в вебе. В данном случае, это очень кстати, поскольку есть несколько способов работы с SVG-трансформациями и они требуют немного математического мышления, особенно для преобразования одного типа в другой для наилучшей кроссбраузерной поддержки. Давай, Ана.

Как и HTML-элементами, SVG-элементами можно управлять при помощи функций для трансформации. Однако, далеко не всё работает с SVG-элементами так, как с HTML-элементами

Для начала, CSS-трансформации для SVG-элементов не работают в IE. Конечно, есть вариант с использованием SVG-атрибутов трансформации для IE, в случае, если нам нужно применять для наших элементов только 2D-трансформации.

(обн. )

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

SelenIT SelenIT
3

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

«Дурацкий» вопрос по #svg: почему первое работает, а второе нет? Единственное различие — width=150 против width=100

Речь шла о следующем примере:

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

stasgavrylov
3

Перевод статьи Better SVG Fallback and Art Direction With The <picture> Element с сайта http://sarasoueidan.com/, автор — Сара Суэйдан.

Помимо использования SVG в CSS в качестве фонового изображения, вы можете использовать SVG и для изображений в контенте HTML с помощью одной из нескольких техник для их встраивания. Каждая из них имеет свои преимущества и сценарии использования.  Если вам не нужна интерактивность или возможность подключения внешних стилей, стандартным способом загрузки SVG-изображения будет тег <img>, но у него есть один недостаток: на сегодняшний день для создания запасных вариантов изображений и/или для управления оформлением страницы необходимо использовать JavaScript. В этой статье мы поговорим о лучшем методе для достижения этой цели: с помощью элемента <picture>.

Перед вами не учебник по использованию <picture>. На просторах интернета существует множество ресурсов со всей информацией, которую нужно знать об этом элементе. Поэтому если вы с ним не знакомы, обратитесь к последнему разделу этой статьи – там вы найдете список ресурсов, чтобы узнать всё, что необходимо. С другой стороны, эта статья не требует от вас особых навыков работы с <picture>. Как вы сами сможете убедиться, все примеры в ней в большинстве своём понятны без разъяснений.

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

stasgavrylov
2

Перевод статьи Inline SVG with Grunticon Fallback с сайта css-tricks.com, c разрешения автора — Криса Койера.

Вышел Grunticon 2! Он обзавелся новым вебсайтом. Grunticon — это невероятно крутой инструмент для создания системы SVG-иконок. Рабочий процесс выглядит следующим образом:

  1. Поместите все SVG-иконки в одну папку
  2. Запустите Grunticon в этой папке, и он подготовит всё, что необходимо
  3. Поместите в <head> крохотный скрипт
  4. И используйте HTML в формате <div class="icon-image"></div> там, где вам понадобится использовать иконки
  5. Наслаждайтесь!
(обн. )

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

Максим Усачев
12

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

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

Максим Усачев
8

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

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

Максим Усачев
7

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG
(обн. )

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

Максим Усачев
9

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

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

Максим Усачев
8

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG
(обн. )

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

Максим Усачев
7

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG
(обн. )

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

Максим Усачев
12

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG
(обн. )

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

SelenIT SelenIT
29

Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суайдан. Публикуется с разрешения автора.

Перед вами гостевой постинг Сары Суайдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до основания. Здесь она погружается в недра SMIL (и смежных технологий) и синтаксиса анимаций, встроенного в сам SVG, и делится с нами этим внушительным руководством.

Введение

SVG-графику можно анимировать с помощью анимационных элементов. Эти анимационные элементы изначально были определены в спецификации анимаций SMIL. В их число входят:

  • <animate> — позволяющий анимировать скалярные атрибуты и свойства в течение периода времени;
  • <set> — являющийся удобным сокращением для animate, что удобно для задания анимаций для нечисловых атрибутов и свойств, наподобие свойства visibility;
  • <animateMotion> — позволяющий двигать элемент по заданной траектории;
  • <animateColor> — изменяющий значение цвета каких-либо атрибутов или свойств с течением времени. Заметьте, что элемент <animateColor> устарел, и вместо него рекомендуется использовать обычный элемент animate для свойств, принимающих значения цвета. Тем не менее, он всё еще есть в спецификации SVG 1.1, где он явно помечен как устаревший; из спецификации SVG 2 он удален полностью.

В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые со спецификацией SMIL animations; эти расширения включают атрибуты, расширяющие функциональность элемента <animateMotion>, и дополнительные анимационные элементы. В расширения SVG входят: