SVEUČILIŠTE U ZAGREBU

FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA

SEMINAR

SVG format datoteke

Filip Sakač

Za predmet: Računalna forenzika

Zagreb, siječanj, 2017.

Sadržaj

Sadržaj ....................................................................................................................... 2

Uvod ........................................................................................................................... 3

Format datoteke ......................................................................................................... 4

Prikazivanje elemenata u SVG slici......................................................................... 4

Osnovni elementi SVG slike .................................................................................... 4

Složeni elementi ...................................................................................................... 7

Transformacije ........................................................................................................ 7

Primjeri svg datoteka .................................................................................................. 8

Metapodatci .............................................................................................................. 10

Steganografija koristeći SVG datoteke ..................................................................... 11

SVG datoteke i virusi ................................................................................................ 13

Zaključak .................................................................................................................. 14

Izvori ......................................................................................................................... 15

Uvod

SVG (Scalable Vector Graphics) je format za pohranjivanje slika vektorske

grafike, a temelji se na jeziku XML (Extensible Markup Language). Za razliku od

rasterske grafike koja sliku pohranjuje kao pravokutnu mrežu točaka (piksela eng.

pixel), vektorska grafika sliku pohranjuje pomoću poligona. Poligoni su

dvodimenzijonalna geometrijska tijela omeđena konačnim brojem dužina. Glavna

prednost takvih slika je da ih se može beskonačno uvećati bez gubitka kvalitete.

SVG datoteke obično imaju ekstenziju .svg, a pošto se temelje na XML

standardu može ih se čitati i uređivati u tekstualnom obliku. Dodatna prednost

korištenja XML formata je da se njime može upravljati pomoću JavaScripta, što

omogućuje animiranje SVG slike i interakciju s korisnikom, na isti način kao i HTML

dokument. Slike u SVG formatu su obično manje od slika u rasterskim formatima (.jpg,

.png, .bmp) i mogu se efikasno komprimirati bez gubitaka isto kao i tekst (komprimirana

.svg slika koristi ekstenziju .svgz).

SVG specifikacija je otvoreni standard razvijen od strane World Wide Web

Consortiuma (W3C) 1999. godine [1]. Svi moderni web pretraživači imaju ugrađenu

podršku za prikazivanje slika u SVG formatu, također postoje mnogi alati za izradu i

obradu SVG slika. Primjeri alata za obradu SVG slika otvorenog koda su: Inkscape,

LibreOffice Draw i Dia, a primjeri vlasničkih programa su: Adobe Ilustrator i Corel Draw.

Aktualna verzija SVG specifikacije je 1.1 a u izradi je novija verzija 2.0. Postoje i

posebne specifikacije s ograničenim mogućnostima prilagođenim mobilnim uređajima

SVG Basic i SVG Tiny.

Format datoteke

SVG datoteka je tekstualna datoteka koja se temelji na XML formatu. Kao i sve

XML datoteke tako i SVG počinje sa XML deklaracijom u prvom redu kao što je

prikazano u Kodu1.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Kod1. Deklaracija XML dokumenta

Osnovni XML element koji sadrži sve ostale SVG elemente je <svg>. Jedan

<svg> element također može sadržavati i druge <svg> elemente što omogućuje

ugnježđivanje slika. S atributima <svg> elementa moguće je definirati osnovne

informacije o slici kao što su: verzija SVG jezika kojim je dokument pisan, širina slike

u pikselima, visina slike u pikselima, klasa elementa (isto kao i HTML može se koristiti

za selekciju elemenata, ili definiranje CSS stila). Ako je <svg> element ugniježden

mogu se dodatno definirati atributi x i y kao koordinate na kojima je potrebno prikazati

element.

Prikazivanje elemenata u SVG slici

Elementi SVG slike prikazuju se u kartezijevom koordinatnom sustavu jednako

kao i kod HTML-a. Ishodište koordinatnog sustava je gornji lijevi kut ekrana, X

vrijednosti rastu prema desno, a Y vrijednosti rastu prema dolje. Mjerna jedinica koja

