Bijgewerkt: 15 maart 2023
SVG is de afkorting van Scalable Vector Graphics. Dit vectorbestandstype is zeer geschikt voor gebruik op websites. Het is makkelijk schaalbaar zonder verlies van kwaliteit. Een SVG-bestand maken is vrij makkelijk, je hebt hier alleen maar het juiste programma voor nodig. Ook de bewerking vraagt geen technische kennis.
Adobe Photoshop Elements 2022
De voordelen van SVG bestanden
Met een SVG bestand ga je voor een pasklare oplossing voor je website. Het bestaat niet uit pixels, dit in tegenstelling tot JPG bestanden. Een vectorbestand (SVG) is opgebouwd op basis van punten en lijnen die op een raster staan. Feitelijk worden gebruik gemaakt van een wiskundige formule.
Het voordeel hiervan is dat je het formaat aanpast zonder dat je op kwaliteit inlevert. Vergroten of verkleinen, de afbeelding of de grafiek blijft er perfect uitzien. Daarom is een SVG ideaal voor het gebruik op websites, het weergeven van grafieken of voor logo’s.
Tekst in een SVG-bestand wordt niet als afbeelding maar als tekst gezien. Hierdoor is het voor zoekmachines mogelijk om tekst te lezen, en kunnen dit soort afbeeldingen ook hoger in de zoekresultaten scoren.
SVG ondersteunt animatie, waardoor het zeker interessant is voor websites en webshops. Daar komt nog bij dat dit soort bestanden kleiner zijn waardoor de webpagina sneller geladen is. Het is dan ook niet vreemd dat vooral webmasters dol zijn op SVG-bestanden.
Informatie over de nadelen
Wanneer je met een bepaald type bestand werkt heeft dit niet alleen voordelen maar ook nadelen. Wil je digitale foto’s van hoge kwaliteit tonen dan zijn SVG-bestanden niet de beste keuze.
Is het de bedoeling dat het bestand wordt weergegeven via een oudere browser? Helaas ondersteunen zeer oude browsers geen SVG bestanden. Voor dit type bestanden is Internet Explorer 8 of hoger vereist.
SVG-bestand maken: een handleiding
Iedereen kan een SVG bestand maken. Dit doe je het beste via Adobe Photoshop, maar het kan ook via Adobe Illustrator of een andere editor voor vectorafbeeldingen.
1.Afbeelding maken
Maak eerst een afbeelding in Photoshop of een ander fotobewerkingsprogramma. Open deze afbeelding in Photoshop.
2. Exporteren als
Klik bovenaan op Bestand en kies voor Exporteren. Klik vervolgens op Exporteren als.
3. SVG selecteren
Wanneer je kiest voor ‘Exporteren als’ dan verschijnt er een extra venster. Kies in het keuzemenu voor de indeling SVG.
4. SVG-bestand aanmaken
Als laatste selecteer je de optie ‘Alles exporteren’. Sla vervolgens het bestand op je computer op.
Bewegende elementen op je website
Een beeld zegt meer dan 1000 woorden. Soms is het beter om iets middels bewegende beelden uit te leggen. SVG ondersteunt bewegende elementen. Een SVG animatie beschikt dus over bewegende en eenvoudige elementen. Het is zelfs mogelijk om voor illustraties te gaan. Dit geeft je website meer dimensie.
Het bewerken van het bestand
Wil je een SVG-de bewerken? Ook dit doe je via Photoshop, Illustrator of een ander juist programma. Het bewerken gaat op dezelfde manier als een SVG-bestand aanmaken. Het enige verschil is dat je dit keer het SVG bestand opent, via het programma bewerkt en op dezelfde wijze opslaat. Zorg dat de bestandsextensie hetzelfde is, kies dus geen andere indeling.
Onze tip: alle bewerkingssoftware inclusief prijslijst
Een SVG bestand openen
Met de meeste browsers kun je dit bestand te openen. Dit kan bijvoorbeeld via internet Explorer, Google Chrome, Edge of safari. En zelfs via Firefox. Alleen via oudere browsers is het niet mogelijk om het bestand te bekijken. Wil je een SVG-bestand openen? Dat werkt als volgt:
- Open de browser op de computer
- Klik op het bestand
- Klik op Openen
- Kies het juiste bestand
Het bestand opent zich nu in een nieuw venster. Dit is afhankelijk van je instellingen, want het kan ook dat je het bestand in hetzelfde venster bekijkt. Hoe dan ook, het SVG is in ieder geval in de browser zichtbaar. Wanneer je merkt dat je het bestand niet kunt bekijken of openen heeft dit vaak met een te oude browser te maken. Het is dan aan te raden om voor een nieuwere variant te kiezen.
Verschil tussen SVG en PNG-bestand
Naast SVG bestanden heb je nog veel andere type bestanden. Het is niet voor iedereen duidelijk wat het verschil is tussen SVG en PNG. Een SVG bevat geen pixels, is makkelijk schaalbaar en zal niet op kwaliteit of resolutie inleveren. Bovendien ondersteunt SVG animaties.
Een PNG bestand kun je ook groter of kleiner maken. Omdat dit bestand uit pixels bestaat zal er verlies van kwaliteit optreden. Vaak merk je dit doordat de afbeelding onscherp wordt. PNG ondersteunt helaas geen animaties. Het ondersteunt wel 16 miljoen kleuren waardoor het van hoge kwaliteit is. Een PNG-bestand is de opvolger van het bekende GIFje, en alle webbrowsers ondersteunen dit. Ook de verouderde browsers.
Een PNG- bestand maken en bewerken kan met verschillende programma’s waaronder Photoshop of Microsoft Office Picture. Daarnaast zijn er veel andere (gratis) tools om een PNG bestand te maken of te bewerken.
BesteTop5.nl test en beoordeelt producten, diensten en bedrijven. Jouw product/dienst of bedrijf laten beoordelen, of onder de aandacht brengen bij een groot publiek? Neem voor de mogelijkheden contact op.