SVG: какво е това, ключови понятия и използване в уеб разработката

Какво е SVG?

SVG — формат за векторна графика, базиран на XML, който се появява през 2001 г. като препоръка на W3C. За разлика от растерните формати, SVG описва изображението чрез геометрични примитиви: точки, линии, криви и многоъгълници. SVG файлът е обикновен текстов XML документ, който може да се чете, редактира и компресира със стандартни инструменти.

Архитектурата на SVG включва няколко ключови концепции. viewBox определя виртуална координатна система, независима от действителните размери на елемента. Например viewBox="0 0 100 100" създава квадратна мрежа 100×100, в която всички координати са фиксирани. При промяна на ширината или височината на контейнера, съдържанието се мащабира пропорционално.

Според W3C SVG 2 Specification, съвременната версия на SVG поддържа градиенти, маски, филтри, текст с произволно позициониране, интерактивност чрез JavaScript и анимация чрез CSS и SMIL. SVG е интегриран в DOM като пълноценен HTML елемент, което позволява програмно управление на всеки графичен примитив.

В мобилната разработка SVG се използва и в iOS чрез UIGraphicsImageRenderer и в Android чрез VectorDrawable — и двата формата конвертират подобни на SVG описания в хардуерно ускорени растери на GPU.

История и развитие на формата SVG

SVG 1.0 става препоръка на W3C през 2001 г., SVG 1.1 през 2003 г., SVG 2.0 е в процес на разработка от 2012 г. Основното нововъведение в SVG 2 е по-дълбока интеграция с CSS, поддръжка на compositing и blending modes, както и възможност за използване на SVG в HTML без namespace префикси.

Въпреки че SVG 2 все още не е достигнал статут на Препоръка, съвременните браузъри вече поддържат по-голямата част от функционалността му. Chrome, Safari, Firefox и Edge имат почти пълна поддръжка на SVG 1.1 и значителна част от SVG 2.

Основни елементи на SVG

SVG предоставя набор от елементи за описание на двуизмерна графика. Всеки елемент има атрибути, които определят неговата позиция, размер и визуален вид. Атрибутите могат да бъдат зададени като XML атрибути или чрез CSS свойства.

• <rect> — правоъгълник с атрибути x, y, width, height, rx, ry (заобляне на ъгли).
• <circle> — окръжност с атрибути cx, cy (център) и r (радиус).
• <ellipse> — елипса с атрибути cx, cy, rx, ry.
• <line> — отсечка с атрибути x1, y1, x2, y2.
• <polyline> — начупена линия с атрибут points (списък с координати).
• <polygon> — затворен многоъгълник с атрибут points.
• <path> — произволен контур с атрибут d (команди: M, L, C, Q, A, Z).
• <text> — текстов елемент с атрибути x, y, font-size, font-family.

Елементът path — най-мощният и гъвкав SVG елемент. Атрибутът d съдържа последователност от команди: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Всяка команда има абсолютна или относителна форма (главна или малка буква).

SVG поддържа и групиране на елементи чрез <g>. Групата наследява визуални атрибути (fill, stroke, transform) на всички дъщерни елементи. Това позволява прилагане на единен стил върху цял набор от фигури и управление на тяхната позиция чрез един transform.

SVG срещу растерна графика: сравнение на формати

Основната разлика между SVG и растерните формати (JPEG, PNG, WebP) — начинът на съхранение на информация. Растерът съхранява цвета на всеки пиксел в мрежа с фиксиран размер. SVG съхранява математически команди за възпроизвеждане на фигури. Тази разлика определя всички предимства и недостатъци на форматите.

Според HTTP Archive, 2025, 68% от уебсайтовете използват SVG за икони, 34% за илюстрации и 22% за логота. Средният размер на SVG икона е 0.5–2 KB, докато растерна икона с подобно качество е 5–20 KB в PNG формат.

