Mis on SVG?

SVG, ehk Skaleeritavad Vektorgraafikud, on XML-põhine vektorpildi formaat kahe mõõtmelise graafika jaoks.

Peamised omadused:

• Skaleeritavus: Pildid jäävad teravaks igal skaalal, kuna neid kirjeldatakse matemaatiliste valemitega, mitte pikslitega.
• XML-formaat: SVG failide struktuur on kirjeldatud siltidega, sarnaselt HTML-iga. See muudab need loetavaks ja redigeeritavaks tekstina.
• Interaktiivsus: Võimalus lisada interaktiivseid elemente JavaScripti abil.
• Animatsioon: Toetab elementide animatsiooni CSS-i või JavaScripti abil.
• Juurdepääsetavus: Võimalus kirjeldada sisu puudega inimestele.
• Kerged: SVG-failid võivad olla väiksemad kui rasterpildid sama kvaliteediga.

SVG kasutamise viisid:

• HTML-i sisestamine <svg>-taga:

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

• Kasutamine CSS-i taustapildina:

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

• <img>-i kaudu:

  <img src="image.svg" alt="Minu SVG-pilt">
  

• <object> või <iframe>-i kaudu.

SVG sobib ideaalselt logode, ikoonide, illustratsioonide, diagrammide ja graafikute jaoks, kus oluline on selgus erinevates suurustes ning interaktiivsuse võimalus.