– это формат векторных изображений, основанный на XML.

Преимущества SVG

• Масштабирование без потери качества
• Меньше размер чем растр
• Можно открыть в текстовом редакторе
• Может содержать логику (Javascript)
• Частями изображения можно манипулировать с помощью CSS и JS

Недостатки

• Больший расход CPU.
• Слишком детализированные svg могут иметь большой размер.

Структура SVG

<?xml version="1.0">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg">
…
</svg>

<svg>

</svg>

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?>
<svg width=”24px” height=”25px” viewBox=”0 0 24 25"
version=”1.1" xmlns=”>http://www.w3.org/2000/svg"
xmlns:xlink=”http://www.w3.org/1999/xlink"
xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns">
 add
 Created with Sketch.
...
</svg>

Встраивание svg

<object data="your.svg"
type="image/svg+xml" width="199" height="200">

<iframe src="your.svg"
width="199px" height=“200px">

• Содержимое доступно для внешнего JavaScript
• Интерактивная стилизация через CSS работает(hover)

/*Css backgrounds*/
.elem {
    background-image: url(your.svg);
}

• Содержимое недоступно для JS
• Не работает интерактивная стилизация

<svg width="200px" height="200px">
…
</svg>

• Позволяет использовать не только внутреннюю стилизацию
• Не кэшируется браузером
• Неудобно его редактировать в графическом редакторе, оптимизировать

Фигуры

line

<line x1="220" y1="10" x2="20" y2="130"/>

polygon

             
<polygon points="70,5 90,41 136,48 103,80 111,126
70,105 29,126 36,80 5,48 48,41"/>

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

SVG-path

<path d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50
L 130,10 L 130,110 z" fill="gold" stroke="orange"
stroke-width="5"/>

Команды

<path stroke="orange" stroke-width="3"
d="M 20,20 L150,150
<!--В нижнем — относительные-->
    m -100,0 l150,100
<!--Верхний регистр – абсолютные координаты-->
    M 70,20 L200,150"/>

Команды

• M, m(moveto) – устанавливает новую текущую точку.
• L, l(line) – рисование линии

<path stroke="orange" stroke-width="3"
d="M 20,20 L80,20 20,100 M150,50 L50,150 150,120"/>

• H, h и V, v – рисование горизонтальных и вертикальных линий.
• Z, z – команда замыкание фигуры

<path stroke="lightseagreen" stroke-width="5"
    d="M 200,20 h 160 v 160 h -80 v -80 h -80 z"/>

<path stroke="red" stroke-width="5"
    d="M 20,20 H 160 V 160 H -80 V -80 H -80 z"/>

• C, c(cubic) и S, s(smooth) – кубическая кривая Бизье
• Q, q(quadratic) и T, t – квадратичная кривая Бизье
• A, a – сегмент окружности

Рабочая область

<svg width="115" height="190"></svg>

viewBox

<svg width="200" height="200" viewBox="100 100 233 295">...
</svg>

Маркеры

– служит для указания направления, начала, середины, конца линии (line, polyline, path, polygon, rect)

<marker id="circleMarker"
viewBox="0 0 50 50" refX="25" refY="25" orient="auto">
    <circle r="25" fill="red" cx="25" cy="25"/>
</marker>

<path d="M100,100 L100,300 L444,200 L100,500"
marker-mid="url(#circleMarker)"

<marker id="myMarkerMid" viewBox="0 0 50 50"
    refX="25" refY="25"
    orient="auto"
    markerUnits="strokeWidth"
    markerWidth="3" markerHeight="3">

    <rect x="5" y="5" width="50" height="30" fill="yellow"/>

</marker>

