svg-jpg-png-vergeleken vergelijking bestandsgrootte

Vaker en vaker zie je SVG afbeeldingen verschijnen op websites. Maar wat zijn de voor- en nadelen?

Eerst een korte uitleg, heeeel kort door de bocht wat het verschil is tussen een bitmap en een vector afbeelding.
Bitmap wil zeggen een kudde pixels, op volgorde (met kleuren informatie) zonder enige samenhang.
Vector is eigenlijk een soort beschrijving. Vanaf pixel A, trek een lijn van 12 pixels omhoog, 4 naar rechts. Het grote voordeel is een veel kleiner bestand en het is super schaalbaar. Ik bedoel hier mee dat je een SVG oneindig kunt uitrekken of laten krimpen zonder verlies van kwaliteit.

Het grootste nadeel is dat WordPress het niet toe laat om SVG bestanden te uploaden via de gangbare mediamanager. Omdat IN een SVG bestand ook code opgenomen kan worden vindt WordPress dit een mogelijke verslechtering van de veiligheid en weigert.
Uiteraard is het erg vervelend als WordPress denkt slimmer te zijn dan de gebruiker dus plaats je gewoon de SVG in de Uploads folder van de site. Met een FTP programma. Daarna kun je de SVG gewoon laten zien door de link naar uploads/hetbestand.svg te gebruiken. En dat zie je hier onder. Wel outline maar vergelijkbaar met het PNG bestand daar onder.

De 2e methode is een plugin te gebruiken. Bijvoorbeeld “Safe SVG“. Deze is gratis.
Ook in de plugin “Divi Switch” van Divi Space zit een functie die het uploaden van SVG’s naar WordPress mogelijk maakt. Naast een heleboel andere nuttige dingen trouwens. Ze hebben er een heel duidelijk filmpje over gemaakt wat de plugin allemaal kan. Details over de plugin vind je hier. Zeer betaalbaar trouwens: 29,- dollar. (is 25,49 euro)

De 3e, mooiste methode is zelf de code te plaatsen die WordPress vertelt dat het wel mag. Bijvoorbeeld in het functions.php bestand van een Child-Theme. Webwerkplaats plaatst altijd Child-Themes en uiteraard zit deze code er dan ook in. Je ziet… we gaan ook hier weer iets verder dan de doorsnee webbouwer.