SVG naar HTML

SVG online naar HTML converteren

Kies een SVG-bestand of plak de code om inline SVG voor een HTML-pagina te maken. Bekijk een voorbeeld van het resultaat, pas de optimalisatie-instellingen aan en kopieer de code. Het inlezen, optimaliseren en converteren gebeurt volledig lokaal in je browser, zonder dat je SVG naar een server wordt gestuurd.

Responsive inline SVG voorbereiden

Behoud de viewBox, dan blijft het coördinatenstelsel van de SVG intact. Verwijder de vaste breedte en hoogte als de SVG een bruikbare viewBox heeft, en bepaal de grootte daarna in je eigen CSS.

SVG-grootte en besparing uitgelegd

“Oorspronkelijke grootte” is de grootte van je ingevoerde SVG. “Grootte geoptimaliseerde SVG” is de grootte na verwerking met de gekozen opties, zoals het verwijderen van commentaar, het afronden van coördinaten en het minificeren van de code. Groottes worden weergegeven in kB, waarbij 1 kB gelijk is aan 1000 bytes. “Bespaard” is de procentuele verkleining: van 10 kB naar 7 kB bespaart 30%. Als de uitvoer groter is, bijvoorbeeld door leesbare opmaak, zie je in plaats daarvan “Toename”. Deze cijfers vergelijken SVG-code, niet de grootte van exports naar JSX, React, CSS Data URI of Base64.

Aantal decimalen en inspringing

“Aantal decimalen” bepaalt hoeveel cijfers na de komma worden behouden in coördinaten en numerieke attributen. Met 2 decimalen wordt 12,34567 afgerond op 12,35. Minder decimalen kunnen het bestand kleiner maken, maar ook fijne details veranderen; de standaardwaarde 3 is een startpunt, dus controleer het voorbeeld. Inspringing gebruikt 2 spaties, 4 spaties of tabs om HTML- en JSX-code leesbaarder te maken zonder de afbeelding te wijzigen. “SVG minificeren” verwijdert overbodige witruimte om de uitvoer compacter te maken; daarom is inspringing uitgeschakeld zolang minificatie aan staat.

HTML, JSX, React en data-URI’s voor SVG

HTML-uitvoer is inline SVG-code en wordt gedownload als SVG-bestand. JSX past attribuutnamen en inline stijlen aan voor React. “React-component” verpakt dit in een TypeScript-functie die standaard SVG-props accepteert. CSS Data URI levert een background-image-declaratie op; Base64 levert een gecodeerde URI voor de SVG-afbeelding op. De groottestatistieken beschrijven de geoptimaliseerde SVG, niet de grotere gecodeerde formaten. Controleer de ID’s voordat je meerdere inline kopieën op één pagina gebruikt.

Een statische, lokale SVG-workflow

Het voorbeeld is een geïsoleerde afbeelding, geen uitvoerbare paginacode. Scripts, ingesloten HTML, animaties, externe afbeeldingen en stylesheets worden verwijderd. Ondersteunde inline presentatiestijlen en lokale fragmentverwijzingen blijven behouden. Deze tool is bedoeld voor statische afbeeldingen; niet-ondersteunde functies kunnen het uiterlijk veranderen. currentColor wijzigt effen vullingen en lijnen en erft bij inline gebruik de kleur over; een voorbeeld als afbeelding heeft zijn eigen kleurcontext.