Čo je SVG?

SVG (Scalable Vector Graphics) je formát vektorovej grafiky založený na XML na tvorbu dvojrozmernej grafiky. Na rozdiel od rastrových obrázkov, SVG opisuje grafiku pomocou matematických vzorcov, čo umožňuje škálovanie obrázkov bez straty kvality.

Hlavné vlastnosti SVG:

• Vektorový formát: Obrázky sú opisované pomocou geometrických primitív (body, čiary, krivky, tvary), nie pomocou pixelov.
• XML základ: Štruktúra SVG dokumentu je založená na syntaxe XML, čo ho robí ľahko čitateľným a upraviteľným.
• Škálovateľnosť: Obrázky je možné zväčšovať alebo zmenšovať bez straty ostrosti alebo kvality.
• Interaktivita: Elementy SVG môžu byť interaktívne, reagovať na udalosti (kliknutia, hover atď.) pomocou JavaScriptu.
• Štylizácia: Vzhľad elementov SVG môže byť upravený pomocou CSS.
• Animácia: SVG podporuje animáciu prvkov pomocou vstavaných prostriedkov alebo CSS/JavaScriptu.

Výhody používania SVG na webe:

• Ideálne pre ikony a logá: Škálovateľnosť zabezpečuje ostrý zobrazenie na akomkoľvek rozlíšení obrazovky.
• Menšia veľkosť súborov: Pre mnoho typov grafiky môžu byť SVG súbory menšie ako podobné rastrové formáty.
• SEO-priateľské: Text v SVG je indexovaný vyhľadávačmi.
• Prístupnosť: Vďaka textovej povahe je SVG prístupnejší pre pomocné technológie.
• Jednoduchá modifikácia: Keďže je to XML, obsah môže byť dynamicky menený.

Príklad jednoduchého SVG obrázka (kruh):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>