SVG

Oznaka <svg> omogoča prikaz vektorske grafike v dokumentu HTML. Kratica SVG pomeni Scalable Vector Graphics. Pri takšni grafiki slike niso sestavljene iz slikovnih pik na enak način kot pri rastrskih slikah, temveč iz geometrijskih elementov, ki jih opisujemo z oznakami in atributi.

Ker je grafika zapisana v vektorski obliki, jo lahko povečujemo ali pomanjšujemo brez izgube ostrine. To je posebej pomembno pri ikonah, logotipih, diagramih, preprostih ilustracijah in drugih grafičnih prikazih, kjer želimo čist in natančen prikaz pri različnih velikostih.

Prednosti SVG

SVG je uporaben predvsem takrat, ko želimo pregledno, razširljivo in natančno 2D-grafiko. Njegove glavne prednosti so:

• grafika ostane ostra tudi pri povečavi,
• elemente lahko oblikujemo s CSS,
• elemente lahko spreminjamo z JavaScriptom,
• primeren je za ikone, diagrame, logotipe in preproste ilustracije.

Razlika med canvas in svg

Element <svg> opisuje posamezne grafične elemente kot ločene objekte. To pomeni, da ima vsak narisani del svojo lastno oznako in ga lahko po potrebi posebej oblikujemo ali spreminjamo.

Element <canvas> pa predstavlja risalno površino, na katero rišemo z JavaScriptom. Pri tem praviloma ne delamo s posameznimi samostojnimi objekti, ampak z narisano sliko na platnu.

Osnovna oznaka <svg>

Element <svg> določa območje, znotraj katerega bodo narisani grafični elementi. Običajno mu določimo širino in višino, nato pa vanj vključimo posamezne SVG-oznake.

<svg width="220" height="120">
  ...
</svg>

Vrednosti atributov width in height določata velikost prikazanega območja SVG. Znotraj tega območja nato postavljamo oblike s pomočjo njihovih lastnih koordinat.

Osnovni primer SVG

Najpreprostejši primer je pravokotnik, narisan znotraj oznake <svg>. Položaj določimo z atributoma x in y, velikost pa z atributoma width in height.

<svg width="220" height="120">
  <rect x="10" y="10" width="200" height="100"
        fill="lightblue" stroke="black" stroke-width="2" />
</svg>

Primer kroga

Krog narišemo z oznako <circle>. Središče kroga določimo z atributoma cx in cy, polmer pa z atributom r.

<svg width="160" height="160">
  <circle cx="80" cy="80" r="60"
          fill="orange" stroke="black" stroke-width="2" />
</svg>

Primer črte in besedila

V SVG lahko narišemo tudi črto in dodamo besedilo. Za črto uporabimo oznako <line>, za besedilo pa oznako <text>.

<svg width="300" height="120">
  <line x1="20" y1="20" x2="280" y2="20"
        stroke="red" stroke-width="4" />
  <text x="20" y="80" font-size="30" fill="blue">SVG primer</text>
</svg>

Primer več krogov

V isti SVG-sliki lahko združimo več oblik. Za združevanje pogosto uporabimo oznako <g>, s katero več elementov obravnavamo kot skupino. Tako lahko skupnim elementom določimo enake lastnosti.

<svg width="220" height="220">
  <g style="fill-opacity:0.7; stroke:black; stroke-width:3px;">
    <circle cx="100" cy="70" r="50" fill="red" />
    <circle cx="140" cy="140" r="50" fill="blue" />
    <circle cx="60" cy="140" r="50" fill="green" />
  </g>
</svg>

Priporočila

• SVG uporabimo takrat, ko potrebujemo ostro in prilagodljivo vektorsko grafiko.
• Za preproste diagrame, logotipe, ikone in sheme je SVG pogosto primernejši od rastrske slike.
• Pri več oblikah je koristno uporabljati oznako <g> za združevanje elementov.
• Za videz grafike lahko poleg atributov uporabimo tudi CSS.