Wat is SVG? Wanneer kies je SVG of PNG?

Wat is een SVG-bestand?

SVG staat voor Scalable Vector Graphics: schaalbare vectorafbeeldingen. In plaats van alleen een raster met gekleurde pixels op te slaan, kan het formaat vormen, paden, vullingen en tekst beschrijven. Een browser of tekenprogramma gebruikt die instructies om de afbeelding op het gewenste formaat te tekenen. Je hoeft geen code te schrijven om een SVG te maken: een vectorontwerpprogramma kan je werk als SVG exporteren.

Denk aan een rond logo. Een SVG kan de cirkel en de kleur beschrijven; een PNG slaat de pixels op die de cirkel op één bepaald formaat vormen. De SVG kan een grotere cirkel met een gladde rand tekenen. Bij het vergroten van de PNG worden de bestaande pixels over een groter oppervlak verdeeld, waardoor de rand minder scherp kan worden. De SVG-uitleg van MDN beschrijft hoe het formaat werkt.

SVG en PNG: de verschillen in de praktijk

Geen van beide formaten is altijd kleiner. Een gedetailleerde SVG met duizenden paden kan groter zijn dan een geschikte PNG. Vergelijk de werkelijke bestanden en controleer of de bestemming ze accepteert. Overweeg voor foto’s JPG, WebP of AVIF in plaats van SVG als formaat voor fotocompressie te gebruiken.

Wanneer SVG een goede keuze is

Een logo dat in de kop van een website, in een presentatie en op een grote banner wordt gebruikt, heeft baat bij een vectororigineel. SVG is ook geschikt voor pictogrammen en eenvoudige diagrammen die op meerdere groottes moeten werken. Bekijk wel de kleinste versie: een scherpe weergave maakt piepkleine letters niet automatisch leesbaar en voorkomt niet dat dunne lijnen moeilijk te zien zijn.

Een SVG kan een gewone pixelafbeelding bevatten, bijvoorbeeld een PNG of JPG. Die afbeelding behoudt de oorspronkelijke resolutie. Een kleine foto in een SVG opnemen herstelt geen details en maakt er geen vectorvormen van. Ook een .png-bestand hernoemen naar .svg verandert het formaat niet.

Afmetingen, viewBox en lege ruimte begrijpen

De breedte en hoogte geven de afmetingen van de afbeelding aan. De viewBox bepaalt het coördinatengebied waarin de tekening wordt geplaatst. Dit helpt de tekening mee te schalen naar de beschikbare weergaveruimte; het is geen instelling voor de bestandsgrootte. De viewBox-documentatie van MDN legt dit verband uit.

Lijkt je logo klein binnen een groot leeg vlak, controleer dan de grenzen van het tekengebied of de pagina in je ontwerpprogramma. Als je de hele pagina exporteert, kan er ongebruikte ruimte rondom de tekening meekomen. Pas de pagina zo nodig aan de tekening aan, maar houd ruimte over voor omlijningen en schaduwen. Alleen de weergavebreedte vergroten maakt ook die lege ruimte groter.

SVG gebruiken op een website

Een gewoon websitelogo kun je als SVG-afbeeldingsbestand plaatsen. Geef afbeeldingen die informatie overbrengen een beschrijvende alt-tekst en reserveer de juiste breedte en hoogte in de lay-out. Decoratieve afbeeldingen horen een lege alt-tekst te hebben. Bekijk de gids over alt-teksten voor voorbeelden.

Dat een browser SVG kan weergeven, betekent niet dat elk CMS of uploadformulier het accepteert. Controleer de regels van je platform voordat je de definitieve export kiest. Een SVG die als afbeelding wordt gebruikt, werkt ook anders dan SVG-code die rechtstreeks in de pagina is opgenomen: bij gebruik als afbeelding gelden beperkingen voor scripts en het laden van externe bronnen. De MDN-gids over SVG als afbeelding legt die beperkingen uit. Gebruik tekeningen uit betrouwbare bronnen en de publicatiemethode die je platform ondersteunt.

Een SVG voorbereiden om te delen

• Exporteer het bedoelde deel van de tekening, geen onnodig grote pagina.
• Neem gekoppelde afbeeldingen en benodigde stijlen in het bestand op, zodat het niet van aparte bestanden afhankelijk is.
• Moeten letters er op een ander apparaat precies hetzelfde uitzien, zet de tekst dan om naar paden in je ontwerpprogramma. Bewaar een bewerkbaar origineel: tekst die uit paden bestaat, kun je niet meer als gewone tekst bewerken.
• Verwijder ongebruikte objecten en overbodige editorgegevens uit een kopie. Controleer het resultaat voordat je het origineel vervangt.
• Open de geëxporteerde SVG in de bedoelde app of website en controleer randen, tekst, achtergrond en ontbrekende onderdelen.

Tekst omzetten naar paden kan het aantal paden en de bestandsgrootte verhogen. Paden te sterk vereenvoudigen kan de tekening veranderen. Beoordeel optimalisatie door het werkelijke resultaat te vergelijken, in plaats van gegevens ongecontroleerd te verwijderen. Pixilo’s SVG-naar-PNG-tool maakt een pixelafbeelding; deze optimaliseert geen SVG en levert geen kleiner SVG-bestand op.

Wanneer je een PNG-kopie nodig hebt

Maak een PNG als de ontvangende dienst dat vereist, als je een statische kopie wilt die op een schermafbeelding lijkt of als je specifieke pixelafmetingen nodig hebt. Exporteer vanuit de oorspronkelijke SVG op het vereiste formaat. PNG bewaart de vectorpaden en interactieve functies niet, en later vergroten kan de afbeelding wazig maken. Bewaar de SVG voor toekomstige exports.

Met SVG naar PNG kun je de pixelafmetingen kiezen en transparante delen behouden of een effen achtergrond toevoegen. De toolpagina legt de formaatlimieten, lettertypen en niet-ondersteunde inhoud uit. De optie voor een transparante achtergrond behoudt bestaande transparantie; deze verwijdert geen achtergrondvorm die in de SVG is getekend.

Voordat je de afbeelding publiceert of verstuurt

1. Controleer welke formaten de bestemming accepteert.
2. Bewaar SVG als vectorvormen en flexibel schalen nuttig zijn; maak PNG als de bestemming een pixelafbeelding nodig heeft.
3. Controleer de grenzen van de tekening, de lettertypen en de ingesloten afbeeldingen.
4. Bekijk het uiteindelijke bestand op de bedoelde weergavegrootte en op de achtergrond waarop het wordt gebruikt.
5. Vergelijk de bestandsgroottes als laadsnelheid belangrijk is en bewaar je bewerkbare origineel.