SVG-vectorafbeelding (.svg)
W3C StandaardScalable Vector Graphics (SVG) is een op XML gebaseerd vectorafbeeldingsformaat voor tweedimensionale afbeeldingen met ondersteuning voor interactiviteit, CSS-styling en animatie.
SVG naar PNG converteren
Gratis SVG-naar-PNG-converter in uw browser. Converteer bestanden direct op uw apparaat.
SVG online comprimeren
Privé - bestanden verlaten uw apparaat niet
Inspecteren en metadata
Besturingssystemen en bestandsanalysators herkennen SVG-bestanden aan de hand van de eerste binaire bytesequentie:
Bestandshandtekening op byteniveau (magic bytes)
Besturingssystemen en bestandsanalysators herkennen SVG-bestanden aan de hand van de eerste binaire bytesequentie:
HEX-HANDTEKENING (OFFSET 0):
3C 73 76 67ASCII-WEERGAVE: <svg
Standaardisatie: W3C Recommendation (SVG 1.1 / SVG 2)
Technische specificaties
| Containerarchitectuur | Op XML gebaseerd tekstmarkupdocument dat 2D-vectorgeometrie definieert |
| Compressie | Gzip- / Brotli-tekstcompressie (SVGZ gebruikt gzip-compressie) |
| Bytevolgorde (endianness) | Niet van toepassing (op tekst gebaseerde UTF-8- of UTF-16-tekenstroom) |
| Kleurruimten | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Kanalen en structuur | Vectorvormen met onbeperkte resolutie, Béziercurven, typografie en opaciteitsmaskers |
| Maximale afmetingen | Resolutieonafhankelijk (schaalt zonder pixelvorming naar elk weergavegebied) |
| Transparantie | Volledige variabele alfatransparantie en CSS-overvloeimodi |
| Streaming en progressief | Progressieve tekststroomparsing ondersteund door de XML-parser van de browser |
Technische vergelijkingsmatrix: SVG versus concurrenten
| Technisch kenmerk | SVG (Huidig) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Rendermodel | Retained-mode vectordocumentobjectmodel (DOM) | Immediate-mode bitmapcanvas | Retained-mode-container met vaste pagina's | Raster van pixels |
| Opmaak en CSS | Volledig op te maken met CSS-klassen en -variabelen | Vereist dat het canvas opnieuw wordt getekend met de JavaScript-API | Geen dynamische CSS-opmaak | Vaste rasterpixels |
| Oneindige schaalbaarheid | Ja (wiskundige vectorcurven) | Vereist handmatige resolutieschaling | Ja (vectorelementen) | Nee (pixelvorming bij vergroting) |
| Interactiviteit | Ingebouwde DOM-gebeurtenissen (hover, klikken, animaties) | Vereist handmatige berekeningen voor hitdetectie | Statisch document | Vereist een image map of canvas |
Veelvoorkomende beschadigingen en gids voor hex-herstel
De browser toont 'XML Parsing Error: unclosed token' of 'mismatched tag'.
Oorzaak: Onjuiste XML-syntaxis, ontbrekende sluittags of niet-geëscapete ampersands ('&' in plaats van '&').
Herstel: Valideer met een XML-linter (xmllint file.svg) en corrigeer tags die niet in balans zijn.
Beveiligingsanalyse en aanvalsvectoren voor parsers
Omdat SVG uitvoerbare XML is die '<script>'-tags en externe entiteiten ondersteunt, levert dit aanzienlijke XSS- en SSRF-risico's op als niet-vertrouwde SVG's worden weergegeven.
Bekende aanvalsvectoren
- Opgeslagen cross-sitescripting (XSS) via ingesloten '<script>'-tags of 'onload='-gebeurtenishandlers.
- XML External Entity (XXE)-aanvallen die lokale serverbestanden lezen wanneer deze worden geparseerd op backend-servers.
- XML-entiteitsexpansie (Billion Laughs) die een denial of service veroorzaakt.
Aanbevolen beveiligingspraktijken: Schoon SVG's altijd op met DOMPurify voordat u ze insluit, of lever SVG's met 'Content-Security-Policy: default-src 'none'' of als '<img>'-tags, die scripts automatisch uitschakelen.
Historische oorsprong en mijlpalen
Belangrijkste voordelen
- Onbeperkte resolutieonafhankelijkheid: scherpe lijnen en typografie op elk beeldscherm en op elke afdrukschaal.
- Extreem kleine bestandsgrootte voor logo's, pictogrammen en UI-elementen.
- Volledig te scripten en op te maken met CSS en JavaScript binnen de DOM van de browser.
Technische beperkingen
- Ongeschikt voor foto's of complexe afbeeldingen met continue tonen.
- Complexe vectorpaden met duizenden knooppunten kunnen vertraging bij CPU-rendering en een hoog batterijverbruik veroorzaken.
- Door het XML-karakter kunnen scripts worden ingesloten, waardoor niet-vertrouwde uploads strikt moeten worden opgeschoond voordat ze worden weergegeven.
Interessante technische weetjes
- Gzip kan de grootte van sommige SVG-bestanden aanzienlijk verkleinen; de reductie hangt af van de documentinhoud en de instellingen voor compressie.
- Het viewBox-attribuut definieert een abstract coördinatencanvas dat dynamisch wordt toegewezen aan fysieke schermpixels.
- Vroege webbrowsers hadden aanvankelijk geen ingebouwde SVG-engines. Daarom verspreidde Adobe de browserplug-in Adobe SVG Viewer, totdat browserondersteuning rond 2011 gemeengoed werd.
Veelgestelde technische vragen
Kunnen SVG-bestanden kwaadaardige code bevatten?
Ja. Omdat SVG geldige XML is, kan het ingesloten JavaScript ('<script>') bevatten dat wordt uitgevoerd als de SVG rechtstreeks in een browser wordt geladen of in een inline '<svg>'-element wordt geopend. Door SVG's via een '<img>'-tag te leveren, wordt scriptuitvoering automatisch geneutraliseerd.
Wanneer moet ik SVG gebruiken in plaats van PNG?
Gebruik SVG voor pictogrammen, logo's, grafieken, illustraties en typografie waarbij scherpe schaling op alle schermformaten en kleine bestandsgroottes vereist zijn. Gebruik PNG of WebP voor foto's.
Hoe kan ik grote of complexe SVG-bestanden optimaliseren?
U kunt vectorpaden opschonen door overbodige metadata, opmerkingen van bewerkingsprogramma's (van Inkscape of Illustrator), onzichtbare groepen en ongebruikte naamruimtedeclaraties te verwijderen met tools zoals SVGO of door SVG-compressie uit te voeren.
Gerelateerde conversieparen voor SVG
Het converteren van SVG-vectorbestanden naar PNG-rasterafbeeldingen transformeert schaalbare, op code gebaseerde graphics in rasters met vaste pixels voor brede toepassingscompatibiliteit.
Verpak PNG-rasterafbeeldingen in een SVG-vectorcontainer (XML) voor responsieve schaling op het web en eenvoudige integratie in vectorlay-outs.
Compileer verouderde 16-bits Windows GDI-vectortekeningrecords naar moderne, schaalbare SVG-paden zonder resolutieverlies.
Converteer 32-bits Windows Enhanced Metafile-afbeeldingen naar schone, responsive SVG-vectoren voor web- en ontwerpsoftware.
Het converteren van een DXF-tekening naar SVG voor CAD zet complexe technische vectorgegevens om in lichte XML-afbeeldingen voor webbrowsers en vectorbewerkingsprogramma's.
Het converteren van Scalable Vector Graphics naar Drawing Exchange Format vertaalt webklare visuele vectoren naar de nauwkeurige wiskundige coördinaten die nodig zijn voor computer-aided design-software.
Deel een SVG-logo of -illustratie als een PDF van één pagina. De schaalbare paden worden een afbeelding met een vaste resolutie, waardoor inzoomen vectordetails niet kan herstellen.