Позвольте представить: SVG

Позвольте представить:

Предисловие

Все демо - "живой" SVG
Смотреть лучше в Chrome или Opera 13+

Что такое SVG?

Scalable Vector Graphics - формат векторных изображений, основанный на XML.

Масштабируется
Четкий на ретине
Человекопонятный код
Можно написать руками
Исходник
Переиспользуемые компоненты
Внутри - CSS и JavaScript
Хорошая поддержка браузерами
Доступность

Масштабируемость

Media Queries

«Машина с клоунами»

Демо и код

Пишем SVG

<rect>

<svg viewBox="0 0 510 270" height="270">
  <rect width="500" height="260" x="5" y="5"
    fill="skyblue" stroke="steelblue" stroke-width="5" />
</svg>

<svg viewBox="0 0 510 270" height="270">
  <rect width="500" height="260" x="5" y="5"
    fill="orange" stroke="orangered" stroke-width="5"
    rx="7%"/>
</svg>

<svg viewBox="0 0 510 270" height="270">
  <rect width="500" height="260" x="5" y="5"
    fill="yellowgreen" stroke="green" stroke-width="5"
    rx="50%" ry="20%"/>
</svg>

<circle>

<svg viewBox="0 0 270 270" height="270">
  <circle r="130"
    cx="135" cy="135"
    fill="orangered" stroke="crimson" stroke-width="5" />
</svg>

<ellipse>

<svg viewBox="0 0 500 270" height="270">
  <ellipse rx="240" ry="130"
    cx="250" cy="135"
    fill="gold" stroke="orange" stroke-width="5" />
</svg>

<polygon>

<svg viewBox="0 0 500 270" height="270">
  <polygon points="5,265 250,5 495,265"
    fill="violet" stroke="purple" stroke-width="5" />
</svg>

<svg viewBox="0 0 140 130" height="270">
  <polygon points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"
    fill="turquoise" stroke="lightseagreen" stroke-width="3" />
</svg>

<line>

<svg viewBox="0 0 500 270" height="270">
  <line x1="10" y1="260" x2="490" y2="10"
    stroke="violet" stroke-width="10" />
</svg>

<polyline>

<svg height="270" viewBox="0 0 260 140">
  <polyline points="5,135 30,5 55,135 80,5 105,135 130,5 155,135 180,5 205,135 230,5"
    fill="none" stroke="orangered" stroke-width="3" />
</svg>

<path>

M, m - moveto
Z - closepath

L, l - lineto
H, h - horizontal lineto
V, v - vertical lineto

C, c - curveto
S, s - smooth curveto
Q, q - quadratic Bézier curveto
T, t - smooth quadratic Bézier curveto
A, a - elliptical arc

<svg viewBox="0 0 270 270" height="270">
  <path stroke="crimson" stroke-width="10"
        d="M 20,20 L 180,150
           M 20,20 L 120,250"/>
</svg>

<svg viewBox="0 0 340 270" height="270">
  <path d="M 170,10 C 0,10 0,260 170,260
           M 170,10 C 340,10 340,260 170,260"
    stroke="orange" stroke-width="5" fill="gold" />
</svg>

<svg height="270" viewBox="0 0 200 140">
  <path d="M 10,30 A 20,31 320 0 0 190,30 Z"
        stroke="purple" stroke-width="3" fill="violet"/>
</svg>

<text>

<svg height="270" viewBox="0 0 50 50">
  <text x="25" y="30" text-anchor="middle">Я текст</text>
</svg>

<path id="p-text-path" 
        d="m231.06494,94.11014c93.77408,..."/>
    </path>

<text x="0" dy="10">
        <textPath xlink:href="#p-text-path">
          Текст
       </textPath>
    </text>

<image>

<svg height="296" viewBox="0 0 800 296">
  <image xlink:href="./assets/img/parts/flower-xl-hor.jpg"
    width="800" height="296"/>
</svg>

<title>, <desc>

<svg viewBox="0 0 270 270" height="270">
  <title>Кружок</title>
  <desc>Тут нарисован желтый кружок</desc>
  <circle r="130" cx="135" cy="135"
    fill="gold" stroke="orange" stroke-width="5" />
</svg>

Обводки и заливки

fill

fill="hsl(50, 100%, 50%)"

fill="url(#gr-hot-cold-soft)"

fill="url(#pt-mosaic-colored)"

Градиенты

<linearGradient id="gr-simple"
      x1="0" y1="0" x2="100%" y2="50%">
      <stop stop-color="hsl(350,100%,45%)" offset="0"/>
      <stop stop-color="hsl(45,100%,75%)" offset="50%"/>
      <stop stop-color="hsl(200,100%,40%)" offset="100%"/>
  </linearGradient>

