Co je SVG?

SVG, nebo škálovatelné vektorové grafiky, je formát obrázků založený na XML pro dvourozměrnou grafiku.

Hlavní vlastnosti:

• Škálovatelnost: Obrázky zůstávají ostré při jakémkoli měřítku, protože jsou popsány matematickými vzorci, nikoli pixely.
• Formát XML: Struktura souborů SVG je popsána značkami, podobně jako HTML. To je činí čitelnými a upravitelnými v textu.
• Interaktivita: Možnost přidávat interaktivní prvky pomocí JavaScriptu.
• Animace: Podpora animace prvků pomocí CSS nebo JavaScriptu.
• Přístupnost: Možnost popsat obsah pro osoby s omezeními.
• Lehkost: Soubory SVG mohou být menší než rastrové obrázky se stejnou kvalitou.

Způsoby použití SVG:

• Vložení do HTML přes tag <svg>:

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

• Použití jako pozadí v CSS:

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

• Přes tag <img>:

  <img src="image.svg" alt="Moje SVG obrázek">
  

• Přes tag <object> nebo <iframe>.

SVG je ideální pro loga, ikony, ilustrace, grafy a diagramy, kde je důležitá ostrost při různých velikostech a možnost interaktivity.