se koristi su pikseli. Elementi se na sliku crtaju u redoslijedu kojim se pojavljuju u

datoteci, to znači da noviji elementi mogu u potpunosti ili djelomično prekrivati

elemente koji su definirani ranije.

Osnovni elementi SVG slike

<line>

o Koristi se za iscrtavanje linije između dvije točke (x1,y1) i (x2,y2),

obavezno je također definirati i boju da bi se linija iscrtala pomoću

atributa stroke. U Kodu2 je prikazan osnovni primjer crvene linije između

točaka (5,5) i (90,90)

<line x1="5" y1="5" stroke="red" x2="90" y2="90" />

Kod2. Implementacija linije

o Od ostalih atributa mogu se naglasiti: stroke-width za definiranje širine

linije, stroke-linecap koji definira dali je kraj linije zaobljen ili ravan, te

stroke-dasharray s kojim je moguće definirati isprekidanu liniju s točno

određenim segmentima

<rect>

o Koristi se da bi se nacrtao kvadrat, određene visine i širine atributima

height i width, i s definiranim koordinatama gornjeg lijevog kuta atributima

x i y. U Kodu3. je prikazan osnovni primjer kvadrata.

<rect x="60" y="95" height="30" width="50" />

Kod3. Implementacija kvadrata

o Neki ostali važniji atributi: fill za definiranje ispune kvadrata, ako atribut

nije naveden koristi se crna boja za ispunu. Osim boje kvadrat može biti

ispunjen i kompleksnijim efektima kao što su gradijent. Atributi stroke,

stroke-width i stroke-dasharray imaju jednaku funkciju kao i u <line>

elementu.

<circle>

o Element se koristi da bi se nacrtao krug, središte kruga definirano je

koordinatama cx i cy, a polumjer je definiran atributom r. S tim elementom

je također moguće koristiti i ostale atribute navedene kod elemenata

<line> i <rect>. U Kodu4. je prikazan osnovni primjer elementa <circle>.

<circle cx="80" cy="50" r="40"/>

Kod4. Implementacija kruga

<elipse>

o Element je vrlo sličan elementu <circle> samo što koristi dva polumjera

rx i ry. Polumjeri označavaju duljinu horizontalne i vertikalne poluosi.

Elipsa je uvijek jednako orijentirana osim ako se nad njom ne izvrši

rotacija. U Kodu5. je prikazan osnovni primjer elipse.

<ellipse cx="80" cy="110" rx="75" ry="105"/>

Kod5. Implementacija elipse

<path>

o Najbitniji element u SVG formatu, s njim je moguće implementirati sve do

sad navedene oblike. Može koristiti sve navedene atribute za opis linije i

ispunu kao i dosad navedeni elementi. Razlika je da su svi vrhovi

poligona pohranjeni u atributu d kao string sa vrijednostima koordinata

napisanima u nizu. Osnovna implementacija prikazana je u Kodu6.

o Navedene koordinate u stringu povezuju se linijama, te se na kraju

dobiveni lik ispuni bojom. Način na koji se povezuju vrhovi mogu se

definirati slijedećim slovima napisanim ispred koordinate: L – ravna linija,

Q – kvadratna linija, C – kubna linija, A – eliptični odsječak i M pomicanje

bez crte. Ako slovo nije navedeno pretpostavlja se ravna linija. Na kraju

stringa se sa oznakom Z označava spajanje s početnom točkom.

<path d="M 50,100 150,200 50,150"/>

Kod6. Implementacija puta

<image>

o Omogućuje uključivanje slika rasterske grafike u SVG sliku. Funkcionira

slično kao i <rect> element s dodatnim atributom xlink:href koji pokazuja

na lokaciju slike. Slika se prilagodi dimenzijama navedenima u elementu.

<text>

o Ovaj element dodaje tekst u SVG sliku. Za razliku od ostalih slika tekst u

SVG slici se može označavati, kopirati i pretraživati kao da se nalazi u

HTML-u. Sam tekst koji se želi prikazati je sadržan unutar <tekst>

