SVG

Работа с простейшими фигурами

Давайте создадим наш первый SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   width="320" height="200">
<circle cx="250" cy="25" r="25"/>
</svg>

В результате получим черный круг размером 50 на 50px

Добавим к кругу характеристики

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="50">
  <circle cx="250" cy="25" r="25" fill="yellow" stroke="orange"/> 
</svg>

Мы можем также воздействовать на отдельные элементы с помощью CSS

<svg width="500" height="50">
  <circle cx="250" cy="25" r="25" class="pumpkin"/> 
</svg>

Но в CSS у нас выносятся SVG-свойства

.pumpkin {
    fill: yellow;
    stroke: orange;
    stroke-width: 5;
 }

результат

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="320" height="220">
    <style>
    .pumpkin {
        fill: yellow;
        stroke: orange;
        stroke-width: 5;
    }    

    </style>    

    <circle cx="250" cy="25" r="25" class="pumpkin"/>
</svg>

path

path - замечательная вещь, которая позволит нам делать ломанные и кривые

Код этой кривой

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   width="320" height="200">

    <path d="M311.75 96.29C302.06 74.33 296 60.6 293.58 55.11C281.23 27.15 241.52 27.27 229.34 55.31C215.31 87.63 205.06 111.24 191.01 143.59C179.37 170.39 141.07 169.54 130.64 142.24C118.61 110.78 109.56 87.09 97.15 54.63C86.9 27.8 49.69 25.83 36.66 51.43C33.61 57.41 26 72.36 13.81 96.29" id="wave" opacity="1" fill-opacity="0" stroke="cornflowerblue" stroke-width="10" stroke-opacity="1">
    </path>
</svg>

Но пока что рассмотрим пример по проще.

<svg xmlns="http://www.w3.org/2000/svg"  height="210" width="400" >
<path d="M150 0 L75 200 L225 200 Z" />
</svg>

Данный пример создаст треугольник

M 150 0 - означает перейти в точку 150 0

L 75 200- нарисовать линию от предыдущей точки (у нас это 150 0), в точку 75 200

L 225 200 - еще одна линия (линии всегда рисуются от предыдущей точки, поэтому задается только одна новая точка)

Z - замыкает наш треугольник

Полезное чтиво:

Описание синтаксиса линий http://www.w3schools.com/graphics/svg_path.asp
Подробное описание https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Paths
Просто хорошее описание http://css.yoksel.ru/svg-path/

Движение по кривой

Рассмотрим код кривой приведенной ниже

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="200">

    <path d="M311.75 96.29C302.06 74.33 296 60.6 293.58 55.11C281.23 27.15 241.52 27.27 229.34 55.31C215.31 87.63 205.06 111.24 191.01 143.59C179.37 170.39 141.07 169.54 130.64 142.24C118.61 110.78 109.56 87.09 97.15 54.63C86.9 27.8 49.69 25.83 36.66 51.43C33.61 57.41 26 72.36 13.81 96.29" id="wave" opacity="1" fill-opacity="0" stroke="cornflowerblue" stroke-width="10" stroke-opacity="1">
    </path>

    <circle id="circle" r="20" cx="0" cy="0" fill="cornflowerblue"></circle>

    <animateMotion xlink:href="#circle" dur="5s" begin="0s" fill="freeze" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1">
    <mpath xlink:href="#wave"></mpath>
    </animateMotion>
</svg>

http://primat.org/news/svg_animacija_dvizhenie_po_krivoj/2016-03-25-1162

defs. Формирование заготовок

Сделаем так, чтобы круг по прежнему двигался по траектории, но линия траектории была не видна. Для этого нам понадобится тег def, который позволяет формировать заготовки.

Поместим наш path в defs, таким образом path будет существовать, но уже не будет виден пользователю.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   width="320" height="200">
    <defs>
    <path d="M311.75 96.29C302.06 74.33 296 60.6 293.58 55.11C281.23 27.15 241.52 27.27 229.34 55.31C215.31 87.63 205.06 111.24 191.01 143.59C179.37 170.39 141.07 169.54 130.64 142.24C118.61 110.78 109.56 87.09 97.15 54.63C86.9 27.8 49.69 25.83 36.66 51.43C33.61 57.41 26 72.36 13.81 96.29" id="wave"></path>
    </defs>

    <circle id="circle" r="20" cx="0" cy="0" fill="cornflowerblue"></circle>

    <animateMotion xlink:href="#circle" dur="5s" begin="0s" fill="freeze" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1">
    <mpath xlink:href="#wave"></mpath>
    </animateMotion>
</svg>

Обратите внимание, что path c id="wave", хоть и не виден пользователю, но по прежнему используется в анимации, где mpath ссылается на него через xlink:href

use. Использование заготовок

Что если мы хотим оставить заготовку в defs и использовать её много раз, но при этом хотим всё-таки видеть путь по которому движется круг. Для этого можно использовать use.

