Cтатьи по тегу «SVG»

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

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

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

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

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

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

Эффекты с несколькими слоями при помощи контуров обрезки, фильтров и режимов наложения в CSS

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

Перевод статьи MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Режимы наложения, контуры обрезки и фильтры в CSS делают ряд эффектов, которые раньше были доступны только в PhotoShop, возможными в вебе

Одна из возможностей, которая объединяет эти CSS-свойства — наложение изображений, для сравнений «до — после», или чтобы реализовать другие визуальные эффекты. Примером может быть наложение лица Хью Джекмана поверх фото Клинта Иствуда в том же возрасте; что особенно эффектно, поскольку они обладают похожими формой черепа и чертами лица.

Весенние новинки Рабочей группы CSS

SelenIT SelenIT
0

Прошедшая половина весны, похоже, выдалась активной и плодотворной для Рабочей группы CSS в W3C. Почти весь март прошел в постоянных телеконференциях и встречах, на которых было принято немало конструктивных решений. В частности, решено больше не менять текущую спецификацию Flexbox (наконец!), поскольку браузеры до сих пор не могут разобраться с последствиями предыдущей смены насчет абсолютно позиционированных потомков флекс-контейнера. Выпущено три новых интересных спецификации и активно дорабатывались существующие. Много внимания уделялось заслуженному модулю CSS3 UI (в частности, уточнению нюансов полезного свойства box-sizing) — он обновлялся дважды, последний раз буквально позавчера.

(обн. )

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

SelenIT SelenIT
3

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

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

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

Использование встроенных 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 входят:

Универсальная независимость при помощи SVG

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

В этой статье мы рассмотрим масштабируемую векторную графику (Scalable Vector Graphics или сокращённо SVG), как одну из наиболее недостающих технологий в современном сайтостроении.

Прежде чем приводить конкретные примеры, давайте посмотрим на уровень web’а сегодня и то, куда он движется. За последние годы дизайн сайтов обозначил новую тенденцию в развитии техники универсального дизайна (Responsive Website Design). И это к лучшему. По существу, универсальный дизайн обеспечивает переход от использования полюбившихся нам фиксированных по ширине страниц, к вёрстке плавающих форм с интеллектуальным перемещением их содержимого. Добавьте к этому продуманную стратегию содержимого и мобильный подход, и мы уже начинаем предлагать универсальный опыт адаптации под множество устройств и браузеров, удовлетворяя потребности конечного пользователя.