<linearGradient id="gr-simple-stripes"
      x1="0" y1="0" x2="30%" y2="30%"
      gradientUnits="userSpaceOnUse" spreadMethod="repeat">
      <stop stop-color="hsl(350,100%,45%)" offset="0"/>
      <stop stop-color="hsl(350,100%,45%)" offset="33%"/>
      <stop stop-color="hsl(50,100%,70%)" offset="33%"/>
      <stop stop-color="hsl(50,100%,70%)" offset="66%"/>
      <stop stop-color="hsl(200,100%,40%)" offset="66%%"/>
      <stop stop-color="hsl(200,100%,40%)" offset="100%"/>
  </linearGradient>

<radialGradient id="gr-radial-stripes-repeat"
      r="10%"
      gradientUnits="userSpaceOnUse" spreadMethod="repeat">
      <stop stop-color="hsl(200,100%,40%)" offset="0%"/>
      <stop stop-color="hsl(200,100%,40%)" offset="25%"/>
      <stop stop-color="hsl(45,100%,75%)" offset="27%"/>
      <stop stop-color="hsl(45,100%,75%)" offset="70%"/>
      <stop stop-color="hsl(350,100%,45%)" offset="72%"/>
      <stop stop-color="hsl(350,100%,45%)" offset="98%"/>
  </radialGradient>

<radialGradient id="gr-radial-soft"
      r="70%">
      <stop stop-color="hsl(200,100%,40%)" offset="0"/>
      <stop stop-color="hsl(45,100%,75%)" offset="50%"/>
      <stop stop-color="hsl(350,100%,45%)" offset="100%"/>
  </radialGradient>

<radialGradient id="gr-radial-soft-fxy"
      fx="90%" fy="90%">
      ...
</radialGradient>

Поддержка браузерами: wtf?

Repeating gradient with objectBoundingBox in Firefox

fill-opacity

Всё видно!

fill-opacity=".7"

fill-rule

fill-rule="nonzero"

fill-rule="evenodd"

Обводки

stroke, stroke-width

stroke: crimson;
stroke-width: 5;

stroke как fill

stroke-opacity=".4"

stroke-linecap

```
stroke-linecap: butt
```
```
stroke-linecap: round
```
```
stroke-linecap: square
```

stroke-linejoin

```
stroke-linejoin: miter
```
```
stroke-linejoin: round
```
```
stroke-linecap: square
```

stroke-dasharray="20"

```
stroke-dasharray: 5%;
```
```
stroke-dasharray: 7 15;
```
```
stroke-dasharray: 80 20 5 20;
```

stroke-dashoffset="-33%"

Анимация stroke

path {
          stroke-width: 2;
          stroke-dasharray: 550 0;
          stroke-dashoffset: 570;
          animation: dashoffset 8s infinite alternate;
          }
      @keyframes dashoffset {
            100% {
                stroke-dashoffset: 0;
            }
      }

dasharray + dashoffset

Группировка и переиспользование

<g>

<svg viewBox="0 0 110 110">
  <g id="g-circles">
    <circle fill="orangered" r="50" cx="55" cy="55"/>
    <circle fill="gold" r="32" cx="55" cy="55"/>
    <circle fill="dodgerblue" r="15" cx="55" cy="55"/>
  </g>
</svg>

<use>

<svg viewBox="0 0 110 110">
  <g id="g-circles--u">
    <circle fill="orangered" r="50" cx="55" cy="55"/>
    <circle fill="gold" r="32" cx="55" cy="55"/>
    <circle fill="dodgerblue" r="15" cx="55" cy="55"/>
  </g>
  <use xlink:href="#g-circles--u" x="-110"/>
  <use xlink:href="#g-circles--u" x="110"/>
</svg>

<defs>

<svg viewBox="0 0 110 110">
  <defs>
    <g id="g-circles--d">
      <circle fill="orangered" r="50" cx="55" cy="55"/>
      <circle fill="gold" r="32" cx="55" cy="55"/>
      <circle fill="dodgerblue" r="15" cx="55" cy="55"/>
    </g>
  </defs>
  <use xlink:href="#g-circles--d" x="-110"/>
  <use xlink:href="#g-circles--d" x="110"/>
</svg>

<symbol>

<svg viewBox="0 0 110 110">
  <defs>
    <symbol id="s-circles">
      <circle fill="orangered" r="50" cx="55" cy="55"/>
      <circle fill="gold" r="32" cx="55" cy="55"/>
      <circle fill="dodgerblue" r="15" cx="55" cy="55"/>
    </symbol>
  </defs>
  <use xlink:href="#s-circles" x="-110"/>
  <use xlink:href="#s-circles" x="110"/>
</svg>

<pattern>

<svg>
  <defs>
    <pattern id="pt-circles" viewBox="0 0 110 110"
       width="40" height="40" patternUnits="userSpaceOnUse">
      <circle fill="orangered" r="50" cx="55" cy="55"/>
      <circle fill="gold" r="32" cx="55" cy="55"/>
      <circle fill="dodgerblue" r="15" cx="55" cy="55"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#pt-circles)"/>
</svg>

Трансформации

transform="translate(100, 80)"

transform="scale(1.2, .8)"

transform="rotate(15, 252, 140)"