Рассмотрим пример ниже

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   width="320" height="200">
    <defs>
    <path d="M311.75 96.29C302.06 74.33 296 60.6 293.58 55.11C281.23 27.15 241.52 27.27 229.34 55.31C215.31 87.63 205.06 111.24 191.01 143.59C179.37 170.39 141.07 169.54 130.64 142.24C118.61 110.78 109.56 87.09 97.15 54.63C86.9 27.8 49.69 25.83 36.66 51.43C33.61 57.41 26 72.36 13.81 96.29" id="wave"></path>
    </defs>
    <use xlink:href="#wave" opacity="1" fill-opacity="0" stroke="cornflowerblue" stroke-width="10" stroke-opacity="1"></use>

    <circle id="circle" r="20" cx="0" cy="0" fill="cornflowerblue"></circle>

    <animateMotion xlink:href="#circle" dur="5s" begin="0s" fill="freeze" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1">
    <mpath xlink:href="#wave"></mpath>
    </animateMotion>
</svg>

Обратите внимание, что use в коде не только подключает наш path, но и добавляет к нему оформление. То есть мы можем получать много разных вариантов наших заготовок (в разном цвете и разных размерах)

g. Группировка

Теперь допустим мы хотим, чтобы у нас было несколько элементов с анимацией. Чтобы не дублировать код, мы можем объединить линию, круг и всю сопутствующую анимацию в одну группу, с помощью тега g. Группу поместить в defs, чтобы она нам не мешала. И в дальнейшем с помощью use сделать необходимое количество копий с нужным нам расположением.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   width="320" height="300">

    <defs>
        <g id="pipe">
            <path d="M311.75 96.29C302.06 74.33 296 60.6 293.58 55.11C281.23 27.15 241.52 27.27 229.34 55.31C215.31 87.63 205.06 111.24 191.01 143.59C179.37 170.39 141.07 169.54 130.64 142.24C118.61 110.78 109.56 87.09 97.15 54.63C86.9 27.8 49.69 25.83 36.66 51.43C33.61 57.41 26 72.36 13.81 96.29" id="wave" opacity="1" fill-opacity="0" stroke="cornflowerblue" stroke-width="10" stroke-opacity="1"></path>

            <circle id="circle" r="20" cx="0" cy="0" fill="cornflowerblue"></circle>

            <animateMotion xlink:href="#circle" dur="5s" begin="0s" fill="freeze" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1">
                <mpath xlink:href="#wave"></mpath>
            </animateMotion>

        </g>
    </defs>

    <use xlink:href="#pipe" ></use>

    <use xlink:href="#pipe" x="0" y="100"></use>
</svg>

Полезное чтиво:

Тэг < defs> http://tutorials.jenkov.com/svg/defs-element.html
Тэг < g>
https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/
use
http://tutorials.jenkov.com/svg/use-element.html

Работа с текстом

https://developer.mozilla.org/ru/docs/Web/SVG/Element/textPath

http://vanseodesign.com/web-design/svg-text-on-a-path-part-1/

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">

  <defs>  
    <path id="text-path" d="M225,150 v-80 h240 v80 Z" />  
  </defs>

  <text>  
    <textPath xlink:href="#text-path" >SVG text on a linear path</textPath>  
  </text>

</svg>

Примеры текстовых эффектов на SVG https://codepen.io/collection/DPYwYN/2/

clip-path

Полезное чтиво:

О clip-path https://www.sarasoueidan.com/blog/css-svg-clipping/
Вырезания и маски https://css-tricks.com/clipping-masking-css/
Анимация при вырезках https://www.html5rocks.com/en/tutorials/masking/adobe/
Конструктор обрезаний :) https://bennettfeely.com/clippy/
Описание свойства в MDN https://developer.mozilla.org/ru/docs/Web/CSS/clip-path
Примеры https://getinstance.info/articles/css/making-sense-of-clip-path/

Паттерны

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
       <line x1="0" y1="10" x2="10" y2="0" stroke="black" stroke-width="2"/>
       <line x1="-2" y1="2" x2="2" y2="-2" stroke="black" stroke-width="2"/>
       <line x1="8" y1="12" x2="12" y2="8" stroke="black" stroke-width="2"/>
    </pattern>
  </defs>
  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
</svg>

В результате получим

Фильтры и маски

Фильтры в SVG http://html5.by/blog/svg-filters/
Изменение цвета SVG https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
Наложение фонов в надписях http://thenewcode.com/633/Boom-Wham-Pow-Comic-Book-FX-Lettering-with-SVG-Filters
Очень подробная подборка по маскам и вырезкам https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-clipping-and-masking-in-svg--cms-30380

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

Градиенты в SVG

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)"
          x="10" y="10" width="100" height="100"/>
</svg>

Заливка и обводка

http://css.yoksel.ru/svg-fill-and-stroke/#stroke-dasharray

Анимация в SVG

<svg width="120" height="120" viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>