SVG-bestanden uploaden in WordPress

Wil je een SVG-bestand uploaden in de mediabibliotheek van je WordPress-site? Standaard laat WordPress veel verschillende bestanden uploaden, zoals afbeeldingen, audio en zelfs video. Helaas is het uploaden van een SVG-bestand niet standaard toegestaan.

Gelukkig zijn er workarounds om tóch SVG-bestanden te kunnen uploaden naar je WordPress-site. In dit artikel leg ik uit wat SVG is, waarom je het zou willen gebruiken én hoe je dit kan doen in WordPress.

Wat is SVG?

De afkorting SVG staat voor Scalable Vector Graphics. Waar een normale afbeelding (bijvoorbeeld JPG of PNG) gebruikmaakt van pixels, gebruikt een SVG-bestand vector graphics met behulp van XML markup language.

Het grote voordeel van vector graphics (en dus van SVG) is dat je dit soort afbeeldingen eindeloos kan inzoomen zonder dat je aan kwaliteit inlevert. Dit is perfect voor grafische elementen op je website, zoals bijvoorbeeld logo’s of andere afbeeldingen met graphics en tekst.

Je weet met een SVG ook zeker dat je logo er op een smartphone met retina-scherm scherp uit zal zien. Oók als Apple of Google morgen een nieuwe telefoon lanceert met een nóg hogere pixeldichtheid.

Een laatste voordeel dat zeker benoemd moet worden is dat SVG-bestanden een stuk kleiner zijn dan bijvoorbeeld PNG-bestanden.

SVG-afbeeldingen maken

Een SVG maak je met een software-programma dat vector graphics ondersteunt. De meest bekende is waarschijnlijk Adobe Illustrator, maar dit is zeker niet de enige! Als je in Illustrator een vector-afbeelding hebt gemaakt, kun je via File > Export > Export As je afbeelding opslaan als SVG.

Je kunt óók SVG-afbeeldingen maken met animaties. Hiervoor zijn verschillende handige tools zoals SVGator.

Waarom je geen SVG-bestanden kunt uploaden in WordPress

WordPress houdt SVG-bestanden standaard tegen vanwege de potentiële beveiligingsproblemen die met SVG gepaard gaan. Omdat SVG-bestanden gebaseerd zijn op XML, zijn deze kwetsbaar voor zogeheten XXE-aanvallen (External Entity-attacks).

Oplossingen

Om op een veilige manier gebruik te maken van SVG-bestanden, moeten deze “sanitized” worden. Dat wil zeggen dat het bestand wordt gestript van eventuele code die makkelijk te manipuleren is. Dit kun je natuurlijk zelf doen, maar je kan ook een plugin installeren zoals Safe SVG van 10up.

Safe SVG-plugin

Deze plugin doet voornamelijk twee dingen:

• SVG-uploads toestaan: De plugin zorgt ervoor dat je SVG-bestanden kunt uploaden in WordPress, ondanks dat dit standaard niet mogelijk is.
• Sanitizen van SVG’s: De Safe SVG-plugin zorgt er óók voor dat de SVG-bestanden die je uploadt, worden ge-sanitized.

Je kunt de Safe SVG-plugin gratis downloaden op WordPress.org of direct installeren vanuit je WordPress admin-omgeving.

Nadat je de plugin geactiveerd hebt, kun je direct beginnen met het uploaden van SVG-bestanden naar je website. Vervolgens kun je deze gebruiken in berichten, pagina’s of als logo. Om een SVG in te stellen als logo moet je vaak met behulp van je Theme Options of Customizer te werk gaan. Of dit mogelijk is hangt sterk af van welk theme je gebruikt.

Let op: Soms werkt het niet direct als je een SVG-afbeelding gebruikt, bijvoorbeeld als je dit instelt als logo. Dat komt doordat een SVG als zijnde een vector géén standaard afmetingen heeft. Je kunt een vector namelijk eindeloos uitvergroten. Mocht het niet werken, probeer dan via de CSS-editor een vaste breedte aan je logo of afbeelding mee te geven. Heb je hier hulp bij nodig? Neem dan contact met me op.

Zelf doen

Je kunt óók zonder plugin te werk gaan. Je kan bijvoorbeeld zelf PHP-code toevoegen aan een site-specifieke plugin of aan het functions.php-bestand van je theme. Meer hierover lees je in deze blog van WP Engine. Deze optie klinkt misschien aantrekkelijk, maar je dient nog steeds te zorgen dat de SVG-bestanden die je uploadt ook veilig zijn. Het is daarom gemakkelijker en aan te raden – zeker als je niet technisch bent – om gebruik te maken van de plugin Safe SVG.

Conclusie

SVG-afbeeldingen hebben verschillende voordelen. Als je ze op de juiste manier inzet, kun je aanzienlijk besparen op de laadtijd van je website. Daarnaast kun je SVG-bestanden eindeloos uitvergroten zonder dat ze aan scherpte verliezen, en zelfs voorzien van animaties.

Een standaard installatie van WordPress staat het uploaden van SVG-afbeeldingen niet toe. Dit heeft te maken met bepaalde veiligheidsrisico’s die gepaard gaan met XML, de opmaak-taal waarop SVG-bestanden gebaseerd zijn. Gelukkig zijn er handige oplossingen zoals de Safe SVG-plugin of zelf code toevoegen. Voor de meeste gebruikers is de plugin-optie de betere optie, omdat de plugin er ook voor zorgt dat je SVG’s goed beschermd worden tegen de security-risico’s.

Het helpt natuurlijk ook om een goede hostingpartij te nemen die je beschermt tegen die risico’s. Denk hierbij aan SiteGround.