Embed Size (px)
Citation preview
От энтузиаста к разработчику
От энтузиаста к разработчику
Придержите тапки
Придержите тапки● Векторная масштабируемая графика
Придержите тапки● Векторная масштабируемая графика● Подмножество XML
Придержите тапки● Векторная масштабируемая графика● Подмножество XML● Совместима с другими форматами W3C
Придержите тапки● Векторная масштабируемая графика● Подмножество XML● Совместима с другими форматами W3C● Поддерживает фигуры, контуры, анимации, фильтры, текст ...
Powered by● первый черновик почти совершеннолетний
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г● v 1.1 Full - текущая 2011г
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г● v 1.1 Full - текущая 2011г● v 1.2 Tiny - 2008г
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г● v 1.1 Full - текущая 2011г● v 1.2 Tiny - 2008г ● v 2.0 - Recommendation candidate
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" version="1.1">
…
</svg>
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" version="1.1">
…
</svg>
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" version="1.1">
…
</svg>
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="64px" viewBox="0 0 64 64" version="1.1" preserveAspectRatio="xMinYMin meet">
…
</svg>
preserveAspectRatio
● alignment
preserveAspectRatio
● alignment○ xMinYMin○ xMidYMid○ ...
preserveAspectRatio
● alignment● [meet | slice]
○ meet○ slice
На пальцахЛучше один раз увидеть
Human read и a11y● title● description
Переиспользование кода в SVG● группы <g>...</g>● объявления <defs> … </defs>● символы <symbol> … </symbol>
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
● переиспользование○ оборачиваем в группу
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
● переиспользование○ оборачиваем в группу○ используем через use
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
● переиспользование○ оборачиваем в группу○ используем через use○ NO PROFIT
defs и symbols● оборачиваем в defs/symbols● используем● PROFIT
path● все самое интересное в d (от data)
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение○ C - кубическая кривая Безье
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение○ C - кубическая кривая Безье
■ t T - ее продолжение
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение○ C - кубическая кривая Безье
■ t T - ее продолжение○ A a - сегмент арки
Метод де КастельжоКвадратичная кривая
Метод де КастельжоКубическая кривая
Гладкая как ...… в JsBin
… и в там же.
Clipping● clipPath
Clipping● clipPath● фигура
Clipping● clipPath● фигура● Вырезанная фигура
Masking● mask
Masking● mask● фигура для маскирования
Masking● mask● фигура для маскирования● Маскированная фигура
Фильтры● Блюр● Компонентное преобразование● Матричные преобразования● ...
SMIL● забыли про ie (+ edge)
SMIL● забыли про ie (+ edge)● декларативно
SMIL● забыли про ie (+ edge)● декларативно● только в текущем SVG фрагменте
SMIL● забыли про ie (+ edge)● декларативно● только в текущем SVG фрагменте● действуют на родительский элемент или по ссылке
SMIL● забыли про ie (+ edge)● декларативно● только в текущем SVG фрагменте● действуют на родительский элемент или по ссылке● по одной анимации на атрибут
Простой пример<animate
xlink:href="#my-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />
Полезные атрибуты● fill - freeze | remove - состояние после анимации
● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию
Полезные атрибуты
● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций
Полезные атрибуты
● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций● repeatCount/repeatDur - количество/время повторений
Полезные атрибуты
Полезные атрибуты● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций● repeatCount/repeatDur - количество/время повторений● values и keyTimes время и значения
Полезные атрибуты● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций● repeatCount/repeatDur - количество/время повторений● values и keyTimes время и значения● calcMode - linear | paced | discrete | spline(+ keySplines)
Гнём ложки
Правила морфинга контуров● количество вершин остается неизменным
Правила морфинга контуров● количество вершин остается неизменным● типы частей остаются неизменными
Вопросы?● SVG v1.1 - https://www.w3.org/TR/SVG11/● SVG v2.0 - https://www.w3.org/TR/2016/CR-SVG2-20160915/● Градиенты - http://css.yoksel.ru/svg-gradients/● Фильтры - http://html5.by/blog/svg-filters/● крутой бложек о SVG у Sara Souidan -
https://sarasoueidan.com/tags/svg/index.html● Изменения в спеке между 1.1 и 2.0
https://www.w3.org/TR/2016/CR-SVG2-20160915/changes.html● Tips for Creating Accessible SVG by Léonie Watson -
https://www.sitepoint.com/tips-accessible-svg/● Карманное руководство - http://svgpocketguide.com/book/
Не думаю что сработает, но все же ...● xlink:href теперь без xlink● x и y не действуют на ‘pattern’ и ‘filter’● filter больше не часть svg, а часть Filter effects спеки● Завезли tabindex’ы● В анимациях SMIL не обрабатывается onload● Можно забыть про ‘font’, ‘glyph’, ‘missing-glyph’, ‘hkern’, ‘vkern’, ‘font-face’, ‘font-face-src’, ‘font-face-uri’, ‘font-face-format’, ‘font-face-name’● Словарь используемых цветов теперь берется из CSS спеки● Новый тип фигур mesh● Masking и Clipping теперь через CSS● Анимации отдельная спека● ...
Придержите тапки
Придержите тапки● Векторная масштабируемая графика
Придержите тапки● Векторная масштабируемая графика● Подмножество XML
Придержите тапки● Векторная масштабируемая графика● Подмножество XML● Совместима с другими форматами W3C
Придержите тапки● Векторная масштабируемая графика● Подмножество XML● Совместима с другими форматами W3C● Поддерживает фигуры, контуры, анимации, фильтры, текст ...
Powered by● первый черновик почти совершеннолетний
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г● v 1.1 Full - текущая 2011г
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г● v 1.1 Full - текущая 2011г● v 1.2 Tiny - 2008г
Powered by● первый черновик почти совершеннолетний● v 1.0 - 2001г● v 1.1 Full - текущая 2011г● v 1.2 Tiny - 2008г ● v 2.0 - Recommendation candidate
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" version="1.1">
…
</svg>
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" version="1.1">
…
</svg>
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" version="1.1">
…
</svg>
Дизайнерский SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="64px" viewBox="0 0 64 64" version="1.1" preserveAspectRatio="xMinYMin meet">
…
</svg>
preserveAspectRatio
● alignment
preserveAspectRatio
● alignment○ xMinYMin○ xMidYMid○ ...
preserveAspectRatio
● alignment● [meet | slice]
○ meet○ slice
На пальцахЛучше один раз увидеть
Human read и a11y● title● description
Переиспользование кода в SVG● группы <g>...</g>● объявления <defs> … </defs>● символы <symbol> … </symbol>
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
● переиспользование○ оборачиваем в группу
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
● переиспользование○ оборачиваем в группу○ используем через use
Группы <g> … </g>● группирование
○ оборачиваем элементы в группу○ атрибуты группы действуют на всю группу (даже в анимациях)○ PROFIT
● переиспользование○ оборачиваем в группу○ используем через use○ NO PROFIT
defs и symbols● оборачиваем в defs/symbols● используем● PROFIT
path● все самое интересное в d (от data)
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение○ C - кубическая кривая Безье
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение○ C - кубическая кривая Безье
■ t T - ее продолжение
path● все самое интересное в d (от data)
○ M x y | m dx dy - переместить перо○ L x y | l dx dy - линия○ H x | h dx - горизонтальная линия○ V y | v dy - вертикальная линия○ Z - “закрыть” путь○ Q - квадратичная кривая Безье
■ s S - ее гладкое продолжение○ C - кубическая кривая Безье
■ t T - ее продолжение○ A a - сегмент арки
Метод де КастельжоКвадратичная кривая
Метод де КастельжоКубическая кривая
Гладкая как ...… в JsBin
… и в там же.
Clipping● clipPath
Clipping● clipPath● фигура
Clipping● clipPath● фигура● Вырезанная фигура
Masking● mask
Masking● mask● фигура для маскирования
Masking● mask● фигура для маскирования● Маскированная фигура
Фильтры● Блюр● Компонентное преобразование● Матричные преобразования● ...
SMIL● забыли про ie (+ edge)
SMIL● забыли про ie (+ edge)● декларативно
SMIL● забыли про ie (+ edge)● декларативно● только в текущем SVG фрагменте
SMIL● забыли про ie (+ edge)● декларативно● только в текущем SVG фрагменте● действуют на родительский элемент или по ссылке
SMIL● забыли про ie (+ edge)● декларативно● только в текущем SVG фрагменте● действуют на родительский элемент или по ссылке● по одной анимации на атрибут
Простой пример<animate
xlink:href="#my-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />
Полезные атрибуты● fill - freeze | remove - состояние после анимации
● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию
Полезные атрибуты
● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций
Полезные атрибуты
● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций● repeatCount/repeatDur - количество/время повторений
Полезные атрибуты
Полезные атрибуты● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций● repeatCount/repeatDur - количество/время повторений● values и keyTimes время и значения
Полезные атрибуты● fill - freeze | remove - состояние после анимации● restart - always | never | whenNotActive - когда и как перезапустить
анимацию● d и begin - для связывания старта анимаций● repeatCount/repeatDur - количество/время повторений● values и keyTimes время и значения● calcMode - linear | paced | discrete | spline(+ keySplines)
Гнём ложки
Правила морфинга контуров● количество вершин остается неизменным
Правила морфинга контуров● количество вершин остается неизменным● типы частей остаются неизменными
Вопросы?● SVG v1.1 - https://www.w3.org/TR/SVG11/● SVG v2.0 - https://www.w3.org/TR/2016/CR-SVG2-20160915/● Градиенты - http://css.yoksel.ru/svg-gradients/● Фильтры - http://html5.by/blog/svg-filters/● крутой бложек о SVG у Sara Souidan -
https://sarasoueidan.com/tags/svg/index.html● Изменения в спеке между 1.1 и 2.0
https://www.w3.org/TR/2016/CR-SVG2-20160915/changes.html● Tips for Creating Accessible SVG by Léonie Watson -
https://www.sitepoint.com/tips-accessible-svg/● Карманное руководство - http://svgpocketguide.com/book/
Не думаю что сработает, но все же ...● xlink:href теперь без xlink● x и y не действуют на ‘pattern’ и ‘filter’● filter больше не часть svg, а часть Filter effects спеки● Завезли tabindex’ы● В анимациях SMIL не обрабатывается onload● Можно забыть про ‘font’, ‘glyph’, ‘missing-glyph’, ‘hkern’, ‘vkern’, ‘font-face’, ‘font-face-src’, ‘font-face-uri’, ‘font-face-format’, ‘font-face-name’● Словарь используемых цветов теперь берется из CSS спеки● Новый тип фигур mesh● Masking и Clipping теперь через CSS● Анимации отдельная спека● ...
