SVG format

Vektorska grafika

Splošno o formatu

Scalable Vector Graphics (SVG) je format dvorazsežne vektorske grafike, ki bazira na označevalnem jeziku Extensive Markup Language (XML) [1,2] Format je bil razvit leta 1999 s strani mednarodnega inštituta W3C.

Format SVG omogoča tri tipe grafičnih objektov, to so vektorski objekti (sestavljeni iz ravnih linij in krivulj), bitne sličice ter besedilo. Grafični objekti so lahko  grupirani (značka , lažje razumljeno kot plast) [3], olepšani z različnimi stili (značka atribut “style” za izbro širine poteze, barve polnila, obrobe,…) [4], transformirani (vektorsko preoblikovanje) ter združeni v kompozite (različni objekti postanejo en objekt) [2]. Grafike in njihovo vedenje je definirano v XML tekstovnih datotekah, kar nam omogoča da so berljive za spletne iskalnike (iskalnik je sposoben pregledati vsebino) [5], indeksiranje (datoteko lahko pregledajo spletni pajki, ki beležijo ključne informacije za iskalnike) [5], skriptiranje (programiranje datotek) ter kompresijo (stiskanje datotek za zmanjšanje velikosti) [1,2]. SVG grafiko pretvorimo v interaktivno in/ ali animacijo s pomočjo SVG XML elementov ali preko skripte, ki dostopa do DOM (strukture SVG datoteke [2]. Časovno pogojene spremembe izrisane grafike so lahko opisane z jezikom SMIL ali sprogramirane s poljubnim podprtim skriptnim jezikom kot npr. JavaScript ali ECMASCript [2].  SVG nudi tudi podporo za CSS, ki nam omogočajo večji nadzor nad urejanjem stilov. Datoteke formata SVG je mogoče, tako kot XML datoteke, ustvariti in urejati s poljubnim tekstovnim urejevalnikom (npr. Notepad++) [2].

Prilagojenost za tisk

Format SVG je primarno prilagojen za izdelavo vektorskih grafik, vključuje pa vse osnovne lastnosti jezika PDL (page description language), zato je lahko uporaben tudi za tisk. Zajema podporo obogatitve grafik in besedila, podporo za CSS datoteke ter natančno določitev pozicioniranja objektov v končnem izdelku. Tako je rezultat primerljiv s PDF datotekami [2].

Zgodovinski pregled

Razvoj formata SVG se je pričel leta 1998 na inštitutu World Wide Web consortium (W3C) pod vodstvom Chris Lilley-a [1,2,6]

SVG 1.x

Prva uradna različica SVG 1.0 izide septembra 2001. Prva uradna posodobitev imenovana SVG 1.1 izide januarja 2003, z njo pa tudi SVG Tiny in SVG Basic (profila prilagojena za mobilne naprave). Leta 2008 izide SVG Tiny 1.2, ki je bila sprva načrtovana kot polna različica SVG 1.2 a je bila ovržena v prid SVG 2.0. Zadnja posodobitev 1.x imenovana 1.1 v2 je izšla avgusta 2011, v tej pa so bile dodane zgolj splošne pojasnitve formata ter poglavje z znanimi napakami (errata) [2,8].

SVG 2.x

Uradna različica 2.0 je izšla septembra 2016. V tej so odstranjene mnoge funkcije različice 1.X, dodane pa nove funkcije prevzete iz HTML5 ter WOFF. Primeri spremembo so: ostranitev nekaterih fontov, ki so jih nadomestili formati WOFF, atribut xml:space je nadomeščen s CSS, dodane pa so mnoge funkcionalnosti HTML kot sta atributa “translate” in “data-*” [2,8].

Mobilni profili SVG Tiny in SVG Basic

Zaradi porasta novega mobilnega tržišča je prišlo leta 2003 v različici 1.1 do razvejitve v polno različico SVG 1.1 ter zmanjšani različici SVG Tiny in SVG Basic. Slednji dve sta prilagojeni pred vsem za uporabniške posrednike (kot so npr spletni brskalniki). Različica Tiny je najbolj okrnjena in ne podpira urejanje stilov ter skriptiranja, razvita pa je bila za manj zmogljive mobilne telefone. Različica Basic je bila razvita za zmoglivejše mobilne naprave kot so pametni telefoni[2].

Glavne funkcije, ki jih mobilni različici ne podpirata so: nobena različica ne podpira polne funkcionalnosti DOM strukturiranja, SVG Basic pa omogoča omejeno skriptiranje. Kljub omejitvam sta mobilna profila še vseeno zmožna izrisati večino SVG grafik[2,8].

S posodobitvijo SVGT 1.2, ki vključuje dodatek micro DOM, dodajo še funkcionalnosti stiliranja in skriptiranja za mobilne naprave[2,8].

SVG kodiranje

SVG kodo pišemo podobno kot XML datoteke, z uporabo definiranih pravil za označevanje besedila, ki se nato pretvori v grafiko. Grafiko lahko ustvarimo s tekstovnim urejevalnikom ali specializiranimi programi kot je npr. InkScape [7,8]. Okvir SVG grafike tekstovno “odpremo” oz. definiramo z značko zapremo za z značko . V privi z atributi določimo še podrobnejše lastnosti okvirja, Atribut width določi širino, height pa višino okvirja oz. območja za izris grafike. Atribut viewBox določi zamik po x in y oseh, zahteva pa še prej izbrano širino in višino (nastavitve ločimo z vejico in/ali presledkom). Z atributom xmlns določimo še namespace – dekodiranje dokumenta po izbranem standardu [7,8].

Primer izpolnjene značke:

<svg width=”100″ height=”150″ viewBox=”0, 0, 100, 150″ xmlns=”http://www.w3.org/2000/svg”/>

 

SVG grafiko lahko dodamo neposredno v HTML kodo po spodnjem vzorcu kode [7,8].

<html>
<body>
<h1>Primer SVG grafike v HTML kodi</h1>
  <svg width=”100″ height=”100″ xmlns=”http://www.w3.org/2000/svg”/>         
    <circle cx=”50″ cy=”50″ r=”40″ stroke=”blue” stroke-width=”20″ fill=”green” />
  </svg>
</body>
</html>

Med znački lahko pričnemo dodajati različne grafične elemente. Pri tem lahko uporabimo že definirane oblike z uporabo spodnjih značk.

Primeri značk in atributov:

 

Pri pisanju markup besedila uporabljamo različne značke kot sta npr.  in . Vsaka značka sprejme še določene atribute s katerimi definiramo podrobnejše lastnosti likov oz. linij.

Štirikotnik:

Značka: 

  • x določi odmik štirikotnika od levega zgornjega kota
  • y določi odmik štirikotnika od levega zgornjega kota
    Če sta x ali y negativna se lik pomakne gor/ levo. Preveliki vrednosti lahko lik pomakneta izven definiranega
  • width določi širino štirikotnika
    width=”290″
  • height določi višino štirikotnika
    height=”110″
  • rx ry določita radij zaokrožitev robov po x in y osi. Pri uporabi zaokrožitev morata biti oba atributa večja od 0.
    rx=”10″ ry=”15″
 <p><!-- [et_pb_line_break_holder] -->< svg width="320" height="120"><br><!-- [et_pb_line_break_holder] -->< rect x="5" y="5" width="310" height="110" rx="30" ry="20" style="fill:rgb(0,200,100);stroke-width:10;stroke:black /><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="320" height="120"><!-- [et_pb_line_break_holder] --><rect x="5" y="5" width="310" height="110" rx="30" ry="20" style="fill:rgb(0,200,100);stroke-width:10;stroke:black"/><!-- [et_pb_line_break_holder] --></svg>    

Krog:

Značka:

  • r določi radij kroga
  • cx določi x pozicijo središča kroga
  • cy določi y pozicijo središča kroga
<p><!-- [et_pb_line_break_holder] -->< svg width="140" height="140"><br><!-- [et_pb_line_break_holder] -->< circle cx="70" cy="70" r="60" style="fill:rgb(0,100,200);stroke-width:10;stroke:red" /><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="140" height="140"><!-- [et_pb_line_break_holder] --><circle cx="70" cy="70" r="60" style="fill:rgb(0,100,200);stroke-width:10;stroke:red" /><!-- [et_pb_line_break_holder] --></svg>     

Elipsa:

Značka:

  • rx določi radij elipse po x osi
    rx=”90″
  • ry določi radij po y osi
    ry=”40″
  • cx in cy storita podobno kot pri krogu
    cy=”50″ rx=”90″
<p><!-- [et_pb_line_break_holder] -->< svg width="200" height="100"><br><!-- [et_pb_line_break_holder] --> < ellipse rx="90" ry="40" cx="100" cy="50" style="fill:green;stroke-width:10;stroke:blue" /> <!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="200" height="100"><!-- [et_pb_line_break_holder] --><ellipse rx="90" ry="40" cx="100" cy="50" style="fill:green;stroke-width:10;stroke:blue" /><!-- [et_pb_line_break_holder] --></svg>

Ravna linija:

Značka:

  • x1 in y1 določita x in y točke T1
  • x2 in y2 določita x in y točke T2
    Med določenima točkama se nato poveže črta.
<!-- [et_pb_line_break_holder] --><p><!-- [et_pb_line_break_holder] -->< svg width="300" height="100"><br><!-- [et_pb_line_break_holder] -->< line x1="15" y1="15" x2="290" y2="90" stroke-width="10" stroke="black"/> <!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="300" height="100"><!-- [et_pb_line_break_holder] --><line x1="15" y1="15" x2="290" y2="90" stroke-width="10" stroke="black"/>  <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->

Več točkovna linija:

Značka:

  • points=”10 10, 50 50, 200 90, 290 30” definira več zaporedno povezanih točk.
    Za definiranje točk T1(x1,y2) T2(x2,y2) T3(x3,y3) bi zapisali:
<p><!-- [et_pb_line_break_holder] -->< svg width="300" height="100"><br><!-- [et_pb_line_break_holder] -->< polyline points="10 10, 50 50, 200 90, 290 30" style="fill:white;stroke:black;stroke-width:7" /><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="300" height="100"><!-- [et_pb_line_break_holder] --><polyline points="10 10, 50 50, 200 90, 290 30" style="fill:white;stroke:black;stroke-width:7" /><!-- [et_pb_line_break_holder] --> </svg>

Splošni atributi in pravila:

  • pri zapisovanju lastnosti atributov lahko števila ločimo na različne načine kot npr s presledkom in/ali vejico
    primer: points=”10 10, 50 50″
    je enako kot: points=”10,10 50,50″
  • Za določitev barve lahko uporabimo format rgb(r,g,b), nekatere osnovne barve pa lahko določimo tudi z besedo.
    primer:  fill=”black”
    je enako kot: fill=rgb(0,0,0)
  • Nadpičja pri atributih niso obvezna
    primer: x=”5″
    je enako kot: x=5
  • style uporabimo za družitev atributov, ki uredijo stil lika
    primer: <rect width="100" height="100" style=”fill:rgb(0,0,255);stroke-width:3;stroke:black” />
    in je enako kot:  <rect width="100" height="100" fill=rgb(0,0,255) stroke-width=”3″ stroke=black />
  • stroke določi barvo obrobe
    primer: stroke=”black”
  • stroke-width določi širino obrobe
    primer: stroke-width=”10″
  • fill določi barvo polnila
    primer: fill=rgb(0,200,70)
<h4>Spodnja primera dosežeta isti rezultat z različnima kodama</h4><!-- [et_pb_line_break_holder] --><p><!-- [et_pb_line_break_holder] -->< svg width="100" height="100"><br><!-- [et_pb_line_break_holder] -->< rect x=5 y=5 width="90" height="90" style="fill:rgb(0,100,200);stroke-width:10;stroke:black" /><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="100" height="100"><!-- [et_pb_line_break_holder] --><rect x=5 y=5 width="90" height="90" style="fill:rgb(0,100,200);stroke-width:10;stroke:black" /><!-- [et_pb_line_break_holder] --></svg>
<p><!-- [et_pb_line_break_holder] -->< svg width="100" height="100"><br><!-- [et_pb_line_break_holder] -->< rect x=5 y=5 width="90" height="90" fill=rgb(0,100,200) stroke-width=10 stroke=black /><!-- [et_pb_line_break_holder] --></p><!-- [et_pb_line_break_holder] --><svg width="100" height="100"><!-- [et_pb_line_break_holder] --><rect x=5 y=5 width="90" height="90" fill=rgb(0,100,200) stroke-width=10 stroke=black /><!-- [et_pb_line_break_holder] --></svg>

Viri

[1] Rugelj, J. (2019). Zapiski s predavanj pri predmetu Večpredstavnost in hipertekst. Ljubljana: Pedagoška fakulteta

[2] Scalable Vector Graphics (2019). Pridobljeno s  https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

[3] MDN Web docs: (2019). Prodobljeno s  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

[4] MDN Web docs: (2019). Pridobljeno s https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style

[5]  Is SVG good for SEO? (2017). Pridobljeno s https://www.relevance.com/is-svg-good-for-seo/

[6] Chris Lilley (computer scientist) (2019). Pridobljeno s https://en.wikipedia.org/wiki/Chris_Lilley_(computer_scientist)

[7] W3schools SVG Tutorial. Pridobljeno s  https://www.w3schools.com/graphics/svg_intro.asp

[8] Scalable Vector Graphics (SVG) 2 W3C Candidate Recommendation (2018). Pridobljeno s https://www.w3.org/TR/SVG/