Afbeeldingen heb je in verschillende bestandsformaten. De meest bekende zijn JPG en PNG, alleen deze hebben een nadeel: ze zijn niet goed schaalbaar. Maak je de afbeelding kleiner of groter, dan wordt het beeld vaag. De pixels in de afbeelding vervormen, en dit heeft negatieve gevolgen voor de weergave van je logo of afbeelding. Om die reden is het slimmer om een SVG bestandsformaat afbeelding te gebruiken.
Wat is SVG?
Voor degene die willen leren: SVG staat voor Scalable Vector Graphic. Ze noemen dit ook wel resolutie onafhankelijk. Een goed SVG bestand is op elk formaat scherp, of je het nou in het klein op je website zet of laat drukken op een extreem groot spandoek. De lijnen van je logo blijven altijd scherp. SVG bestanden worden vaak gemaakt in speciale programma’s zoals Adobe Illustrator, omdat daar speciale hulpmiddelen beschikbaar zijn om gemakkelijk lijntekeningen te maken.
SVG werkt alleen goed maar bij afbeeldingen die bestaan uit lijnen. Dit is waarom logo’s en illustraties vaak als SVG worden geplaatst. Het zorgt er voor dat ze goed mee schalen (voor diverse apparaten, en als een bezoeker bijvoorbeeld zijn browser ingezoomd heeft) en dat ze een kleine bestandsgrootte hebben. Voor een webbouwer, is dit dus een ideaal formaat om te gebruiken. Online zijn er tools beschikbaar die een afbeelding om kunnen zetten naar lijnen, maar het resultaat is nooit perfect. Heb je jouw logo laten maken door een ontwerper? Vraag dan altijd om een SVG (of Illustrator) bestand.
WordPress accepteert standaard geen SVG formaat
Dat is dus de reden waarom ik dit bericht plaats. Als je een SVG bestand in de mediabibliotheek wil plaatsen van WordPress krijg je de melding:
Uploaden van bestandsnaam.svg is mislukt.
Dit bestandstype is niet toegestaan in verband met veiligheidsredenen
Je eigen SVG’s uploaden naar je website is volledig veilig. Hier zit geen enkel risico aan vast, waarom ze dit geblokkeerd hebben is omdat het risicovol is om anderen SVG bestanden te laten uploaden naar jouw website. Wanneer je dus alleen beheerders op jouw website toelaat die je vertrouwt, kan er niks gebeuren. Upload dus alleen SVG afbeeldingen, wanneer je ze zelf hebt gemaakt of ze van een vertrouwde bron af komen.
Hoe upload ik een SVG bestand in de mediabibliotheek?
Optie 1: Installeer een plugin
De eerste is optie is ook gelijk de gemakkelijkste. Installeer een plugin genaamd “Safe SVG” op je website, en activeer deze. Het zorgt er namelijk voor dat de blokkade verdwijnt, en dat ze het bestand reinigen voor het op je website wordt geplaatst. En met reinigen wordt bedoeld, dat ze het controleren op mogelijk kwaadaardige code en schoon uploaden naar je website.
De plugin is gratis, en je kunt het op elk moment weer deactiveren en verwijderen. Upload dus de gewenste SVG bestanden naar je website, en haal de plugin daarna eventueel weer weg.
Optie 2: Een aanpassing in je wp-config.php bestand
De tweede optie is wat meer werk, als je weet hoe je FTP verbinding maakt met je website vind je daar een wp-config.php bestand. Je kunt op een bepaalde plek een regel code toevoegen waardoor SVG bestanden ineens wel in de mediabibliotheek geplaatst mogen worden.
In dat bestand zie je een regel staan met de tekst:
/* That’s all, stop editing. Happy blogging. */
Daar boven moet je deze regel invullen:
define(‘ALLOW_UNFILTERED_UPLOADS’, true);
Sla het bestand op en zorg dat het actief komt te staan. Vervolgens kun je het SVG bestand uploaden in de mediabibliotheek, zoals verwacht.
Het SVG bestand werkt niet en ik zie geen afbeelding
Het kan voorkomen dat je alle stappen goed hebt gevolgd en de SVG in de mediabibliotheek staat, maar je geen afbeelding ziet wanneer je het ergens plaatst. Dit probleem komt voor wanneer de website niet weet hoe groot de afbeelding moet worden. Omdat de afbeelding resolutieonafhankelijk is, staat er geen vaste breedte of hoogte ingesteld. Een website heeft dit nodig, om te kunnen bepalen hoe groot de afbeelding moet worden. Heb jij hier last van? Kijk dan of je in het afbeeldingselement van je thema een optie hebt om de breedte in te stellen. Als je dit instelt, zal de afbeelding direct verschijnen.
Het kan zijn dat je thema niet goed is ingericht op het gebruik van SVG afbeeldingen. Als dit zo is, kan het zijn dat je wat CSS code moet toepassen op je website om de afbeelding goed te laten verschijnen.
Heb je vragen over SVG bestanden, of heb je hulp nodig? Je kunt contact opnemen met mij via het contactformulier.
