SVG - Uusi vanha vektoriformaatti

Abstract

Flash on tunnettu vektoriformaatti, mutta SVG vielä tuntematon, vaikka W3C standardisoikin sen jo lähes kymmenen vuotta sitten. Opinnäytetyön tavoitteenna onkin esitellä SVG niin hyvin, että lukijat voivat ohjelmoida omia SVG-sovelluksia opinnäytetyön pohjalta. Opinnäytetyön toisena tavoitteena on vertailla SVG:tä ja Flashia keskenään, sillä molemmilla voi tehdä selainpohjaisia, vuorovaikutteisia sovelluksia. Opinnäytetyön toimeksiantaja on Enkora Oy.

Opinnäytetyössä esitellään SVG-dokumentin rakenne ja kaikki keskeisimmät elementit. Opinnäytetyössä on koodiesimerkkejä elementtien luonnista ja pieni opas SVG:n käsittelemisestä JavaScriptillä sekä animoinnista SMIL-kielellä.

Esimerkkisovellus tehtiin SVG:llä. Esimerkkisovelluksen tapauksessa SVG oli tarkoituksenmukaisempi kuin Flash, sillä sovelluksen täytyy pystyä helposti kommunikoimaan muiden sovellusten kanssa. SVG:llä kommunikointi ei ole ongelma, sillä se perustuu XML-kieleen. Sovellus on selainpohjainen työkalu pohjapiirrosten luomiseen. Sillä voidaan luoda huoneita ja sijoittaa kameroita ja ovia haluttuihin paikkoihin. Sovellus liittyy Enkoran muihin kulunvalvontasovelluksiin ja nopeuttaa heidän työprosessejaan.

SVG ja Flash ovat loppujen lopuksi melko samanlaisia, sillä kumpaakin voi sekä ohjelmoida että piirtää. Suurin ero näiden kahden vektoriformaatin välillä on niiden tallennusmuoto: SVG tallennetaan ihmisellekin luettavana tekstinä, mutta Flash tallennetaan vain koneen luettavissa olevaan binäärimuotoon. Vaikka opinnäytetyön tavoite on vertailla SVG:tä ja Flashia, ei voida sanoa kumpi formaateista on parempi. Molemmilla formaateilla on hyvät ja huonot puolensa. Riippuukin käyttötarkoituksesta, kannattaako sovelluksen kehitykseen valita SVG vai Flash.

Flash is a popular format for vector graphics whereas SVG is still quite unknown although it was standardized nearly ten years ago by W3C. This study was done for a company named Enkora and its goal was to present SVG so well that readers could program their own SVG applications. Another goal was to compare SVG and Flash since both could be used to create interactive applications for the Internet.

This study presented the structure of SVG documents and all important elements. The study included many code examples for creating the elements and a short tutorial about programming SVG with JavaScript and animating it with SMIL. In addition, a sample application was made in SVG. With the sample application SVG was more appropriate format than Flash because the application had to communicate with other applications. This communication was not a problem since SVG was basicly XML. The application was an internet-based tool that could be used to create floorplans for buildings allowing users to create rooms and place doors and cameras where they want to. The application would be a part of Enkora's other access control software and it would fasten their processes.

As a result, SVG and Flash were quite similar because they could both be created by programming or drawing. The main difference between SVG and Flash was how they are saved: SVG was plain text that a human could read but Flash was saved in a binary format that was readable only for computers. Although the goal for this study was to compare SVG and Flash, it appeared to be impossible to say which one would be better. Both SVG and Flash had their good and bad features. It depends on the purpose of the software, which one would be better.