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
