SVG Viewer
Plak of schrijf SVG in 'Invoer'Plak of voer SVG code aan de linkerkant in
Online SVG viewer. Plak SVG-code om gerenderde vectorafbeeldingen direct te bekijken, met ondersteuning voor kopiëren en downloaden van .svg-bestanden. Lokale en veilige verwerking.
Gerelateerde aanbevelingen
Wat is SVG?
SVG (Scalable Vector Graphics) is een op XML gebaseerd afbeeldingsformaat voor het beschrijven van geometrische vormen. In tegenstelling tot JPG en PNG, die bitmaps (pixelmatrices) zijn, gebruikt SVG tags zoals <rect>, <circle> en <path> om wiskundige paden van vormen te beschrijven, waardoor ze op elk formaat scherp blijven zonder pixelvorming.
**Wanneer SVG gebruiken?** Logo's, UI-pictogrammen, stroomdiagrammen, kaartmarkeringen, grafieken, geanimeerde decoraties en herbruikbare illustraties: elk scenario dat helderheid, kleuraanpassing, schaalbaarheid of CSS-besturing vereist, is een natuurlijke keuze voor SVG.
**SVG vs Canvas:** Canvas is een imperatieve teken-API waar de uitvoer pixels wordt; SVG bestaat uit declaratieve DOM-knooppunten waarvan je op elk moment attributen kunt wijzigen, CSS-stijlen kunt aanpassen en gebeurtenissen kunt koppelen. Gebruik SVG voor pictogrammen, UI-elementen en interactieve afbeeldingen; gebruik Canvas voor games, deeltjes en pixel art.
**Veelvoorkomende componenten:** Rootelement <svg>, groepen <g>, paden <path> (meest gebruikt met d-attribuut), verlopen (<linearGradient>/<radialGradient>), filters (<filter>) en animaties (SMIL/CSS/JS).
**Hoe bekijken?** Plak je SVG-broncode in de editor op deze pagina en bekijk de live rendering rechts. De versleepbare gesplitste lay-out helpt je in seconden te controleren of je SVG-code correct is.
Toepassingsgevallen
- Frontend-ontwikkelaars die snel de rendering van SVG-pictogramcode bekijken
- SVG-weergave controleren na het kopiëren uit Figma, Sketch of andere ontwerptools
- Live wijzigingen bekijken tijdens het debuggen van SVG-paden, kleuren of viewBox-attributen
- SVG-code beoordelen en valideren voordat deze in de projectcode wordt geïntegreerd
Hoe te gebruiken
- Plak SVG-broncode in de linker editor, of klik op "Voorbeeld laden" om een demo te zien
- Het rechterpaneel rendert de vectorafbeelding direct: bewerk de code om live updates te zien
- Klik bij tevredenheid op kopiëren om de code te kopiëren, of download als .svg met aangepaste naam
Functies
- Live voorbeeld: Plak of bewerk SVG-code om vectorafbeeldingen direct te renderen, wat je ziet is wat je krijgt
- Gesplitste lay-out: Versleepbare zij-aan-zij panelen op desktop, tabbladwisseling op mobiel
- Export met één klik: Kopieer SVG-code naar klembord of download met aangepaste naam als standaard .svg
- Lokale verwerking: Alle SVG-analyse en -rendering gebeurt in de browser, je code verlaat je apparaat nooit
- Transparante achtergrond: Het dambordpatroon toont duidelijk transparante gebieden en randdetails
- Tekensteller: Real-time tekensteller met geïntegreerd voorbeeld om snel aan de slag te gaan
Veelgestelde vragen
Hoe bekijk ik SVG-code online?
Plak je SVG-broncode in het linkerbewerkingspaneel en het rechterpaneel rendert de vectorafbeelding direct. Je kunt code direct in de editor bewerken met live updates, wat het debuggen van frontend-pictogrammen vergemakkelijkt.
Hoe download en sla ik de bekeken SVG op?
Klik op de downloadknop in de rechterbovenhoek van het voorbeeldvenster. Je kunt de bestandsnaam aanpassen voordat je het opslaat als standaard .svg-bestand. Je kunt ook op de kopieerknop klikken om de SVG-code direct naar het klembord te kopiëren.
Wordt mijn SVG-code naar een server geüpload? Is het veilig?
Nee. Alle SVG-analyse en -rendering gebeurt lokaal in je browser. Je SVG-code wordt nooit naar een server geüpload: het wordt volledig op je apparaat verwerkt en verwijderd wanneer je weggaat.
Ondersteunt het SVG-code gekopieerd uit ontwerpsoftware?
Ja. SVG-code gekopieerd uit Figma, Sketch, Adobe Illustrator of andere ontwerptools kan direct worden geplakt om te bekijken. We raden aan het gerenderde resultaat eerst te controleren voordat je het in je project integreert.
Waarom wordt mijn SVG niet weergegeven? Veelvoorkomende oorzaken?
Veelvoorkomende problemen: ① Ontbrekende naamruimtedeclaratie xmlns="http://www.w3.org/2000/svg"; ② Niet-gesloten tags in de code; ③ Speciale tekens niet correct geëscaped; ④ Syntaxisfouten in de SVG zelf. Controleer deze punten.
Kan ik de naam van het gedownloade SVG-bestand aanpassen?
Ja. Na het klikken op de downloadknop verschijnt er een invoerveld voor de bestandsnaam. Je kunt de naam aanpassen (standaard image.svg), druk vervolgens op Enter of klik op Bevestigen om te downloaden. De tool voegt automatisch de .svg-extensie toe indien ontbrekend.
Woordenlijst
- viewBox
- Het interne SVG-coördinatenstelsel in het formaat "x y width height". Het gebruikelijke "0 0 24 24" betekent 24 eenheden breed en hoog. De werkelijke weergavegrootte van een SVG wordt bepaald door width/height-attributen of externe CSS.
- XML-naamruimte (namespace)
- SVG moet xmlns="http://www.w3.org/2000/svg" declareren zodat browsers het correct herkennen als SVG-document. Ontbrekende naamruimte is de meest voorkomende reden waarom SVG niet wordt weergegeven in HTML.MDN - SVG Namespace
- path d-attribuut
- De set padopdrachten, bestaande uit letters zoals M/L/C/Q/H/V/Z plus coördinaten. M=Move to (Ga naar), L=Line to (Lijn naar), C=Cubic Bézier (Kubische Bézier), Q=Quadratic Bézier (Kwadratische Bézier), Z=Close path (Pad sluiten). Complexe pictogrammen worden vaak uitgedrukt met slechts één path-element en zijn d-attribuut.
- currentColor
- Een CSS-sleutelwoord dat verwijst naar de color-eigenschap van het huidige element. Door fill of stroke in SVG op currentColor in te stellen, kun je pictogramkleuren wijzigen via externe CSS-kleurwijzigingen, een veelgebruikt patroon in designsystemen.
Snelle referentie: veelgebruikte SVG-elementen
| Element | Type | Doel |
|---|---|---|
<svg> | Root | Container voor alle SVG-inhoud, verplicht |
<rect> | Basisvorm | Rechthoeken, afgeronde rechthoeken |
<circle> / <ellipse> | Basisvorm | Cirkels / ellipsen |
<line> / <polyline> | Basisvorm | Lijnen / polylijnen |
<polygon> / <path> | Pad | Veelhoeken / willekeurige krommen (d-attribuut) |
<text> / <tspan> | Tekst | Tekst ingesloten in SVG |
<g> | Groep | Elementen groeperen voor uniforme transformaties |
<defs> / <symbol> | Definitie | Herbruikbare vormen en verlopen |
<linearGradient> / <radialGradient> | Verloop | Lineaire / radiale verloopvullingen |
<use> | Referentie | Verwijzen naar elementen uit defs |
<filter> | Filter | Geavanceerde effecten zoals vervaging, schaduw |
Vergelijking: SVG vs bitmapformaten
| Dimensie | SVG (Vector) | PNG (Bitmap) | JPG (Bitmap) |
|---|---|---|---|
| Samenstelling | XML beschrijft geometrische paden | Pixelmatrix | Pixelmatrix (DCT-compressie) |
| Schaalbaarheid | Blijft scherp op elk formaat | Wordt pixelachtig bij vergroting | Wordt pixelachtig met zichtbare artefacten |
| Bestandsgrootte | Varieert per complexiteit, logo's meestal < 10KB | Gemiddeld (verliesvrij) | Kleiner (verliesgevend) |
| Transparantie | ✅ | ✅ | ❌ |
| Animatie | ✅ SMIL / CSS / JS | ❌ (vereist APNG) | ❌ |
| CSS kleurbesturing | ✅ currentColor / fill-variabelen | ❌ | ❌ |
| Best voor | Pictogrammen, logo's, UI-vectoren | Transparante assets, schermafbeeldingen | Foto's, grote verlopen |
Authoritative References
- ReferenceMDN - SVG Tutorial
- ReferenceMDN - <svg> Element
- ReferenceWikipedia - Scalable Vector Graphics
- ReferenceW3C - SVG Specificatie
- Afbeeldingen comprimeren
- Afbeeldingen converteren
- PNG naar JPG
- HEIC naar JPG
- WebP naar JPG
- JPG naar PNG
- JPG naar WebP
- PNG naar WebP
- WebP naar PNG
- HEIC naar PNG
- HEIC naar WebP
- AVIF naar JPG
- Afbeeldingen bijsnijden
- AVIF naar PNG
- AVIF naar WebP
- GIF naar JPG
- GIF naar PNG
- GIF naar WebP
- SVG naar JPG
- SVG naar PNG
- SVG naar WebP
- TIFF naar JPG
- Afbeeldingsfilters
- TIFF naar PNG
- TIFF naar WebP
- ICO generator
- Afbeelding editor
- QR-code-scanner
- Afbeelding formaat wijzigen
- Afbeelding Roteren en Spiegelen
- Afbeelding Hoeken Afronden
- CSS Sprite Generator
- SVG Viewer
- Afbeelding naar ASCII-kunst
- Afbeelding Opschalen
- Watermerk op afbeeldingen