За снимки и сложни растерни изображения SVG не е подходящ — размерът на XML описанието ще надвиши размера на еквивалентен JPEG. Препоръчителна област на приложение на SVG: икони, логота, илюстрации, схеми, графики, елементи на интерфейс с адаптивен дизайн.

Кога да изберете SVG и кога растерен формат

SVG — оптимален избор за елементи на интерфейса, които трябва да изглеждат остри на Retina екрани и при произволен мащаб на браузъра. Растер — за снимки, сложни текстури и изображения с милиони цветове, където векторното описание би било неоправдано сложно.

Хибриден подход — комбинация от SVG за елементи на интерфейса и WebP/AVIF за фотографско съдържание — дава най-добрия баланс между качество и производителност при зареждане на страницата.

Inline SVG и стилизиране чрез CSS

Inline SVG — е вграждане на SVG маркировка директно в HTML документа, а не като отделен файл чрез <img> или background-image. Предимството на inline SVG е, че SVG елементите стават част от DOM и могат да бъдат стилизирани чрез CSS, управлявани чрез JavaScript и анимирани без допълнителни заявки към сървъра.

За разлика от <img src="icon.svg">, където SVG е изолиран в shadow DOM, inline SVG наследява цветовете и шрифтовете на родителския документ. Това позволява, например, промяна на цвета на икона при задържане на мишката чрез CSS псевдоклас :hover без зареждане на отделен файл за всяко състояние.

Според CSS-Tricks, inline SVG е препоръчителният начин за използване на икони в съвременни уеб приложения. CSS свойствата fill, stroke, stroke-width се прилагат директно върху SVG елементи. За персонализиране чрез CSS е важно в оригиналния SVG да не са зададени fill и stroke като inline атрибути — в противен случай CSS не може да ги презапише.

• Предимства: стилизиране чрез CSS, управление чрез JS, без HTTP заявки, адаптивност на viewBox.
• Недостатъци: увеличаване на размера на HTML страницата, невъзможност за кеширане отделно от HTML.
• Алтернатива: SVG-спрайтове — комбиниране на няколко SVG в един файл и използване на <use href="#id">.

SVG-спрайтовете решават проблема с кеширането: всички икони се събират в един файл, браузърът го зарежда веднъж, а отделните икони се свързват чрез <use> с посочване на id на необходимия елемент вътре в спрайта.

Анимация на SVG: CSS и SMIL

CSS анимация на SVG — най-разпространеният и ефективен начин за анимиране на векторна графика в браузъра. CSS свойства като transform, opacity и fill се прилагат към SVG елементи по същия начин, както към HTML елементи. За анимация по произволен път се използва CSS свойството offset-path.

SMIL (Synchronized Multimedia Integration Language) — вграден в SVG механизъм за анимация, независим от CSS. Елементите <animate>, <animateTransform> и <animateMotion> позволяват анимиране на всякакви SVG атрибути без JavaScript и CSS. SMIL анимацията е гарантирано синхронизирана с честотата на кадрите на браузъра.

Според MDN Web Docs, SMIL се поддържа от всички съвременни браузъри, но CSS анимацията се счита за по-предвидима и ефективна. Основният сценарий за SMIL — анимация на атрибути, които не са достъпни чрез CSS, например d (path) на елемента <path>.

JavaScript + requestAnimationFrame дава максимален контрол върху анимацията на SVG. Уеб разработчиците използват библиотеките GSAP и Anime.js за сложни последователности от анимации с времеви линии и easing функции, които са трудни за реализиране чрез чист CSS.

Примери за код: създаване на SVG графика

Първи пример — проста икона на къщичка с използване на основни SVG елементи. Всички фигури са rect и polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Втори пример — анимация на въртене на лоудър чрез CSS. Използва се <circle> с атрибут stroke-dasharray за създаване на прекъснат контур:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Трети пример — анимация на path чрез библиотеката GSAP за плавно рисуване на контур. GSAP работи с атрибута stroke-dashoffset, създавайки ефект на появяване на линия:

// Начертаване на път с GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});