SVG-vektor (.svg)
W3C StandardScalable Vector Graphics (SVG) är ett XML-baserat vektorbildformat för tvådimensionell grafik med stöd för interaktivitet, CSS-styling och animering.
Konvertera SVG till PNG
Gratis konverterare från SVG till PNG i webbläsaren. Konvertera filer direkt på din enhet.
Komprimera SVG online
Privat - filer lämnar aldrig din enhet
Granska och metadata
Operativsystem och filanalysverktyg identifierar SVG-filer genom att granska den inledande sekvensen av binära byte:
Signatur i filhuvudet på bytenivå (magiska byte)
Operativsystem och filanalysverktyg identifierar SVG-filer genom att granska den inledande sekvensen av binära byte:
HEX-SIGNATUR (OFFSET 0):
3C 73 76 67ASCII-REPRESENTATION: <svg
Standardisering: W3C Recommendation (SVG 1.1 / SVG 2)
Tekniska specifikationer
| Containerarkitektur | XML-baserat märkspråksdokument som definierar 2D-vektorgeometri |
| Komprimering | Textkomprimering med Gzip eller Brotli (SVGZ använder Gzip) |
| Byteordning | Ej tillämpligt (textström med UTF-8/UTF-16-tecken) |
| Färgrymder | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Kanaler och struktur | Vektorformer med obegränsad upplösning, Bézier-kurvor, typografi och opacitetsmasker |
| Maximala dimensioner | Upplösningsoberoende (skalas fritt till valfri visningsyta utan pixelering) |
| Transparens | Fullt variabel alfatransparens och CSS-blandningslägen |
| Strömning och progressiv visning | Webbläsarens XML-tolk stöder progressiv tolkning av textströmmen |
Teknisk jämförelsematris: SVG jämfört med konkurrenter
| Tekniskt attribut | SVG (Aktuell) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Renderingsmodell | Vektor-DOM i retained mode | Bitmappscanvas i direktläge | Fast sidbehållare i retained mode | Rasterpixelrutnät |
| Styling och CSS | Fullt stilsättningsbar via CSS-klasser och variabler | Kräver omritningar via JavaScript Canvas API | Ingen dynamisk CSS-styling | Fasta rasterpixlar |
| Oändlig skalbarhet | Ja (matematiska vektorkurvor) | Kräver manuell upplösningsskalning | Ja (vektorelement) | Nej (pixeleras när den förstoras) |
| Interaktivitet | Inbyggda DOM-händelser (hovring, klick, animationer) | Kräver manuella beräkningar för träffdetektering | Statiskt dokument | Kräver bildkarta eller canvas |
Vanliga skadeorsaker och hex-återställningsguide
Webbläsaren visar ett XML-tolkningsfel: oavslutad token eller felmatchad tagg.
Grundorsak: Felaktig XML-syntax, saknade sluttaggar eller et-tecken utan escape-kodning ('&' i stället för '&').
Återställning: Validera med en XML-linter (xmllint file.svg) och korrigera obalanserade taggar.
Säkerhetsanalys och attackvektorer för tolkar
Eftersom SVG är exekverbar XML som stöder '<script>'-taggar och externa entiteter utgör det betydande XSS- och SSRF-risker om opålitliga SVG-filer visas.
Kända attackvektorer
- Lagrad XSS via inbäddade '<script>'-taggar eller 'onload='-händelsehanterare.
- XXE-attacker (XML External Entity) som läser lokala serverfiler när de tolkas på backendservrar.
- Billion Laughs XML-entitetsutvidgning som orsakar tjänsteavbrott.
Rekommenderade skyddsåtgärder: Rensa alltid SVG-filer med DOMPurify innan inbäddning, eller servera SVG-filer med 'Content-Security-Policy: default-src 'none'' eller som '<img>'-taggar som automatiskt inaktiverar skript.
Historiskt ursprung och milstolpar
Viktiga fördelar
- Oändligt skalbart utan upplösningsförlust: skarpa linjer och typografi i valfri skärm- eller utskriftsskala.
- Extremt liten filstorlek för logotyper, ikoner och gränssnittselement.
- Kan styras med skript och formges med CSS och JavaScript i webbläsarens DOM.
Tekniska begränsningar
- Olämpligt för fotografier eller komplexa bilder med kontinuerliga tonövergångar.
- Komplexa vektorsökvägar med tusentals noder kan orsaka fördröjningar i CPU-renderingen och hög batteriförbrukning.
- XML-strukturen tillåter inbäddade skript, vilket kräver strikt rensning innan rendering av opålitliga uppladdningar.
Intressant teknisk kuriosa
- Gzip kan minska storleken på vissa SVG-filer avsevärt; minskningen beror på dokumentinnehåll och komprimeringsinställningar.
- Attributet viewBox definierar en abstrakt koordinatyta som mappas dynamiskt till fysiska pixlar på skärmen.
- Tidiga webbläsare saknade initialt inbyggda SVG-motorer, vilket fick Adobe att distribuera webbläsartillägget Adobe SVG Viewer innan det inbyggda webbläsarstödet stabiliserades runt 2011.
Vanliga tekniska frågor
Kan SVG-filer innehålla skadlig kod?
Ja. Eftersom SVG är giltig XML kan den innehålla inbäddad JavaScript ('<script>') som exekveras om SVG-filen läses in direkt i en webbläsare eller öppnas i ett inbäddat '<svg>'-element. Att servera SVG-filer via en '<img>'-tagg neutraliserar automatiskt skriptexekvering.
När bör jag använda SVG i stället för PNG?
Använd SVG för ikoner, logotyper, diagram, illustrationer och typografi där skarp skalning i alla skärmstorlekar och små filstorlekar krävs. Använd PNG eller WebP för fotografier.
Hur kan jag optimera stora eller komplexa SVG-filer?
Du kan rensa upp vektorsökvägar genom att ta bort redundant metadata, redigeringskommentarer (från Inkscape eller Illustrator), osynliga grupper och oanvända namnrymdsdeklarationer med verktyg som SVGO eller genom att köra SVG-komprimering.
Relaterade konverteringspar för SVG
Konvertering av SVG-vektorfiler till PNG-rasterbilder omvandlar skalbar, kodbaserad grafik till pixelrutnät med fast upplösning för bred kompatibilitet med programvara.
Bädda in rasterbaserade PNG-bilder i en SVG-behållare i XML för responsiv skalning på webben och integrering i layouter med vektorstöd.
Kompilera äldre 16-bitars Windows GDI-vektorteckningsposter till moderna, skalbara SVG-sökvägar utan upplösningsförlust.
Konvertera 32-bitars Windows Enhanced Metafile-grafik till rena och responsiva SVG-vektorer för webb- och designprogramvara.
Konvertering av en DXF-ritning till en CAD SVG-export förvandlar komplexa ingenjörsvektordata till lätta XML-grafikfiler för webbläsare och vektorredigerare.
Konvertering av skalbar vektorgrafik till ritningsutbytesformat (Drawing Exchange Format) översätter webbklara visuella vektorer till exakta matematiska koordinater som krävs av programvara för datorstödd konstruktion.
Dela en SVG-logotyp eller illustration som en PDF på en sida. De skalbara banorna blir en bild med fast upplösning, så det går inte att återskapa vektordetaljer genom att zooma.