elementa. S atributom font-family moguće je definirati željeni font na

jednak način kao i u CSS-u. Atribut font-size definira veličinu korištenog

fonta. U Kodu7. je prikazan primjer tekst elementa.

<text x="0" y="100" font-size="80" fill="red">Example text</text>

Kod7. Implementacija elipse

o SVG ima definirano još mnogo atributa kojima se utječe na prikaz teksta.

Zanimljiva je mogućnost prikaza teksta na način da prati neki definirani

put. To se može postići stavljanjem elementa <textPath> unutar <text>

elementa, s atributom koji pokazuje na id neke već definirane krivulje.

Složeni elementi

<g> o Služi za grupiranje više osnovnih elemenata u jednu cjelinu. Takvo

grupiranje omogućava stvaranje kompleksnijih objekata, koji se mogu

koristiti u ostatku slike. Elemente koje treba skupiti u grupu se

jednostavno stave kao djeca ovom elementu. Nad cijelom grupom se

kasnije mogu izvršavati transformacije, te se grupa može referencirati

tako da joj se zada atribut id.

o Ovom elementu moguće je definirati atribute koje nasljeđuju njegova

djeca tako da postave vrijednost zadanog atributa na inherit. Na taj način

moguće je na jednom mjestu promijeniti više atributa elemenata djece.

<use>

o Koristi se da se napravi kopija nekog elementa ili grupe elemenata.

Omogućuje ponovno iskorištavanje elemenata. Kao atribut xlink:href

prima id elementa kojeg treba kopirati.

Transformacije

Transformacije se mogu izvršiti na svim dosada navedenim elementima na način da

im se doda atribut transform koji sadrži string s transformacijama koje treba izvršiti nad

elementom. Transformacije se u stringu navode kao pozivi funkcija, a međusobno ih

se razdvaja zarezom. Postoje slijedeće transformacije:

translate(dx, dy)

o Pomiče zadani element za dx piksela po x osi, i dy piksela po y osi.

rotate(r, cx, cy)

o Rotira element za r stupnjeva oko točke s koordinatama (cx, cy)

scale(f)

o Koristi se za skaliranje objekta za faktor f. Radi na način da sve

koordinate pomnoži tim faktorom, što može kao posljedicu imati

pomicanje objekta prema ili od ishodišta. Također ako je f negativan

objekt će biti zrcaljen.

scale(fx, fy)

o Jadnako kao i scale transformacija, samo s drugačijim faktorima za

povećanje po x i y osima.

Osim ovdje navedenih elemenata i transformacija, SVG format nudi i naprednije

opcije kao što su: gradijenti, uzorci, maske, razni filteri, generiranje fraktala, itd.

Primjeri svg datoteka

Najzanimljivije svojstvo vektorske grafike, i prednost nad rasterskom grafikom,

je to da se slike mogu skalirati bez gubitka kvalitete. Da bi se to svojstvo demonstriralo

preuzet je primjer SVG slike sa stranice [2] te je uz pomoć alata [3] pretvorena u PNG

format (format rasterske grafike). Na Slici1 prikazana je originalna slika u mjerilu 1:2.

Na Slici2 je prikazan usporedba slika u SVG i PNG pormatu kada su uvećane i

fokusirane na jedno oko lika na slici. Može se uočiti da kvaliteta lijeve slike se nije

promjenila s njenim uvećavanjem, dok su na desnoj slici vidljivi pikseli koji su posljedica

povećanja slike i konačne rezlučivosti. Danas postoji trend povećanja vrsta uređaja

koja se povezuju na Internet, a i s time postoji sve više ekrana različitih dimenzija i

razlučivosti, od mobilnih telefona do TV prijamnika. Zbog toga je danas svojstvo

promjene dimenzija SVG slika bez gubitka kvalitete vrlo zanimljivo.

Slika1. Originalna slika

Slika2. Uvećane slike u SVG i PNG formatu

U Kodu8. prikazan je kod jedne jednostavne SVG slike u kojem je

implementirana većina osnovnih slikovnih elemenata. Rezultat tog koda prikazan je na