<path d="M100,100 L100,300 L444,200 L100,500"
marker-start="url(#circleMarker)"
marker-mid=“url(#myMarkerMid)"
marker-end="url(#circleMarker)"/>

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

<defs>

– для хранения содержимого, которое не будет отображаться при определении.

<defs>
    <marker id="Triangle"
            viewBox="0 0 10 10"
            refX="5" refY="5"
            markerWidth="6"
            markerHeight="6"
            orient="auto">
    <circle r="5" fill="white" cx="5" cy="5"/>
    </marker>


</defs>

<g>

– используется для логической группировки графических элементов.

<use>

– применяться для повторного использования как отдельных элементов, так и групп элементов.

<use x="100" y="100" xlink:href="#bird"/>
<use xlink:href="#bird" transform="translate(250, 250)
    scale(0.5)"/>

symbol

– это группа фигур, представляющая собой единое целое.

<symbol id="s-path">
    <path d="M 30 15 170 15" stroke-width="30">
</symbol>

Заливка

– заливка фигур осуществляется с помощью атрибута fill.

<rect fill="red"/>

Fill-rule

– определяет как будут заливаться сложные фигуры, имеющие пересечения внутри себя.

<g fill="gold" fill-rule="nonzero">
    <path d="...">
</g>

<g fill="gold" fill-rule="evenodd">
    <path d="...">
</g>

Stroke

<rect stroke="gold" stroke-width="10"/>
<rect stroke="yellowgreen" stroke-width="10%"/>

stroke-linecap

<symbol id="s-path">
    <path d="M 30 15 170 15" stroke-width="30">
</symbol>
<use y="20" stroke-linecap="butt"/>
<use y="85" stroke-linecap="round"/>
<use y="150" stroke-linecap="square"/>

Stroke-linejoin

<use xlink:href="#s-corner"  stroke-linejoin="miter">
<use xlink:href="#s-corner"  stroke-linejoin="round"/>
<use xlink:href="#s-corner" stroke-linejoin="bevel"/>

Stroke-dasharray

– управляет видом пунктирной обводки.

stroke-dasharray="1"

stroke-dasharray="1 3"

stroke-dasharray="5%"
stroke-dasharray="1 5"

stroke-dasharray="2 7 6"
stroke-dasharray="5"

stroke-dasharray="12% 5%"

Stroke-dashoffset

– позволяет задать смещение пунктирной обводки относительно первоначального положения.

Градиенты

Линейный градиент

<linearGradient id="grad1"
x1="0%" y1="0%"
x2="100%" y2="0%">
    <stop offset="0%" stop-color="#BBC42A" />
    <stop offset="100%" stop-color="#ED6E46" />
</linearGradient>

<rect fill= "url(#grad1)" width="400" height="100"/>

Радиальные

<radialGradient id="RadialGradient2"
cx="0.5" cy="0.5" r="0.5">
    <stop offset="0%" stop-color="red"/>
    <stop offset="100%" stop-color="blue"/>
</radialGradient>

<rect fill="url(#RadialGradient2)" width="10" height="10"/>

Паттерны

– это некоторый бесконечно повторяющийся узор.

<pattern id="basicPattern" x="0" y="0"
width="40" height="40" patternUnits="userSpaceOnUse">
    <circle cx="20" cy="20" r="20" fill= "#BBC42A" />
</pattern>

<rect width="200" height="70" fill="url(#basicPattern)" />

Маски

– позволяют скрывать части изображений с помощью другого изображения.

clip-path

– для обрезки использует только контуры фигур, игнорируя заливки и обводки

<clipPath id="clipping-star">
    <polygon id="Star-1" points="...">
</clipPath>
<g clip-path="url(#clipping-star)">
    <image xlink:href="image.jpg" width="200" height="300"/>
</g>

mask

– в них учитываются и заливки, и обводки, и яркость содержимого.

<mask id="mask">
    <g stroke="gray" stroke-width="12" fill="white">
        <circle cx="33%" cy="30%" r="20%" />
        <circle cx="52%" cy="62%" r="32%" />
    </g>
</mask>

Фильтры

– это механизм применения различных эффектов к svg-элементам.

<defs>
    <filter id="myFilter1">
        <!-- размытие по Гауссу -->
        <feGaussianBlur stdDeviation="10"/>
    </filter>
</defs>

<image xlink:href="/img.jpg" filter="url('#filter-blur')"
width="318" height="240"/>

Идем дальше.

<svg width="400" height="300" viewbox="0 0 400 300">

    
        
        <feColorMatrix in="a1" type="saturate" values="0"/>
    

    <image xlink:href="image.jpg"  width="100%" height="100%" />
</svg>

feComponentTransfer

<fecomponenttransfer>
    
    <feFuncR type="linear" slope="5" intercept="-0.5" />
    <feFuncG type="linear" slope="0.2" />
    <feFuncB type="linear" slope="0.2" />
    <feFuncA type="identity" />
</fecomponenttransfer>

<fecomponenttransfer>
    <fefuncr type="table" tablevalues="1 0" />
    <fefuncg type="table" tablevalues="1 0" />
    <fefuncb type="table" tablevalues="1 0" />
</fecomponenttransfer>

<fecomponenttransfer>
    <fefuncr type="discrete" tablevalues="1 0 1 1" />
    <fefuncg type="discrete" tablevalues="1 0 1 1" />
    <fefuncb type="discrete" tablevalues="1 0 0 1" />
</fecomponenttransfer>

<fecomponenttransfer>
    <fefuncr type="gamma" amplitude="2" exponent="1" offset="0.1" />
    <fefuncg type="gamma" amplitude="1" exponent="1.2" offset="0.1" />
    <fefuncB type="gamma" amplitude="1.4" exponent="1" offset="0.1" />
</fecomponenttransfer>

feColorMatrix

– позволяет умножить каждый пиксель исходного изображения в виде вектора, образованного каналами R, G, B, A.

| R' |     | a00 a01 a02 a03 a04 |   | R |
| G' |     | a10 a11 a12 a13 a14 |   | G |
| B' |  =  | a20 a21 a22 a23 a24 | * | B |
| A' |     | a30 a31 a32 a33 a34 |   | A |
| 1  |     |  0   0   0   0   1  |   | 1 |

<fecolormatrix type="matrix"
  values="0.343 0.669 0.119 0 0
          0.249 0.626 0.130 0 0
          0.172 0.334 0.111 0 0
          0        0    0   1 0" />

<fecolormatrix type="saturate" values="0"/>

<fecolormatrix type="hueRotate" values="240"/>

<feConvolveMatrix
order="3"
kernelMatrix=" 1  -1   1
              -1  -1  -1
               1  -1   1">

Композитные операции

– можно осуществлять арифметические и логические операции над слоями в svg.

<feComposite in="source1" in2="source2" operator="xor"/>

Режимы смешивания

<feBlend in="source1" in2="source2" mode="lighten"/>

Тексты

<text font-size="150" x="0" fill="#1e88e5" y="150">
    Текст
</text>

Текст по линии

<defs>
      <path id="textpath" d="M10.057,20.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>

<text y="20" x="10" fill="red">
    <textPath xlink:href="#textpath">
        Lorem ipsum dolor sit amet consectetur.
    </textPath>
</text>

            <text fill="url(#p-stars)" class="text">Text</text>
            

Css в SVG

– CSS может использоваться для стилизации, наложения масок и фильтров, а так же анимации svg-изображений.

rect {
 fill: red;
 filter: url(#blur)
}

Анимации

• Анимации как в css (transition, animate)
• JS (Snap.svg)

Спасибо!

Домашнее задание