SVG-viewer en -editor online: code, preview, paden | We.Inc
Plak of open een SVG om hem naast zijn code te zien. Bewerk live, bekijk hem op een lichte, donkere en geblokte achtergrond, inspecteer padcommando's, ruim hem op en exporteer als PNG of als React-component.
SVG-viewer en -editor
Plak SVG-code of open een .svg-bestand en de afbeelding verschijnt naast de code. Bewerk de code en de preview tekent opnieuw terwijl u typt. Wissel van achtergrond om transparante delen te controleren, zoom in, toon elk padcommando, verwijder overbodige editorgegevens, en download het resultaat als SVG, PNG of React-component.
Wat u kunt exporteren
Formaat
Gebruik het voor
SVG (opgeschoond)
Websites, iconen, logo's; kleinste bestand
PNG op 1x tot 4x
Plekken die geen SVG accepteren, zoals sommige e-mailprogramma's en socialemediaberichten
React-component (JSX)
De afbeelding inline gebruiken in een React- of Next.js-project
Een codeweergave en een live preview naast elkaar. Er wordt niets geüpload: het bestand wordt door uw eigen browser gelezen en getekend, en de preview wordt als afbeelding getoond zodat een script in de SVG niet kan draaien.
Plak SVG-markup in het codevak, sleep er een bestand op of gebruik Bestand openen. Er is een voorbeeld geladen zodat u de tools meteen kunt uitproberen.
Bewerk de code. De preview wordt bijgewerkt terwijl u typt en meldt het wanneer de markup kapot is.
Zet de achtergrond van de preview op wit, donker of een dambordpatroon, en zoom van 25% tot 800% om fijne details te controleren.
Open de padinspector om de commando's van elk pad in gewone woorden te zien, zoals Ga naar, Lijn naar en Kubische curve, met hun getallen.
Klik op Opruimen om opmerkingen, metadata en editorattributen te verwijderen en lange decimalen af te ronden, en download het dan als SVG of PNG, of kopieer het als JSX.
Behoud het viewBox-attribuut en verwijder een vaste width en height als u wilt dat de SVG in CSS met zijn container meeschaalt.
Zet in iconen fill of stroke op currentColor zodat ze de tekstkleur overnemen van waar ze in staan.
Twee decimalen zijn genoeg voor bijna elk icoon dat op een raster van 24 of 100 eenheden is getekend. Meer precisie voegt vooral bytes toe.
Plak nooit een SVG uit een onbetrouwbare bron rechtstreeks in de HTML van uw pagina. Inline SVG kan scripts bevatten; laad hem met een img-tag of ruim hem eerst op.
Veelgestelde vragen
Hoe open ik een SVG-bestand?
Elke moderne browser opent SVG-bestanden direct, maar toont alleen de afbeelding. Om de code en de afbeelding samen te zien, opent u het bestand in deze viewer met de knop Bestand openen of sleept u het naar het codevak.
Wordt mijn SVG ergens geüpload?
Nee. Het bestand wordt door uw browser gelezen en lokaal getekend. Niets wat u hier opent of typt, wordt naar een server gestuurd.
Waarom toont mijn SVG niets in de preview?
De meest voorkomende oorzaken zijn een ontbrekend xmlns="http://www.w3.org/2000/svg"-attribuut op het svg-element, een viewBox die van de tekening af wijst, of witte vormen op een witte achtergrond. Probeer de geblokte achtergrond en bekijk de foutregel onder de preview.
Wat verwijdert de opruimstap?
Opmerkingen, de XML-declaratie, het doctype, metadatablokken, editorspecifieke attributen van tools zoals Inkscape, Sketch en Serif, en lege groepen. Ook worden decimalen afgerond op de precisie die u kiest. Paden worden niet samengevoegd en vormen niet gewijzigd, dus de tekening hoort er hetzelfde uit te zien.
Hoe gebruik ik een SVG in React?
Kopieer de JSX-uitvoer. Die zet attributen om naar React-namen, zoals stroke-width naar strokeWidth en class naar className, maakt van style-strings objecten en geeft alle props die u de component meegeeft door aan het svg-element.
SVG-code lezen
Een SVG-bestand is tekst die vormen beschrijft. Het svg-element zet met zijn viewBox een coördinatenstelsel op: viewBox="0 0 24 24" betekent dat de tekening een raster van 24 bij 24 eenheden gebruikt, op welke grootte ze ook getoond wordt. Daarbinnen tekenen elementen zoals rect, circle en path op dat raster met vullingen en lijnen.
De meeste iconen bestaan bijna helemaal uit path-elementen. Het d-attribuut van een pad is een lijst tekencommando's: M verplaatst de pen, L tekent een rechte lijn, C tekent een kubische curve, A tekent een boog en Z sluit de vorm. Hoofdletters gebruiken absolute coördinaten; kleine letters zijn relatief ten opzichte van het laatste punt. De inspector op deze pagina schrijft ze allemaal voluit.
Waarom geëxporteerde SVG's groter zijn dan nodig
Ontwerptools bewaren informatie die hen helpt het bestand opnieuw te openen: laagnamen, editorinstellingen, posities van hulplijnen en coördinaten met zes of meer decimalen. Browsers negeren dat allemaal. Het verwijderen ervan en het afronden van getallen maakt het bestand vaak merkbaar kleiner, en dat telt wanneer hetzelfde icoon op elke pagina staat.
Deze pagina ruimt voorzichtig op, op een manier die nooit zou mogen veranderen hoe de afbeelding eruitziet. Voor ingrijpendere wijzigingen, zoals paden samenvoegen, gaat de SVG-optimalisatietool verder.
Ga naar
Lijn naar
Horizontale lijn
Verticale lijn
Kubische curve
Vloeiende kubische curve
Kwadratische curve
Vloeiende kwadratische curve
Boog
Pad sluiten
een <script>-element
een on…-eventattribuut
een javascript:-link
een <foreignObject> met HTML erin
Wit
Donker
Dambord
De markup is geen geldige XML.
Het root-element is geen <svg>.
Plak markup die begint met <svg en eindigt met </svg>.
Dat bestand is groter dan 5 MB. Open een kleinere SVG.
{name} geopend.
De preview is niet geladen, dus er valt nog niets te exporteren.
Een PNG van {w} × {h} opgeslagen.
Code
Bestand openen
Voorbeeld
SVG-code
{bytes} bytes · {n} pad
{bytes} bytes · {n} paden
Deze SVG bevat {parts}. De preview hier is veilig, maar plak hem niet als inline HTML in een pagina zonder dat te verwijderen.
Preview
Zoom
Preview van uw SVG
Gerenderd door uw browser. Scripts in de SVG draaien hier niet.
Padinspector
Geen path-elementen in deze SVG.
Pad {n}
Commando's in pad {n}
Commando
Getallen
(relatief)
Kies een pad om het in de preview te markeren en de commando's te tonen.