SVG: het vectorformaat voor het web

SVG staat voor Scalable Vector Graphics en is een bestandsformaat voor tweedimensionale afbeeldingen op basis van vectoren. In tegenstelling tot pixelafbeeldingen zoals JPG en PNG beschrijft een SVG vormen, lijnen en kleuren met wiskundige formules. Dit maakt SVG ideaal voor logo's, iconen en illustraties die op elke schermgrootte scherp moeten zijn.

Hoe werkt een SVG bestand?

Een SVG bestand is eigenlijk een tekstbestand geschreven in XML-code. Elke vorm, lijn en kleur wordt beschreven met coördinaten en parameters. Als je een SVG opent in een teksteditor, zie je code zoals ''. De browser leest deze code en tekent de afbeelding in real-time. Omdat het wiskundige beschrijvingen zijn en geen vaste pixels, kan de afbeelding naar elk formaat worden geschaald zonder kwaliteitsverlies.

Voordelen van SVG

Onbeperkt schaalbaar

Een SVG bestand blijft bij elke grootte haarscherp. Of het nu een klein favicon is of een beeldvullende achtergrond, de kwaliteit blijft identiek. Dit maakt SVG perfect voor responsive websites die op allerlei apparaten worden bekeken.

Extreem klein bestandsformaat

SVG bestanden zijn doorgaans veel kleiner dan vergelijkbare PNG of JPG bestanden, vooral bij eenvoudige afbeeldingen zoals logo's. Dit zorgt voor snellere laadtijden en betere websiteprestaties.

Aanpasbaar met code

Omdat SVG op XML is gebaseerd, kun je kleuren, afmetingen en animaties aanpassen met CSS en JavaScript. Dit maakt interactieve hover-effecten, animaties en dynamische kleurwijzigingen mogelijk zonder extra afbeeldingen.

SVG vergeleken met rasterformaten

Rasterafbeeldingen (JPG, PNG)

Rasterformaten bestaan uit een vast raster van pixels. Bij vergroting worden de pixels zichtbaar en wordt de afbeelding wazig. Elk formaat vereist een apart bestand. De bestandsgrootte neemt toe naarmate de resolutie hoger wordt.

SVG (vectorformaat)

SVG bestanden zijn resolutie-onafhankelijk en blijven altijd scherp. Eén bestand werkt op alle formaten en apparaten. De bestandsgrootte is klein en constant, ongeacht de weergavegrootte. Bovendien is de inhoud doorzoekbaar voor zoekmachines.

Wanneer gebruik je SVG?

Logo's op websites

SVG is het beste formaat voor logo's op websites. Het is scherp op elk scherm, lichtgewicht en eenvoudig aan te passen. Grote bedrijven als Google en Apple gebruiken SVG voor hun weblogo's.

Iconen en illustraties

Icoonsets en eenvoudige illustraties zijn ideaal als SVG. Ze laden snel, schalen moeiteloos en kunnen met CSS worden gestyled, bijvoorbeeld om van kleur te veranderen bij een hover-actie.

Infographics en diagrammen

Interactieve grafieken, diagrammen en infographics profiteren van SVG doordat elementen met JavaScript kunnen worden geanimeerd en de afbeelding op elk formaat leesbaar blijft.

Animaties

SVG ondersteunt animaties via CSS en JavaScript (SMIL). Hiermee kun je vloeiende animaties maken zoals draaiende logo's, bewegende illustraties of interactieve laadschermen, zonder zware videobestanden.

Veelgestelde vragen over SVG

Is SVG geschikt voor foto's?

Nee, SVG is niet geschikt voor foto's of complexe afbeeldingen met kleurverlopen en texturen. Hiervoor zijn JPG en PNG betere opties. SVG is ideaal voor logo's, iconen en illustraties met vlakke kleuren en scherpe lijnen.

Wordt SVG door alle browsers ondersteund?

Ja, alle moderne browsers ondersteunen SVG volledig, inclusief Chrome, Firefox, Safari, Edge en mobiele browsers. Alleen Internet Explorer 8 en ouder ondersteunen geen SVG, maar deze browsers worden nauwelijks meer gebruikt.

Hoe maak ik een SVG bestand van mijn logo?

Je kunt een SVG maken in vectorprogramma's zoals Adobe Illustrator of het gratis Inkscape. Heb je alleen een pixelafbeelding? Dan moet het logo eerst worden gevectoriseerd. Logo in Vector doet dit professioneel en levert onder andere een SVG bestand.

Is SVG veilig om te gebruiken op mijn website?

SVG is veilig mits je bestanden van betrouwbare bronnen gebruikt. Omdat SVG JavaScript kan bevatten, is het belangrijk om SVG bestanden van onbekende bronnen te sanitizen. Als je SVG's zelf maakt of van een betrouwbare partij als Logo in Vector ontvangt, is er geen risico.

SVG: onmisbaar voor moderne websites

SVG is het standaardformaat voor logo's en iconen op het web. Het combineert schaalbaarheid, snelheid en flexibiliteit op een manier die geen enkel rasterformaat kan evenaren. Heb je een SVG nodig van je logo? Logo in Vector levert een geoptimaliseerd SVG bestand dat direct klaar is voor gebruik op je website.