Презентация на тему WEB. CSS фреймворки. Работа с графикой SVG – анимация, спрайты, инструменты

SVG: https://jakearchibald.github.io/svgomg/
Лекція 39. Web.

и сжатия SVG: http://petercollingridge.appspot.com/svg-editor
Лекція 39. Web.

an inline SVG. https://www.npmjs.com/package/svg-inject

Позволяет использовать преимущества не-инлайнового SVG, в то

же время работая со всеми свойствами SVG используя CSS-селекторы.
Например: псевдокласс hover и т.д.

Лекція 39. Web.

SVG-анимации:
Использование тега  прямо в SVG коде (спецификация анимаций SMIL).

Использование библиотек Snap.svgИспользование библиотек Snap.svg, SVG.js и подобных.
Анимация с помощью CSS-свойств прямо в инлайновом SVG.

Лекція 39. Web.

толщина границы;
размер изображения.
Лекція 39. Web.

CSS:
font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, direction,

letter-spacing, text-decoration, unincode-bidi, word-spacing, visibility, text-rendering, writing-mode, clip-path, mask-opacity, filter, pointer-events, image-rendering, clip, color, cursor, display, overflow.
Уникальные SVG-свойства:
clip-rule, flood-color, flood-opacity, stop-opacity, kerning, tech-anchor, color-profile, color-rendering, fill, fill-opacity, fill-rule, marker, marker-end, marker-mid, marker-start, stroke, stroke-width, stop-color, lighting-color, enable-background, dominant-baseline, color-interpolation-filters, color-interpolation, glyph-orientation-horizontal, glyph-orientation-vertical, shape-rendering, baseline-shift, alignment-baseline, stroke-miterlimit, stroke-linejoin, stroke-linecap, stroke-dashoffset, stroke-dasharray, stroke-opacity.
И это только в SVG1. В SVG2 добавлены и другие свойства.

Лекція 39. Web.

стилей CSS.

С помощью инлайновых стилей:
Лекція 39. Web.

(внутри SVG):
Лекція 39. Web.

(за пределами SVG):
Лекція 39. Web.

совместные с CSS, и не может анимировать свойства, присущие

только SVG.
Например, color – может, fill – не может.

Лекція 39. Web.

SVG.
1. Создание плана анимации и SVG- изображения.
2. Сохранение, сжатие

и обработка SVG- изображения.
3. Создание нужных классов и идентификаторов для дальнейшего управления анимацией.
4. Вставка SVG в HTML.
например, с помощью svg-inject, РНР или же напрямую inline.
5. Создание CSS для анимации элементов SVG-изображения.

Лекція 39. Web.

Web.

особенности:
Весь текст в логотипе (Wufoo) выполнен и сохранен контурами

(outlines) для их дальнейшей раздельной анимации.
Текст «Fast» выполнен и сохранен как текст (он будет только заменяться на другой текст).

2. Сохранение в SVG.
Можно сохранить в SVG прямо в AI.
Обрабатываем и сжимаем файл с помощью сервиса https://jakearchibald.github.io/svgomg/

Лекція 39. Web.

и идентификаторов для дальнейшего управления анимацией
Лекція 39. Web.

HTML.
5. Создание CSS для анимации элементов SVG-изображения.

Вначале анимируем текст

целиком
текст поочередно появляется (задержка 1,5 сек) и исчезает.

Лекція 39. Web.

анимации элементов SVG-изображения.
Анимация длительностью 5 секунд с обратным ходом,

бесконечная.
Используем SCSS!

Лекція 39. Web.

анимации элементов SVG-изображения.
Высовываем динозавра через 6,5 секунд после начала

всей анимации. Затем быстро убираем.

Лекція 39. Web.

SVG animation.
Основная идея – обертка (“wrap“) будет всегда квадратной

и определяться шириной.
Высоту обертки делаем нулевой, ставим верхнее внутреннее поле 100%
Абсолютно позиционируем SVG, делаем его 100% высоты и ширины.
Чаще всего, так как это банер, и он должен быть кликабельным, вместо

---