Čo je SVG?

SVG, alebo Škálovateľná Vektorová Grafika, je formát obrázkov založený na XML pre dvojrozmernú grafiku.

Kľúčové vlastnosti:

• Škálovateľnosť: Obrázky zostávajú ostré pri akomkoľvek merítku, pretože sú opísané matematickými vzorcami, nie pixelmi.
• Formát XML: Štruktúra SVG súborov je opísaná tagmi, podobne ako HTML. To ich robí čitateľnými a upraviteľnými v texte.
• Interaktivita: Možnosť pridávať interaktívne prvky pomocou JavaScriptu.
• Animácia: Podpora animácie prvkov pomocou CSS alebo JavaScriptu.
• Prístupnosť: Možnosť popísať obsah pre osoby s obmedzeniami.
• Ľahkosť: SVG súbory môžu byť menšie ako rastrové obrázky pri rovnakej kvalite.

Spôsoby použitia SVG:

• Vloženie do HTML cez tag <svg>:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Použitie ako pozadie v CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Prostredníctvom tagu <img>:

  <img src="image.svg" alt="Môj SVG obrázok">
  

• Prostredníctvom tagov <object> alebo <iframe>.

SVG je ideálny pre logá, ikony, ilustrácie, grafy a diagramy, kde je dôležitá ostrosť pri rôznych veľkostiach a možnosť interaktivity.