Slici 3. Na slici se može primijetiti kako zelena linija prolazi ispod kruga, te kako je tekst

napisan iznad plavog poligona, tu je prikazan redoslijed iscrtavanja SVG slike u kojem

elementi koji su kasnije definirani u kodu prekrivaju prijašnje elemente.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg"

width="500"

height="500">

<line x1="50" y1="50" x2="170" y2="270" stroke-width="2.5"

stroke="green"/>

<circle cx="80" cy="160" r="40" fill="red" stroke="black" stroke-

width="20"/>

<rect x="160" y="25" height="100" width="200" fill="yellow"

stroke="black" stroke-width="3"/>

<path d="M 350 200 L 400 400 170 150Z" fill="blue" stroke="black"

stroke-width="3"/>

<text x="100" y="320" font-size="70" fill="red">Some text</text>

</svg>

Kod8. SVG slika s implementiranim osnovnim elementima

Slika 3. Prikaz SVG slike iz Koda8.

Metapodatci

U standardu SVG definiran je element <metadata> koji je namijenjen da sadrži

metapodatke o SVG slici. Preporuča se da postoji samo jedan takav element u SVG

dokumentu, kao dijete vanjskog SVG elementa. Sadržaj <metadata> elementa su

elementi nekog drugog jezika temeljenog na XML-u koji je namijenjen opisu

metapodataka, kod SVG slika se u tu svrhu najčešće koristi RDF.

RDF (Resource Description Framework) je obitelj W3C specifikacija koja je

namijenjena kao model za spremanje metapodataka čitljiv računalu [4]. Vezija 1.0

objavljena je 2004. godine, a trenutna verzija 1.1 je iz 2014. godine. RDF model je

implementiran u više jezika, verzija koja koristi XML zove se RDF/XML. Osnovna

struktura u RDF formatu je uređena trojka (subjekt, predikat, objekt), a označava neki

odnos, prikazan u predikatu, postoji između subjekta i objekta. Takva struktura je

pogodna za opis metapodataka, na primjer predikat „je autor“, subjekt „ime autora“, a

objekt „SVG slika“. Primjer SVG datoteke sa metapodacima prikazan je u Kodu9.

<?xml version="1.0" standalone="yes"?>

<svg width="400" height="300" version="1.1"

xmlns = 'http://www.w3.org/2000/svg'>

<metadata>

<rdf:RDF

xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:dc = "http://purl.org/dc/elements/1.1/" >

<rdf:Description about="http://example.org/myfoo"

dc:title="MyFoo Financial Report"

dc:description="$three $bar $thousands $dollars $from 1998

$through 2000"

dc:publisher="Example Organization"

dc:date="2000-04-11"

dc:format="image/svg+xml"

dc:language="en" >

<dc:creator>

<rdf:Bag>

<rdf:li>Irving Bird</rdf:li>

<rdf:li>Mary Lambert</rdf:li>

</rdf:Bag>

</dc:creator>

</rdf:Description>

</rdf:RDF>

</metadata>

</svg>

Kod9. Primjer SVG slike sa metapodatcima u RDF formatu

Steganografija koristeći SVG datoteke

Steganografija je način sakrivanja tajnih informacija u nekim drugim slikama,

tekstovima, videima ili datotekama. Za razliku od kriptografije koja tajnu komunikaciju

kodira na način koji ne nečitljiv trećoj strani, steganografija prikriva da komunikacija

uopće postoji. Korištena je u mnogim slučajevima kroz povijest, a i u današnje vrijeme

kao dodatak kriptografiji, ili u nekim zemljama gdje je kriptografija zabranjena. U ovom

radu opisuju se tehnike sakrivanja tajnih informacija unutar SVG datoteka.

Steganografija u SVG datotekama može koristiti vrlo jednostavne metode, koje

je lako koristiti i kasnije pročitati, do vrlo kompleksnih metoda opisanih u znanstvenim

radovima. Neke jednostavne metode koje bi se mogle koristiti je postavljanje teksta

