Scalable Vector Graphics (SVG)

Nick Lagendijk

UX Specialist

14/7/2015

In de tijd van verschillende apparaten met verschillende resoluties zoals retina, 4k en zelfs 8k kun je stellen dat het qua bandbreedteverbruik niet ideaal is vol in te zetten op afbeeldingen en video's. Is SVG de oplossing?

Voordelen

Zijn er voordelen? Uiteraard!

  • Haarscherp op retina schermen (en groter)
  • Schalen zonder scherpte te verliezen (uitgezonderd bij hele kleine afmetingen)
  • Lage bestandsgrootte
  • Mogelijkheden zoals interactiviteit en filters

Verschillende manieren om SVG in te laden

Met de voordelen die SVG met zich meebrengt kun je afvragen hoe je SVG moet gebruiken en inladen. Zie hier, er zijn namelijk verschillende manieren om SVG in je website te laden:

SVG als <img> element

Indien je SVG opslaat als een bestand kun je het gebruiken dmv <img>

<img src="afbeelding.svg" alt="SVG afbeelding">


SVG als background-image

Op eenzelfde manier als <img> element kun je een SVG bestand ook als background-image gebruiken

Voorbeeld HTML

<a href="/" class="logo">SVG afbeelding</a>


Voorbeeld bijbehorende CSS


a.logo {

background: url(afbeelding.svg);

background-size: 150px 150px;

display: block;

text-indent: -9999px;

height: 150px;

width: 150px;

}

Inline SVG

Je kunt bij het opslaan van een svg image in illustrator ook kiezen om het op te slaan als SVG code. Deze kun je dan vervolgens "Inline" gebruiken.


<body>

<!-- plaats hier de SVG code -->

</body>

Optimaliseren

Ondanks dat SVG van zichzelf in verhouding een kleine bestandsgrootte heeft, is het vanuit Adobe Illustrator nog niet erg geoptimaliseerd. Het kan altijd kleiner! Van Peter Collingridge online SVG optimiser tool , of de video  waarin Kyle Foster nog een stukje verder gaat met SVG optimalisatie tot aan tools en plugins zoals Node JS tool  en SVGO's Grunt plugin .

Browser support

In principe wordt inline SVG door alle recente browsers ondersteund in html5. Het wordt alleen niet ondersteund in IE8 / android 2.3 en lager. Zie ook caniuse.com

SVG in de toekomst (SVG2)

Er wordt op dit moment nog steeds gewerkt aan de opvolger van SVG (genaamd SVG2) welke onder andere de volgende zaken zal ondersteunen:

  • Complexe typografische eigenschappen
  • Connectiepunten tussen vormen die meebewegen bij animaties
  • Tekst over meerdere regels die de contouren van vormen volgen
  • Embedded media
  • Betere controle vanuit CSS met behulp van bijvoorbeeld media queries

De W3C's SVG Working Group is op dit moment nog steeds bezig met de specificatie dus wanneer deze officieel in release gaat blijft de vraag.

Voorbeelden

De mogelijkheden met SVG zijn ongekend! Creative Bloq heeft er een SVG top 20  aan gewijd.

Conclusie

Gezien de mogelijkheden van SVG en uitbreiding van mogelijkheden in de SVG2 specificatie zal SVG steeds meer zijn stempel gaan drukken op het kleurenpallet van het huidige internet. Echter niet als de vervanger één van de kleuren die wij nu kennen maar als extra kleur om mee te mengen afhankelijk van het type project!

Bronnen
- Using SVG  door Chris Coyier
- The Once and Future SVG  door Amelia Bellamy-Royds
- Useful SVGO[ptimization] Tools  door Sara Soueidan
- Scalable Vector Graphics (SVG)2  op W3C
- 20 examples of SVG that will make your jaw drop op Creative Bloq

Blog Categorieën

FRMWRK Podcast 🎙

In de podcast Op Weg Naar 20 Miljoen bespreken we elke week manieren om je webshop te groeien! Luister je mee?

Luister op:

Podcast
Ondernemen
HRMWRK
Webshop Ontwikkeling
Online Marketing
ROI Strategie