Turun kaupungin logot, svg versiot - 2015

Tavoite

Tavoite on saada Turun kaupungin logoista SVG-versiot kuvapankkiin, jotta ne olisivat kaikkien käytettävissä helposti.

Kuvien SVG-versiot - esikatselu

Taustaväriksi on valittu vihreä, jotta läpinäkyvyys olisi havaittavissa kaikilla kuvilla. Testaa kuvien skaalausta painamalla selaimessa ctrl+"+" tai ctrl+"-" muuttaaksesi sisällön kokoa. Alkuperäiseen kokoon pääset ctrl+"0" (control ja nolla) näppäinyhdistelmällä.

Syy SVG-versioiden tarpeeseen

Palvelun ongelma on, että siellä on useimmista kuvista versioita, joita on hankala hyödyntää.

Web-sivuille logoja voidaan lisätä PNG- (rasterikuva) tai SVG- (vertorikuva) muodossa. PNG-kuva on aina vain tietyssä vakioidussa koossa eikä sen kokoa ole mahdollista skaalata ilman kuvan laadun heikkenemistä. Tämän takia kaikista käytettävistä kuvista olisi tarpeen olla SVG-versiot.

SVG-kuvia on toistaiseksi käytetty kovin vähän Turun kaupungin sivuilla, koska vanhat Internet Explorer selaimet (versio 8 ja vanhemmat) eivät toimineet SVG-kuvien kanssa kunnolla.

Vaikka selaimet tukevat myös JPG-kuvia, niin tätä muotoa ei pitäisi käyttää tietokonegeneroiduille kuville kuten logoille. JPG-pakkaus hävittää kuvasta tietoa ja se näkyy ikävästi logoissa. Lisäksi JPG-kuvissa ei ole mahdollista käyttää läpinäkyvyyttä. Näistä syistä palvelussa olevat JPG-versiot eivät sovellu kennellekään weppijulkaisuun.

Miten SVG-versiot on tehty?

Kuvapalvelusta on ensin haettu kaikki .ai-päätteiset originaalitiedostot. Nämä ovat ainoat vektorigrafiikkaversiot, jotka ovat käytettävissä.

Tämän jälkeen kuvista on tehty SVG-versiot palvelun https://cloudconvert.com/ai-to-svg avulla. Huom! Palvelu ei toimi IE9:llä. Firefox toimii.

Lopuksi SVG-tiedostot on ajettu ohjelman SVG Cleaner läpi. Ainoa muutos oletusasetuksiin oli: taikasauva ("open the wizard") > "attributes" > poista rasti "Remove SVG version" > OK

Ongelmakuvat

Lähes kaikki *_300ppi_white.ai ja *_300ppi_viiva_white.ai tiedostot ovat virheellisiä. Taustan muuttaminen läpinäkyväksi on jäänyt tekemättä. Tämän takia näistä tehtävät svg-kuvat ovat käytännössä hyödyttömiä. Yllä olevassa esikatselussa on lisätty teksti "ei taustan läpinäkyvyyttä!!!" ongelmien kohdalle.