Всем Салют!

преподаю в

https://beetroot.academy/

https://bachoodesign.com/

Меня зовут Алексей

Я веселый Front-end разработчик, который очень любит анимации ^__^

творю чудеса в

<SVG>

Scalable Vector Graphics (SVG) - это основанный на XML, формат изображения  для двумерной графики,  с возможностью взаимодействия и анимации.

За что мы       SVG?

Почему мы       SVG

  • Гибкий и Четкий на любых размерах
  • Относительно Маленький размер файла
  • Стилизируемый и отзывчивый - можем применять CSS
  • Управляемый JS - формы находятся в DOM
  • Интерактивный - ссылки! hovers! игры!
  • Анимируемый - любым удобным способом
  • Хорошая поддержка - ie9+
  • Есть фильтры

SVG больше, чем просто векторные фигуры

Что мы можем сделать с помощью SVG

сегодня

Вставлять картинки

^_^

Вставлять картинки =)

<img src="./img/logo.svg" alt="LvivCSS">
.logo {
  background-image: url(logo.svg);
}
  • Изображение кешируется (требует HTTP запрос).
  • Нет CSS взаимодействий.
  • Нет возможности использовать скрипты.
  • CSS анимация работает только если описана внутри <svg>

Вставлять вот так 0_о

<iframe src="mySVG.svg">
  <!-- fallback here -->
</iframe>
<embed type="image/svg+xml" src="mySVG.svg" />

Вставлять "inline"  \m/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
width="300px" height="300px" viewBox="0 0 300 300">
    <style type="text/css">
        polygon { fill: ... ;}
    </style>
    <polygon points = "279.1,160.8 195.2,193.3 174.4,280.8   
    117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7     
    197.4,24.1 202.3,114 "/>
</svg>
  • Изображение не кешируется
  • Есть возможности использовать скрипты
  • Нет экстра запросов
  • CSS анимации и взаимодействия

SVG как Data URI !!!

a.wpml-ls-item-toggle:after {
  ...
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.5' he…h fill='%232b2b2b' d='M3.2 3.9L0 .7.7 0l2.5 2.5L5.8 0l.7.7z'/%3E%3C/svg%3E);
  ...
}
a.wpml-ls-item-toggle:after {
  ...
  background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4NCgk8Y2lyY2xlIHI9IjIwIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0icmVkIiAvPg0KPC9zdmc+');
  ...
}

SVG viewBox

SVG viewBox

SVG viewBox

  1. viewBox - определяет систему координат

  2. viewBox - определяет соотношение сторон

  3. SVG без размеров растягивается на все свободное пространство

Рамки (Borders)

#

Отсутствие viewBox или размеров позволяет SVG
занимать весь элемент

ВАЖНО!

#

  1. SVG поддерживает рамки с градиентами

  2. можно подключать их к HTML элементам через data URIs

  3. Необходимо экранировать # как %23 в URL 

ВАЖНО!

SVG и Текст

Адаптивнй текст

Текст по кривой

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <defs>
    <path id="arc" d="M 20,50 a 30,30 0 1,1 0,.001"></path>      
  </defs>
  <text>
    <textPath href="#arc">Смотри, Ма, меня кружит.</textPath>  
  </text>  
</svg>

Система Иконок

<svg style="display: none;">
  <defs>
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path d="M28.1,3 ... "/>
    </symbol>
  </defs>
</svg>
<svg class="icon-basketball">
  <use xlink:href="#basketball"></use>
</svg>

Система Иконок

<svg style="position: absolute; width:0; height:0;">
  <defs>
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path d="M28.1,3 ... "/>
    </symbol>
  </defs>
</svg>
.inner-box {
  fill: currentColor;
}

Два цвета в <use>

.logo-2 {
  fill: red;
  color: orange;
}
.logo-3 {
  fill: lightblue;
  color: green;
}

Использовать currentColor

...
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path fill="currentColor" d="M28.1,3 ... "/>
    </symbol>
...
...
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path stroke="currentColor" d="M28.1,3 ... "/>
    </symbol>
...

Как бэкграунд

.cloud{
    background: url('sprite-remote.svg#cloud-view') top left no-repeat;
}
 
.cloud-computing{
    background: url('sprite-remote.svg#cloud-computing-view') top left no-repeat;
}

Анимации

Drawing lines

stroke-dasharray: 50px 100px;
stroke-dashaffset: 50px;

Clipping and Masks

clipPath vs Mask

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

clipPath

mask

mask

<svg width="544" height="368" viewbox="0 0 544 368" >
  <mask id="mask1"  data-mask>
    <path d="M256 114.647L0 157V368H256V114.647ZM288 368H544V67L288 109.353V368Z" fill="#69AD70" />
  </mask>
  <g mask="url(#mask1)">
    <rect x="-85" y="-38" width="748" height="496" fill="url(#pattern01)" />
    <rect x="-85" y="-38" width="748" height="496" fill="url(#paint01_linear)" fill-opacity="0.8" style="mix-blend-mode:multiply" />
  </g>
  <defs>
    ...
    <image id="image01" width="4096" height="2734" xlink:href="https://cdn2.hubspot.net/hubfs/5044046/front/main-img2.jpg" data-img />
  </defs>
</svg>

SVG фильтры

https://caniuse.com/#feat=svg-filters​

Отличная поддержка браузерами

Blur

Можно применять через CSS filter

Без поддержки IE

.blured{
  filter: url(#blurMe)
}
.blured{
  filter: url(../img/filters.svg#blurMe)
}

feTurbulence #

​
<feTurbulence id="turbwave" 
    type="fractalNoise" 
    baseFrequency="0.03" 
    numOctaves="2"
    result="turbulence_3"  />

А теперь КККОМБО!

Это SVG

Используйте SVG

Творите с помощью SVG

А теперь у меня есть вопросы к вам!

Спасибо за внимание!

=

https://beetroot.academy/

https://bachoodesign.com/

Present

By Alexey Kalyuzhnyi

Made with Slides.com

Present

  • 885

More from Alexey Kalyuzhnyi