SVG till HTML

Konvertera SVG till HTML online

Välj en SVG-fil eller klistra in koden för att skapa inline-SVG till en HTML-sida. Förhandsvisa resultatet, justera optimeringsinställningarna och kopiera koden. All tolkning, optimering och konvertering sker lokalt i din webbläsare, utan att din SVG skickas till en server.

Förbered responsiv inline-SVG

Behåll viewBox för att bevara SVG:ns koordinatsystem. Ta bort fast bredd och höjd när SVG:n har en användbar viewBox, och ange sedan storleken i din egen CSS.

Så läser du SVG-storlek och besparing

Ursprunglig storlek är storleken på den SVG du lägger in. Optimerad SVG-storlek är storleken efter bearbetning med de alternativ du har valt, till exempel att ta bort kommentarer, avrunda koordinater och minifiera koden. Storlekarna anges i kB, där 1 kB motsvarar 1 000 byte. Besparing är minskningen i procent: från 10 kB till 7 kB sparar du 30 %. Om resultatet blir större, till exempel på grund av läsbar formatering, visas Storleksökning i stället. Siffrorna jämför SVG-koden, inte storleken på exporterna i JSX, React, CSS Data URI eller Base64.

Antal decimaler och indrag

Antal decimaler styr hur många siffror som behålls efter decimaltecknet i koordinater och numeriska attribut. Med 2 decimaler blir 12.34567 till 12.35. Färre decimaler kan minska filstorleken men ändra fina detaljer; standardvärdet 3 är en utgångspunkt, så kontrollera förhandsvisningen. Indrag använder 2 blanksteg, 4 blanksteg eller tabbar för att göra HTML- och JSX-koden lättare att läsa, utan att bilden ändras. Minifiera SVG tar bort onödiga blanktecken för att göra resultatet kompaktare, så indrag är avstängt medan minifiering är på.

HTML, JSX, React och SVG som data-URI

HTML-resultatet är inline-SVG-kod och laddas ned som en SVG-fil. JSX anpassar attributnamn och inline-stilar för React. React-komponent lägger koden i en TypeScript-funktion som tar emot vanliga SVG-props. CSS Data URI ger en background-image-deklaration; Base64 ger en kodad URI för SVG-bilden. Storleksstatistiken gäller den optimerade SVG:n, inte de större kodade formaten. Kontrollera id-attributen innan du använder flera inline-kopior på samma sida.

Ett statiskt och lokalt arbetsflöde för SVG

Förhandsvisningen är en isolerad bild, inte körbar sidkod. Skript, inbäddad HTML, animationer, externa bilder och formatmallar tas bort. Inline-stilar för presentation som stöds behålls, liksom lokala fragmentreferenser. Verktyget är avsett för statiska bilder; funktioner som inte stöds kan ändra utseendet. currentColor ändrar enfärgade fyllningar och konturer och ärver färgen från omgivningen när SVG:n används inline; en förhandsvisning som bild har sitt eget färgsammanhang.