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

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

Предисловие

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

Что такое SVG?

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

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

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

Media Queries

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

Демо и код

Фигуры

<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>

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

<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>

<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>

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

<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>

<svg height="270" viewBox="0 0 200 140">
    <path d="M 10,30 A 20,31 320 0 0 190,30"
        stroke="purple" stroke-width="3" fill="violet"/>
</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"
      fill="turquoise" stroke="lightseagreen" stroke-width="5" />
</svg>

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

Доступность

<title>, <desc>

<svg viewBox="0 0 500 270" height="270">
    <title>Треугольник</title>
    <desc>Тут нарисован зеленый треугольник</desc>
        <polygon points="5,265 250,5 495,265"
            fill="yellowgreen" stroke="green" stroke-width="5" />
</svg>

Картинки и текст

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

<svg height="296" 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>

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

<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="43.2" 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)"

Оформление элементов

Заливки

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

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

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

Прозрачность

Всё видно!

fill-opacity=".7"

Градиенты

<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-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

Обводки

Цвет, толщина

stroke: crimson;
stroke-width: 5;

Концы линий

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

Сгибы

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

stroke как fill

stroke-opacity=".4"

Вид линий

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

stroke-dasharray="20" stroke-width="20"

stroke-dashoffset="-33%"

Фильтры

Оформление текста

Маски

CSS-маски

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

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="black" />
        <g stroke="gray" stroke-width="12" fill="white">
            <circle cx="33%" cy="30%" r="20%" />
            <circle cx="52%" cy="62%" r="32%" />
         </g>
    </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-масок

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

Размеры

Ширина и высота

width="600" height="300"

viewBox

viewBox="0 0 200 200"

viewBox + ширина & высота

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"

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

<embed>, <object>, <iframe>
<img>
фоновой картинкой
- url
- base64 в data URI
- SVG в data URI
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>

Ожидания

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

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

<iframe>
background-image

Поддержка

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

SVG в дизайне

Шрифт

SVG

background: url(sprite.svg);
        background: url(data:image/svg+xml;base64,PHN2Zy...);
        background: url(data:image/svg+xml;utf8,<svg xmlns=...);

<svg>
            <use xlink:href="#umbrella"/>
        </svg>

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

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

currentColor

Home
Favorites
Options
Gallery

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

.icon use {
        fill: currentColor;
        }

Разные штуки

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

You win!

Полезные ссылки

Векторные редакторы

Adobe Illustrator — 599 руб./месяц в составе подписки на Creative Cloud
Sketch — для Mac OS, $79.99
SVG-edit — на JS
- Онлайн демо
Inkscape — бесплатный

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

Сборка

Iconizr: web, grunt
Grumpicon: web, grunt

Оптимизация

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

Презентации

Послесловие

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

Бухвалова ЮлияLivejournal

Онлайн версия: yoksel.github.io/about-svg/