SVG → </>
SVG-viewer en code-editor
Open een SVG-bestand of plak de code om te zien hoe hij wordt weergegeven, het formaat te controleren en hem met live voorbeeld te bewerken. Alles blijft in je browser.
Werkt in je browser · bestanden blijven op je apparaat
Zo bekijk je een SVG in de SVG-viewer
- Open een bestand of plak code. Gebruik Bestand openen, sleep een SVG op het voorbeeld of plak de code in de editor.
- Controleer het voorbeeld. Wissel tussen transparante, lichte en donkere achtergrond om randen en witte vormen te zien.
- Bewerk de code. Het voorbeeld wordt bijgewerkt terwijl je typt. Code opmaken zet de inspringing recht.
- Kopieer of download. Sla de bewerkte SVG op of kopieer de code.
SVG-viewer met elke achtergrond
Veel SVG-iconen zijn wit of hebben transparante delen, en op een witte pagina verdwijnen ze. Met de achtergrondschakelaar zie je de afbeelding op een schaakbordpatroon, op wit en op een donker vlak. Zo vind je een wit logo, een ontbrekende vulling of een rand die uitloopt.
Onder het voorbeeld zie je de opgegeven width en height, de viewBox, het aantal elementen en de bestandsgrootte. Die waarden verklaren de meeste problemen met afmetingen: een SVG zonder breedte en hoogte neemt het formaat van zijn container aan, en een verkeerde viewBox snijdt de tekening bij of verkleint hem.
SVG-viewer online met code-editor
De editor kleurt de XML, klapt lange groepen in en toont regelnummers. Zit er een fout in de code, zoals een tag die niet is gesloten, dan toont de viewer de foutmelding van de parser in plaats van een lege afbeelding, zodat je weet welke regel je moet herstellen.
Het voorbeeld wordt als afbeelding weergegeven. Scripts in een SVG worden niet uitgevoerd, dus je kunt veilig bestanden openen die je van iemand anders hebt gekregen.
SVG-bestand bewerken voor snelle aanpassingen
De meeste aanpassingen kosten een paar seconden: een fill-kleur wijzigen, een vaste width en height weghalen om het icoon responsive te maken, een verborgen laag verwijderen of een <title> toevoegen voor toegankelijkheid. Voor grondiger opschonen haal je het bestand door de SVG-optimizer.