SVG op 6 manieren

SVG staat voor Scalable Vector Graphics. SVG is een afbeelding (Graphic), net als JPG en PNG. Met dat verschil dat een SVG scherp blijft, als de afbeelding groter wordt getoond dan de oorspronkelijke afmeting (Scalable Vector). SVG is daarom ook erg geschikt voor retina devices.

Simpele vormen zijn in SVG formaat meestal kleiner in bestandsgrootte dan JPG of PNG, waardoor het zeer geschikt is voor logo’s en icons.

Omdat SVG met CSS kan worden opgemaakt en met SVG animation of met Javascript kan worden geanimeerd, heeft het de voorkeur boven een icon-font, of jpg-, png- of gif-formaat spreadsheet.

Er zijn veel manieren om SVG in een website te gebruiken. Hierna volgen 6 voorbeelden. Zelf gebruik ik meerdere methoden in een project, omdat de ene methode in bepaalde situaties efficiënter is dan een andere methode.

1. SVG als image source

De meest simpele methode is als image source attribuut. Nadeel is dat op deze manier de afbeelding niet met CSS opgemaakt kan worden, noch met Javascript kan worden geanimeerd. Een voordeel is dat het svg-bestand kan worden gecachet, waardoor herhaaldelijk gebruik geen probleem is.

2. SVG als background image in CSS

Als het gebruik van SVG geen semantische waarde heeft, kan dat de HTML vervuilen. Een oplossing is om het bestand met CSS te tonen.

In het volgende codevoorbeeld kan een title worden voorzien van een class, ‘with-icon’, waardoor voor de titel een icon wordt getoond.

Ook deze implementatie heeft als nadeel dat het niet met CSS kan worden opgemaakt en niet met Javascript kan worden geanimeerd. Het bestand kan wel worden gecachet.

3. Inline in HTML

SVG kan ook inline in de HTML worden gebruikt. Voordeel hierbij is, dat de afbeelding interactief kan worden geanimeerd en opgemaakt kan worden met CSS. Nadeel is dat de afbeelding niet vanuit de cache kan worden gelezen, wat consequenties heeft als er op een pagina veel of zwaardere SVG elementen inline worden gebruikt.

4. SVG spreadsheet

Als een icoon of andere vorm, zoals een gradient of logo, veelvuldig wordt gebruikt, is het efficient om een spreadsheet te gebruiken. De spreadsheet bestaat uit een container element, met daarin een node. De node bevat elementen met id attributen. Deze id’s kunnen worden gebruikt door een ander element met een node, d.m.v. het xlink:href attribuut.

Best practice is om de svg-definities (de spreadsheet) aan het begin van de body te plaatsen. De vector moet namelijk gedefinieerd zijn, voordat er naar wordt gerefereerd.

Een detail is het display=”none” attribuut op het SVG element met de definities. Deze zorgt ervoor dat de vectors in de spreadsheet niet worden getoond. De SVG container met het element wordt wel getoond.

Op deze manier wordt het cache probleem van inline SVG in HTML deels opgelost en kan de afbeelding toch opgemaakt worden met CSS.

5. Inline in CSS

SVG kan ook inline worden gebruikt in CSS, in de vorm van url-encoded data. Nadelen zijn dat deze vorm slecht onderhoudbaar is, niet kan worden gecachet, niet kan worden geanimeerd met Javascript en geen spreadsheet voordelen heeft. Voordeel is dat er geen HTML vervuiling plaatsvindt.

6. Inline in CSS met Sass

Om inline gebruik van SVG in CSS onderhoudbaar te maken, kan met Sass een niet url-encoded SVG string als variabele worden gedefinieerd. De variabele kan door een url-encode functie worden gehaald. Na Sass compilatie is de background-image dan wel url-encoded. Nadeel is nog steeds dat bij herhalend gebruik, de gehele SVG meerdere malen in de gecompileerde CSS staat. Toch is het voordeel van de onderhoudbaarheid een overweging van deze methode waard.

Tweet about this on TwitterShare on LinkedIn

Reacties

Het e-mailadres wordt niet gepubliceerd.

*