jedne boje na istobojnu površinu. Kod gledanja slike tekst bio neprimjetan, no primatelj

poruke koji zna da tekst postoji mogao bi ga jednostavno označiti mišem i pročitati.

Primjer takve jednostavne steganografije prikazan je na Slici4.

Slika4. Kvadrat sa skrivenim tekstom prije i poslije označavanja mišem

Malo bolje skriven tekst bi se postigao tako da se tekst stavi iza kvadrata

(definira se prije u SVG kodu), tada tekst ne bi bio vidljiv kada bi se kvadrat označilo

mišem, no mogao bi se pronaći pretraživanjem u pregledniku, ili označavanjem

kvadrata i kopiranjem teksta pa njegovim lijepljenjem u neku tekstualnu datoteku (ctrl

+ c, ctrl + v).

Naprednije tehnike sakrivanja datoteka u SVG datoteke mogu se podijeliti u

dvije kategorije: odstupanje (engl. Jitter) i ugrađivanje (engl. embedding) [5]. Takve

metode pokušavaju sakriti postojanje informacije i iz prikaza slike, i iz njezinog koda.

Sakrivanje informacije odstupanjem temelji se na malim, oku nevidljivim

promjenama u slici, koje se koriste za prijenos informacija. Primjer takve tehnike je da

se informacija koja se želi prenijeti najprije kodira u binarne podatke, a zatim u niz

decimalnih brojeva. Ti decimalni brojevi dodaju se kao znamenke iza decimalne točke

svim koordinatama u dokumentu. Takva promjena u dokumentu je oku nevidljiva na

konačnom prikazu slike. Da bi se dodatno informacija sakrila i u njenom XML obliku,

na svim točkama koje su promijenjene izvrši se neka mala reverzibilna transformacija

(na primjer rotacija za vrlo mali kut), to promjeni decimalni zapis broja te se više

informacija ne može jednostavno pročitati. Transformacija koja je izvršena koristi se

kao svojevrsni ključ, primatelj ako ju zna može na svim točkama izvršiti reverznu

transformaciju te zatim pročitati sakrivenu kodiranu informaciju [6].

Steganografija ugrađivanjem radi na način da se u sliku dodaju elementi koji ne

utječu na njezin prikaz, a i nisu vidljivi iz koda slike. Primjer takve tehnike je dodavanje

točaka na ravne linije elemenata slike. Dodatne točne ne utječu na prikaz slike, a mogu

sadržavati informacije u sebi. Ako se ravna linija podijele na segmente duljina tih

segmenta mogla bi predstavljati određenu kombinaciju bitova (na primjer ako je

dozvoljeno 256 različitih duljina segmenata, svaka dodana točka označavala bi jedan

bajt informacije) [5]. Problem kod ove tehnike je da bi treća strana kod detaljnije analize

koda mogla primijetiti veliku količinu točaka na poligonima koji izgledaju jednostavnije

u prikazu.

SVG datoteke i virusi

Same SVG datoteke i njihovo pregledavanje ne može naštetiti računalu budući

da se radi o običnoj XML datoteci, no SVG datoteke mogu korisnike navesti na drugi

sadržaj koji može sadržavati viruse. Glavni mehanizam kojim se to postiže su <script>

elementi. SVG podržava <script> elemente isto kao i HTML dokumenti, a pošto se

većina SVG slika otvara pomoću web preglednika moguće je izvršiti neki JavaScript

kod na računalu.

2015. godine hakirani Facebook profili koristili su se za širenje jedne SVG slike

po Facebooku. Korisnici su otvarali sliku jer su mislili da je slikovni format bezopasan,

a i zato jer je slika dolazila od njihovih Facebook prijatelja. SVG slika se najčešće

otvara s web preglednikom, a u ovoj slici bila je sadržana skripta koja otvara dodatan

tab u pregledniku s stranicom koja je vrlo slična YouTubeu, ali je zapravo dizajnirana

za prijevaru korisnika. Stranica je korisnika tražila da instalira određeni program pod

isprikom da je potreban codec da bi se prikazao video sadržaj. Naravno nije se radilo

