SVG til HTML

Konverter SVG til HTML online

Velg en SVG-fil eller lim inn koden for å lage inline SVG til en HTML-side. Forhåndsvis resultatet, juster optimaliseringsinnstillingene og kopier koden. All tolkning, optimalisering og konvertering skjer lokalt i nettleseren din, uten at SVG-en sendes til en server.

Klargjør responsiv inline SVG

Behold viewBox for å bevare koordinatsystemet til SVG-en. Fjern fast bredde og høyde når SVG-en har en brukbar viewBox, og angi størrelsen i din egen CSS.

Forstå SVG-størrelse og besparelse

«Opprinnelig størrelse» er størrelsen på SVG-en du la inn. «Optimalisert SVG-størrelse» er størrelsen etter behandling med alternativene du har valgt, for eksempel fjerning av kommentarer, avrunding av koordinater og minifisering av koden. Størrelser vises i kB, der 1 kB er 1 000 byte. «Spart» er reduksjonen i prosent: går du fra 10 kB til 7 kB, sparer du 30 %. Blir resultatet større, for eksempel på grunn av lesbar formatering, vises «Størrelsesøkning» i stedet. Tallene sammenligner SVG-koden, ikke størrelsen på eksportene i JSX, React, CSS data-URI eller Base64.

Desimalpresisjon og innrykk

Desimalpresisjon styrer hvor mange sifre som beholdes etter desimaltegnet i koordinater og numeriske attributter. Med presisjon 2 blir 12.34567 til 12.35. Færre desimaler kan gi mindre filer, men kan endre fine detaljer; standardverdien 3 er et utgangspunkt, så sjekk forhåndsvisningen. Innrykk bruker 2 mellomrom, 4 mellomrom eller tabulatorer for å gjøre HTML- og JSX-koden lettere å lese, uten å endre bildet. «Minifiser SVG» fjerner unødvendige mellomrom og linjeskift for å gjøre resultatet mer kompakt, så innrykk er slått av så lenge minifisering er på.

HTML, JSX, React og SVG som data-URI

HTML-resultatet er inline SVG-kode og lastes ned som en SVG-fil. JSX tilpasser attributtnavn og inline-stiler til React. «React-komponent» pakker koden inn i en TypeScript-funksjon som tar imot vanlige SVG-props. «CSS data-URI» gir en background-image-deklarasjon; Base64 gir en kodet bilde-URI for SVG-en. Størrelsesstatistikken gjelder den optimaliserte SVG-en, ikke de større kodede formatene. Sjekk ID-ene før du bruker flere inline-kopier på samme side.

En statisk og lokal arbeidsflyt for SVG

Forhåndsvisningen er et isolert bilde, ikke sidekode som kan kjøres. Skript, innebygd HTML, animasjon, eksterne bilder og stilark fjernes. Støttede inline-stiler for presentasjon og lokale fragmentreferanser beholdes. Verktøyet er laget for statisk grafikk; funksjoner som ikke støttes, kan endre utseendet. currentColor endrer ensfargede fyll og streker og arver fargen når SVG-en brukes inline; en forhåndsvisning som bilde bruker sin egen fargekontekst.