SVG til HTML

Konvertér SVG til HTML online

Vælg en SVG-fil, eller indsæt dens kode for at lave inline SVG til en HTML-side. Se resultatet, justér optimeringsindstillingerne, og kopiér koden. Al fortolkning, optimering og konvertering foregår lokalt i din browser, uden at din SVG sendes til en server.

Klargør responsiv inline SVG

Behold viewBox for at bevare SVG-filens koordinatsystem. Fjern fast bredde og højde, når filen har en brugbar viewBox, og angiv så størrelsen i din egen CSS.

Forstå SVG-størrelse og besparelse

“Oprindelig størrelse” er størrelsen på den SVG, du har tilføjet. “Optimeret SVG-størrelse” er størrelsen efter behandling med de indstillinger, du har valgt, f.eks. fjernelse af kommentarer, afrunding af koordinater og minificering af koden. Størrelser vises i kB, hvor 1 kB svarer til 1.000 byte. “Sparet” er reduktionen i procent: Går du fra 10 kB til 7 kB, sparer du 30 %. Hvis resultatet er større, f.eks. på grund af læsevenlig formatering, vises “Størrelsesforøgelse” i stedet. Tallene sammenligner SVG-kode, ikke størrelsen på eksporterne til JSX, React, CSS data-URI eller Base64.

Antal decimaler og indrykning

“Antal decimaler” styrer, hvor mange cifre der bevares efter decimaltegnet i koordinater og numeriske attributter. Med 2 decimaler bliver 12.34567 til 12.35. Færre decimaler kan gøre filen mindre, men kan ændre fine detaljer; standardværdien 3 er et udgangspunkt, så tjek forhåndsvisningen. Indrykning med 2 mellemrum, 4 mellemrum eller tabulatorer gør HTML- og JSX-koden lettere at læse uden at ændre billedet. “Minificér SVG” fjerner overflødige mellemrum og linjeskift for at gøre resultatet kompakt, så indrykning er slået fra, mens minificering er slået til.

HTML, JSX, React og data-URI til SVG

HTML-resultatet er inline SVG-kode og downloades som en SVG-fil. JSX tilpasser attributnavne og inline-styles til React. “React-komponent” pakker koden ind i en TypeScript-funktion, der tager imod almindelige SVG-props. “CSS data-URI” giver en background-image-erklæring; Base64 giver en kodet billed-URI til SVG. Størrelsesstatistikken beskriver den optimerede SVG, ikke de større kodede formater. Tjek id-attributterne, før du bruger flere inline-kopier på samme side.

Statisk SVG, behandlet lokalt

Forhåndsvisningen er et isoleret billede og ikke sidekode, der kan køres. Scripts, indlejret HTML, animation, eksterne billeder og stylesheets fjernes. Understøttede inline-præsentationsstyles og lokale fragmentreferencer bevares. Værktøjet er beregnet til statisk grafik; funktioner, der ikke understøttes, kan ændre udseendet. currentColor ændrer ensfarvede udfyldninger og streger og arver sin farve, når koden bruges inline; en billedforhåndsvisning bruger sin egen farvekontekst.