o codecu nego o malicioznom programu klase ransomware, takav program enkriptira

sve korisnikove podatke na računalu, te traži novac kako za šifru kojim bi se oni

otključali [7] [8].

Zaključak

SVG je format datoteke koji se koristi za pohranjivanje slika vektorske grafike,

a temelji se na jeziku XML, i specificiran je W3C standardom. Vektorska grafika

razlikuje se od standardne rasterske grafike (formati kao što su JPG, PNG, BMP, ..) u

tome da sliku ne pohranjuje kao niz piksela, već kao geometrijske oblike i krivulje.

Prednost koja se dobiva takvim opisom slike je da se slika može povećavati

beskonačno bez da izgubi oštrinu, što naravno nije slučaj kod rasterske grafike koja

ima ograničenu razlučivost. To svojstvo je vrlo zanimljivo u današnje vrijeme kada se

Internetu pristupa raznim uređajima koji imaju različite dimenzije ekrana, od mobilnih

telefona do TV prijamnika, pa web stranice moraju biti responzivne.

SVG slike opisane su kao tekstualna datoteka, i kao takve mogu se dobro

komprimirati standardnim kompresijskim metodama, što im omogućuje manju veličinu

od jednakih slika u rasterskim formatu. Zbog toga su SVG slike popularne na Internetu

jer se brže učitavaju, i danas svi poznatiji web preglednici podržavaju prikaz SVG slika.

Dodatno zanimljivo svojstvo SVG datoteka je da se njima može upravljati

pomoću koda u JavaScriptu, jednako kao i HTML dokumenti. JavaScript omogućuje

animiranje SVG slika, i interaktivnost s korisnikom, kao što je promjena slike kada se

preko nje prolazi mišem. No takva kompatibilnost s JavaScriptom također donosi i

probleme, jer daje hakerima mogućnosti širenja zlonamjernih web stranica. Iz tog

razloga, a i zbog sve veće popularnosti, SVG format je zanimljiv za računalnu

forenziku.

U ovom radu opisan je sam format SVG datoteke i elementi od kojih se sastoji

SVG slika, dani su primjeri slika na kojima je prikazano svojstvo povećavanja bez

gubitka kvalitete i kako se XML kod pretvara u sliku, zatim je opisan način kako se

pohranjuju metapodaci o SVG slici, što je uvijek zanimljivo za forenziku. U zadnja dva

poglavlja opisane su široke mogućnosti primjene SVG slika za steganografiju, i jedan

primjer gdje su SVG slike korištene za širenje zlonamjernih programa.

Izvori

[1] An SVG Primer for Today's Browsers, W3C, Rujan 2010, https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

[2] Open clip art, https://openclipart.org/

[3] SVG to PNG converter, http://svgtopng.com/

[4] RDF 1.1 XML Ssyntax, W3C preporuka, 25. veljače 2014, https://www.w3.org/TR/rdf-syntax-grammar/

[5] STEGANOGRAPHIC ALGORITHM FOR INFORMATION HIDING USING SCALABLE VECTOR GRAPHICS IMAGES, B. Madoš, J. Hurtuk, M. Čopjak, P. Hamaš, M. Ennert, Faculty of Electrical Engineering and Informatics, Technical University of Košice, Slovačka, 4. Studeni 2014, http://www.aei.tuke.sk/papers/2014/4/09_Mados.pdf

[6] Information Hiding in SVG by Affine Transformation with Small Perturbations, Chyuan-Huei Thomas Yang, Tsung-Ming Lin, Chin-Chih Chang, Husan-Chuang University, Hsinchu City, Taivan, 2008, http://www.inf.cyut.edu.tw/AIT2008/ft_251.pdf

[7] Soft2Secure, Beware of .svg file virus on Facebook, 22. Studeni 2016, http://soft2secure.com/knowledgebase/svg-file-virus

[8] Security Week, Cybercriminals Use SVG Files to Distribute Ransomware, 22. Svibanj 2015, http://www.securityweek.com/cybercriminals-use-svg-files-distribute-ransomware