transform="skewX(15)"

transform="matrix(.3 0 0 1.18 55 25)"

Размеры

width & height

width="600" height="300"

viewBox

viewBox="0 0 200 200"

viewBox + width & height

viewBox="0 0 200 200" width="100%" height="100%"

preserveAspectRatio

viewBox="0 0 200 200" preserveAspectRatio="none"

viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet"

viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice"

Рисуем SVG

Редакторы

Сайты с SVG-графикой

Сборка

Iconizr: web, grunt
Grumpicon: web, grunt

Оптимизация

SVG Optimiser
SVGO: консоль, gui, grunt

Способы вставки

<embed>, <object>, <iframe>
<img>
фоновой картинкой
- url
- base64 в data URI
- SVG в data URI
SVG в HTML
шрифт

Все способы вставки:
Частичная поддержка:
Не поддерживается:

Проблемные места

— шрифт, SVG в HTML, фон
— фон
— шрифт
— повторяющиеся градиенты
— фильтры, анимации
Общая проблема: градиенты

Какой способ лучше?

SVG в HTML
фон
иконочный шрифт

SVG-стеки

<svg viewBox="0 0 200 200">
      <g id="no">
        <rect fill="#FF4646" width="200" height="200" rx="8"/>
          <text x="28" y="130">No.</text>
      </g>
      <g id="yes" class="hidden">
        <rect fill="#a2d529" width="200" height="200" rx="8"/>
          <text x="18" y="130">Yes!</text>
      </g>
    </svg>

.hidden { display: none; }
      :target { display: block; }

Ожидания

/assets/img/yes-no.svg
/assets/img/yes-no.svg#yes

Реальность: #yes?

<iframe>
background-image

Поддержка

<embed>, <object>, <iframe>:
<img> и background-image:
: (

Маски

CSS-маски

clip
clip-path / mask-image / background-clip: text
SVG clip-path для HTML / SVG mask для HTML

Поддержка SVG-масок

SVG-маски

<clip-path>

+ =

<clippath id="clip-star">
        <polygon points="98.499..." />
      </clippath>

clip-path: url(#clip-star);

+ =

<clippath id="clip-text">
      <text x="0" y=".88em" class="clip-text">Text</text>
    </clippath>

.clip-text {
      font: bold italic 6.5em/1 Georgia;
      }

clip-path: url(#clip-text);

I SVG

<mask>

+ =

<mask id="mask" maskunits="userSpaceOnUse"
          maskcontentunits="userSpaceOnUse">
      <rect y="0" width="100%" height="100%"
          fill="url(#mask-gradient)" />
      <circle cx="50%" cy="50%" r="42%" fill="black" />
      <circle cx="0" cy="50%" r="32%" fill="black" />
      ...
    </mask>

+ =

<mask id="mask-soft" maskunits="objectBoundingBox"
          maskcontentunits="objectBoundingBox">
      <rect y="0" width="1" height="1" 
          fill="url(#mask-radial-gradient)" />
    </mask>

+ =

<mask id="mask-lum-pattern">
        <image xlink:href="your-image.png" width="200" height="300" />
    </mask>

      mask: url(#mask);

Демо со всеми масками

Оформление SVG

Что выбрать?

Используем шрифт

Используем SVG

Разноцветные иконки

Полетели!

Fill:: None; Color; Gradient; Pattern; Text

Stroke:: None; Color; Gradient; Pattern; Text

Эффекты с обводками

Фильтры

currentColor

Home
Favorites
Options
Gallery

.icon use {
      fill: currentColor;
      }

.icon {
        color: orangered;
        }
        .icon:hover {
          color: yellowgreen;
          }

Позвольте представить:

Предисловие

Что такое SVG?

Масштабируемость

Media Queries

«Машина с клоунами»

Пишем SVG

<rect>

<circle>

<ellipse>

<polygon>

<line>

<polyline>

<path>

<text>

<image>

<title>, <desc>

Обводки и заливки

fill

Градиенты

Поддержка браузерами: wtf?

fill-opacity

Всё видно!

fill-rule

Обводки

stroke, stroke-width

stroke как fill

stroke-linecap

stroke-linejoin

Анимация stroke

dasharray + dashoffset

Группировка и переиспользование

<g>

<use>

<defs>

<symbol>

<pattern>

Трансформации

Размеры

width & height

viewBox

viewBox + width & height

preserveAspectRatio

Рисуем SVG

Редакторы

Сайты с SVG-графикой

Сборка

Оптимизация

Способы вставки

Проблемные места

Какой способ лучше?

SVG-стеки

Ожидания

Реальность: #yes?

Поддержка

Маски

CSS-маски

Поддержка SVG-масок

SVG-маски

<clip-path>

<mask>

Демо со всеми масками

Оформление SVG

Что выбрать?

Используем шрифт

Используем SVG

Разноцветные иконки

Полетели!

Эффекты с обводками

Фильтры

currentColor

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

Используемые ресурсы

Me

yoksel.github.io/about-svg/