Softonic

Minifiera SVG-kod

Steg 1 / 2
Nästa

Att minifiera SVG gör läsbar, indragen markup till en kompakt rad som webbläsare renderar på samma sätt. Klistra in din kod, kör minifieraren och kopiera en version som är redo för en stilmall, en mall eller en komponentfil.

Så minifierar du SVG-kod

  1. 1

    Klistra in markupen

    Lägg hela svg-elementet, med öppnande och stängande tagg, i textrutan för SVG-källkod.

  2. 2

    Välj vad som ska tas bort

    Låt kommentarer, metadata, blanksteg och doctype vara ikryssade för minsta möjliga resultat.

  3. 3

    Välj antal decimaler

    Standardvärdet 2 passar de flesta ikoner. Höj det till 3 om en kurva ser fel ut efter minifieringen.

  4. 4

    Minifiera och kopiera

    Klicka på Nästa och sedan på Komprimera, och använd knappen Kopiera i resultatrutan.

Vad minifieraren gör med din kod

Verktyget arbetar på SVG:ns text i en fast ordning: det tar bort XML-deklarationen och doctype, sedan kommentarer, sedan metadata-, title- och description-element, avrundar därefter decimaler och slutligen slår ihop blanksteg. Varje följd av mellanslag, tabbar och radbrytningar blir ett enda mellanslag, och mellanslag mellan en stängande och en öppnande tagg tas bort, vilket ger en enda rad.

Före och efter

Indata, 126 byte:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Utdata med standardinställningarna, 97 byte (en besparing på 23 procent):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

Lägg märke till att 8.000 blev 8 och 3.500 blev 3.5: efter avrundningen tas de avslutande nollorna bort.

Vad den lämnar orört

Det här är en textminifierare, inte en fullständig optimerare. Den behåller attributnamn, ID:n, klasser, grupper, transformeringar och kommandon i path-data som de är. Det är avsiktligt: ID:n som refereras från CSS, skript eller gradienter fortsätter att fungera, och filens struktur går fortfarande att känna igen om du behöver redigera den senare.

Saker att hålla koll på

  • Ihopslagning av blanksteg gäller även inne i textelement, så en etikett med flera mellanslag i rad visar ett enda mellanslag.
  • Avrundningen gäller alla decimaltal, även versionssträngar i attribut som 1.10, som blir 1.1.
  • Minifierad kod är svår att läsa. Behåll originalet i versionshantering och använd den minifierade kopian bara som utdata.

En snabb kontroll efter minifieringen

Klistra in den minifierade raden i en tom HTML-fil och öppna den i en webbläsare bredvid originalet. De två ska se likadana ut. Om en gradient, mask eller klippsökväg har slutat fungera, kontrollera om något ID eller någon referens ändrats för hand, eftersom verktyget inte byter namn på dem. Om en mycket fin detalj har flyttat sig, höj antalet decimaler till 3 eller mer och kör igen.

Var du kan använda resultatet

En SVG på en rad klistras rent in i en HTML-fil, en JSX-komponent, en data-URI eller en CSS-bakgrundsregel, där radbrytningar annars måste escapas.

Vanliga frågor

Minifiering tar bort onödiga tecken från texten. Komprimering, till exempel gzip på en server, packar texten för överföring. De kan kombineras, och den minifierade filen komprimeras ytterligare under överföringen.

Inte som standard, eftersom ID:n, klasser och elementstruktur behålls. Endast kommentarer, metadataelement, doctype och mellanslag tas bort.

Verktyget formaterar inte kod. Öppna den minifierade texten i en kodeditor med en formateringsfunktion för att få tillbaka indragen, men borttagna kommentarer är borta för alltid.

Borttagning av blanksteg tar bort radbrytningarna mellan taggar. Avmarkera rutan för blanksteg om du vill behålla den ursprungliga layouten.

Relaterade verktyg

Skapa LEGO-mosaik av ett foto

Gör en mosaikplan av ett foto med 16 × 16, 32 × 32, 48 × 48 eller 64 × 64 rutor. Förhandsvisa ungefärliga färger, räkna 1×1-plattor och ladda ner en numrerad byggguide.

Skapa notpapper

Skapa notpapper att skriva ut: tomma notsystem, G-klav eller F-klav, pianosystem eller gitarrtabulatur. Välj antal, linjeavstånd, A4 eller Letter och marginaler och ladda ned PDF eller SVG.

Triadisk färggenerator

Välj en basfärg och få dess två triadiska partner, roterade exakt 120° och 240° på färghjulet, som HEX-koder du kopierar med ett klick.

Streckkodsläsare

Välj en bild med en streckkod och läs dess kodade värde och typ. Stöder EAN-13, UPC-A och Code 128 samt kontrollsiffra för EAN och UPC.

Skapa presentkort

Skapa ett presentkort med företagsnamn, mottagare, belopp, hälsning och giltighetsdatum. Välj en mall och skriv ut eller ladda ner som PNG.

Skapa meny

Skapa en ensidig restaurang- eller kafémeny med redigerbara avsnitt, rätter, priser och färger, liveförhandsvisning samt nedladdning i SVG och PNG.

Verktyget finns på andra språk

Guider och användningsområden