Створення та модифікація SVG

Зображення в форматі SVG можна створювати в програмі Adobe Illustrator, деяких інших графічних програмах та програмах створення/роботи зі шрифтами.

Є онлайн-редактори, в яких можна створювати ці зображення.

Наступні дії можна виконувати і програмно, скриптами JS, jQuery і т.ін.
Існують JS-бібліотеки для зручної роботи з SVG.

Теги SVG

Зауважте, оскільки використовується формат XML, а не html5, то всі теги мають закриватися.

Також пам'ятайте, що у ліній за замовчуванням нульова товщина, а колір зафарбовування фігур - чорний.

Група

Тег <g> - групує примітиви для зручності роботи з ними.

Завдання: об'єднайте у дві групи три крапочки зліва і справа від носа кота, створіть ховер-ефект на групу.

Лінія

Тег <line ... /> створює лінію від точки {x1, y1} до точки {x2, y2}.

<line x1="100" y1="300" x2="300" y2="100" />

У ліній є додаткові стилі:

stroke-linecap - стиль для промальовки кінчиків лінії, може приймати значення butt, square, round.

stroke-dasharray - стиль, що задає переривчастий тип лінії (заданий ряд чисел умовно нескінченно повторюється).

line { stroke-linecap: butt; /* дефолтне значення */ }
.line2 { stroke-linecap: square; }
.line3 { stroke-linecap: round; }
.line2 { stroke-dasharray: 4; }
.line3 { stroke-dasharray: 5 5 1 5 12; }

Прямокутник

Тег <rect ... /> створює прямокутник, потрібно задати лівий верхній кут і розміри.

Прямокутнику можна добавити скруглення кутів атрибутами rx, ry.

<rect x="400" y="100" width="400" height="200" />
<rect x="400" y="100" width="400" height="200" rx="15" ry="15" />

Полілінія та полігон

Полілінія - декілька ліній, що йдуть одна за одною ланцюжком.

Полігон схожий на полілінію і є замкненою фігурою: від останньої точки до першої також проводиться лінія.

Обидві фігури задаються набором точок. Для зручності значення x та y розділяють комою, а окремі точки розділяють пробілами. Але це не обов'язково, можна всі значення записати через пробіл, кому, кому-пробіл, використовувати табуляцію, переноси строк.

<polyline points="50,375 150,375 150,325 250,325" />
<polygon points="50,375 150,375 150,325 250,325" />

<polygon points="50 375 150 375 150 325 250 325" />
<polygon points="50,375,150,375,150,325,250,325" />
<polygon points="50, 375, 150, 375, 150, 325, 250, 325" />

stroke-linejoin - стиль для промальовки з'єднань ліній.

line { stroke-linejoin: miter; /* дефолтне значення */ }
.line2 { stroke-linejoin: bevel; }
.line3 { stroke-linejoin: round; }

Коло та еліпс

Для кола та еліпса задається центральна точка і радіус. У еліпса два радіуса.

<circle cx="150" cy="100" r="100" />
<ellipse cx="100" cy="100" rx="70" ry="40" />

Вивід тексту

Щоб вивести текстову строку у SVG використовують тег <text>. Атрибутами вказують положення лівого краю базової лінії шрифта (за замовчуванням, можна задати вирівнювання по горизонталі та вертикалі).

<text x="100" y="100">hello</text>

За допомогою CSS можна задати параметри текста:

text {
  font-size: 40px;
  stroke: red;
  fill: blue;
  letter-spacing: 4px;
  text-transform: uppercase;
}

Якщо тексту не задавати fill (чи задати прозорий колір), то текст буде відображатися у вигляді обводки, прозорий.

Вставка растрового зображення

У векторне зображення можна вставити растрове:

<image xlink:href="123.jpg" x="50" y="100" width="678" height="435" />

У даному випадку адреса картинки використовує namespace xlink, тому ящо не прописати цей xmlns:xlink в тезі svg - шлях до картинки не буде знайдено.

Path

Тег <path ... /> дозволяє створювати фігури будь-якої складності, використовуючи лінії, дуги, криві Безьє.

<path d="M 50 50 L 32.5 12.3 z" />

У атрибуті d вказується набір команд для "плоттера" (роборуки, що тримає фломастер фломастер).

Спочатку вказується літера, за якою закріплена певна команда, потім - параметри, координати точок і т.п.

Велика літера - вказуються абсолютні координати, мала літера - відносні координати.

Числові значення можуть розділятися пробілами, комами, комами з пробілами, символом мінуса:

<path d="M 50 50 L 32.5 12.3 h -40 m 30 -20 z" />
<path d="M 50,50 L 32.5,12.3 h -40 m 30,-20 z" />
<path d="M50,50L32.5,12.3h-40m30-20z" />

M 50 50 - перемістити точку в позицію x=50, y=50.

L 32.5 12.3 - провести лінію до вказаної точки.

m 50 -50 - перемістити точку в нову позицію відносно попередньої координати x=+50, y=-50.

l 32.5 12.3 - провести лінію до точки, що розташована від попередньої на вказані відстані.

z - повернутися в початкову точку M

H 40 - провести горизонтальну лінію до x=40.

V 24 - провести вертикальну лінію до y=24.

h -40 - провести горизонтальну лінію на 40 вліво.

v 24 - провести вертикальну лінію на 24 вниз.

Завдання

  1. Створіть сторінку index.html.
  2. Намалюйте сніговичка у SVG.

Практика

Потрібно створити "інтерактивний" план поверху багатоквартирного будинку:
на план будинку накладаються різнокольорові напівпрозорі багатокутники, що позначають площу (межі) окремих квартир.

  1. Створіть сторінку index.html.
  2. Знайдіть в інтернеті зображення "план квартир на поверсі", вставте його на сторінку.
  3. Поверх картинки накладіть SVG-зображення.
  4. Створіть path для кожної квартири, дайте їм класи, оформіть обводку, заляйте напівпрозорими кольорами. Визначитися з координатами вам допоможе фотошоп.
  5. При наведенні на path змінюйте прозорість кольору, встановіть курсор pointer.