Vaker en vaker zie ik SVG afbeeldingen verschijnen op websites. De nieuwsgierigheid was gewekt! 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.

1200 breed SVG bestand

1200 breed SVG bestand

1200 breed PNG bestand

1200 breed PNG bestand

1200 breed JPG medium bestand

1200 breed JPG high bestand


OP het oog geen verschil alhoewel je iets “rafeligs” ziet in het JPG medium bestand. Toch zijn er verschillen en dat zijn de bestands grootten. Hoe groter het bestand, hoe langer de laadtijd. Logisch..
Dat is hinderlijk voor de bezoeker maar ook Google bekijkt en beoordeelt laadtijden van pagina’s. Erg interessant dus om alle bestanden zo klein mogelijk te houden. En de verschillen zijn groot zoals je ziet in het tabelletje hieronder. Een JPG High Quality (uit Photoshop) is maar liefst 3,25 maal zo groot als een SVG. Doe er je voordeel mee….

SVG = 8KB
PNG = 17KB
JPG medium = 18KB
JPG high = 26KB