SVG is ok! Wat oud was, wordt vanzelf weer nieuw…

Het is mooi om te zien hoe in het vak waarin ik zit dingen van vroeger weer terugkomen. Ik had het al dat de eerste stapje van html erg veel leken op het zetten van teksten op de oude zetmachines van de grafische school. Als je een lettertype vetgedrukt wilde in je tekststrookje (dat je daarna in een opmaak moest plakken) dan zette je er een code voor en achter. De tekst ertussen in werd dan geprint in het door jouw opgegeven lettertype, formaat en variant. HTML werkte ongeveer volgens hetzelfde principe.

EPS wie?
Mijn eerste stappen op de Apple waren met Illustrator (versie 3.0!) en daarin kon je vector illustraties maken. Zogeheten EPS files (Encapsulated Post Script) oftewel een bestandje dat eigenlijk niet meer was dan een tekstbestand waarin met x en y coördinaten de punten, lijnen en bochten werden gedefinieerd. Het mooie van EPS was natuurlijk dat je je letters of logo oneindig kon uitvergroten zonder kwaliteitsverlies. Het beeld werd niet uit pixels opgebouwd. Dus geen vergrote en lelijke plaatjes meer. De eerste Apple was eigenlijk niet meer dan een demonstratiecomputer voor deze taal.

Doordat de grens tussen off- en online steeds kleiner wordt kunnen PC’s net zo makkelijk mee in deze grafische wereld als de Apple computers. Alhoewel nog steeds een grote tweedeling bestaat tussen Apple hippies en Windows lovers. Zet deze niet naast elkaar op een feestje!

Retina ja of Retina nee
Maar goed, de grafische kant van het webspectrum wordt gedomineerd door JPG’s (gecomprimeerde kleurbestanden) en PNG’s (GIF is alweer erg old skool inmiddels). Lees hier meer over in mijn ander blog. We weten dat ook de website-markt aardig aan het verschuiven is naar tablet en mobiel en daar hebben we inmiddels te maken met een nieuw fenomeen. Retina en HD resolutie schermen! Veel tablets en smartphones hebben zo’n hoge resolutie dat de huidige images door het device vergoot moeten worden omdat ze anders te klein getoond worden. Hierdoor krijgen we het aloude probleem dat als je een plaatje vergroot dat opgebouwd is uit pixels (puntjes) dan krijg je grotere pixels en wordt het beeld onscherp. Beetje jammer als je een duur apparaat met HD scherm hebt.

Nu kunnen we vrolijk alle images twee keer zo groot maken en via CSS regelen dat ze op de juiste grootte per device getoond worden, maar dat is natuurlijk raar als we juist onze sites zo snel mogelijk willen houden voor mobiele devices en trage netwerken. De afbeeldingen twee keer zo groot en dus twee keer zo zwaar maken klinkt niet echt als een volwaardige oplossing.

De oplossing is ar al heel lang
Dus we zien dat we hier moeten teruggrijpen op vector bestanden, die voor het web SVG’s heten. Als je een SVG opent in bijvoorbeeld notepad (nerd-alert!) zie je dus een bulk aan code waarin het pad gedefinieerd is in code. Een EPS is dus relatief eenvoudig om te zetten naar een SVG. Met deze SVG’s blijven je iconen, logo’s en 2d illustraties lekker scherp en zelfs als je inzoomt met je vingers op je tablet blijft het scherp. Zeker met de designtrend van het flat design (2d en lekker strak) van de laatste tijd kunnen is dit een mooie en snelle oplossing waar wij weer veel ingewikkelde truukjes mee uit kunnen halen. Denk aan animaties of aangepaste kleurtjes per hoofdstuk of subsite.

      

Mocht je op een mobiel aparaat zitten of tablet. Zoom deze images maar in en zie het verschil!

Voor foto’s blijft het nog steeds lastig om hier een goed alternatief voor te vinden en zullen we slim om moeten gaan met compressie en het serveren van plaatjes in de juiste resolutie op het juiste medium. Natuurlijk zijn hier ook slimme oplossingen voor. Maar dat bewaren voor een latere blog.