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 још није достигао статус Recommendation, савремени прегледачи већ подржавају већину његове функционалности. 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"
});