Wat is SVG?
SVG betekent Scalable Vector Graphics. Dit zijn afbeeldingen, opgebouwd met vectoren, die je kan vergroten zonder kwaliteitsverlies of pixelvorming. Dit in tegenstelling tot bijvoorbeeld PNG en JPG afbeeldingen. Als je deze uitvergroot, zal je op den duur een onscherpe afbeelding krijgen waarvan de pixels zichtbaar zijn.
Een SVG bestand wordt vaak gebruikt voor logo’s en iconen, maar kan ook voor andere illustraties worden toegepast. Je maakt SVG bestanden met een lijntekenprogramma als bijvoorbeeld Adobe Illustrator.
Ook vanuit Canva kan je SVG bestanden opslaan. Let hierbij wel op de volgende dingen:
- Teksten geven wel eens een problemen als je het SVG bestand wilt bewerken in bijvoorbeeld Adobe Illustrator.
- Zorg dat je Canva ontwerp enkel lijnwerk bevat, zoals iconen en elementen en geen foto’s. Foto’s zijn namelijk opgebouwd uit pixels. Door deze op te slaan als SVG kan je ze niet oneindig vergroten. Lijnwerk wel.
SVG-bestanden uploaden in Canva
Het voordeel van het uploaden van een SVG bestand, is dat je deze kunt omkleuren in Canva. Het gedraagt zich zoals de pictogrammen die al in Canva zitten. Ideaal om bijvoorbeeld je logo op deze manier in Canva te uploaden. Je kunt dat je logo in Canva eenvoudig omkleuren naar bijvoorbeeld wit, naar gelang het gebruik.
Een SVG bestand dat je wilt uploaden in Canva moet aan de volgende voorwaarden voldoen:
- Het moet opgeslagen worden met SVG profiel SVG 1.1
- Alle lijnen, lijnstukken, paden en tekstkaders moeten gevectoriseerd of “geoutlined” zijn.
- Groepeer elementen die dezelfde kleur hebben.
- Vermijd het gebruik van verlopen.
- Ideale afmeting is een breedte van 150-200 pixels.
- Maak je ontwerp passend op je tekengebied.
- Verwijder alle onnodige lagen, overbodige ankerpunten en verborgen objecten.
SVG-bestanden gebruiken op je WordPress website
Een SVG afbeelding kan je zonder hulpmiddel niet toevoegen aan je WordPress website. Installeer hiervoor de SVG Support plug-in. Na activering van de plugin ga je bij je WordPress Instellingen naar SVG Support.
Zet vervolgens het vinkje aan bij:
- Enable Advanced Mode
- Automatically insert class
En druk op Save Changes. Je kunt nu zonder problemen SVG afbeeldingen op je website gebruiken.