Ingen opplasting, 100% lokalt, ingen konto

SVG-optimerer

Lim inn eller slipp en SVG og krymp den med SVGO. Alt forblir i nettleseren.

Slik fungerer SVG-optimerer

SVG-optimerer kjører SVGO (SVG Optimizer) i en Web Worker inne i nettleseren din for å minifisere og rense SVG-filene dine uten å laste dem opp. SVGO bruker et konfigurerbart sett med programtillegg som fjerner kommentarer, slår sammen mellomrom, slår sammen identiske baner, konverterer former til den mest kompakte representasjonen og fjerner attributter som ikke har noen visuell effekt. Resultatet er en mindre SVG som gjengis identisk med originalen.

SVG-filer produsert av designverktøy som Figma, Illustrator eller Inkscape inneholder ofte betydelig overhead: redaktørspesifikk metadata, tomme grupper, redundante transformasjonsattributter og navneroms-erklæringer som ingen nettleser trenger. SVGOs standardplugin-sett fjerner denne overheaden pålitelig. Den optimaliserte filen tilbys som en nedlasting, og prosentvis størrelsesreduksjon vises slik at du kan bekrefte at optimaliseringen var verdt det.

Skrevet av Bastien Sulyan

Slik bruker du SVG-optimerer, steg for steg

  1. Slipp SVG-filen din på opplastingsområdet eller klikk for å bla gjennom.
  2. SVGO Web Worker kjører optimaliseringen umiddelbart med standard plugin-settet.
  3. Se prosentvis reduksjon og de originale versus optimaliserte filstørrelsene.
  4. Klikk Last ned for å lagre den optimaliserte SVG-en på enheten din.
  5. Hvis bestemte programtillegg forårsaker gjengivelsesproblemer, juster plugin-konfigurasjonen og optimaliser på nytt.

Vanlige bruksområder

  • En frontend-utvikler optimaliserer ikoner eksportert fra Figma før de legges til i en produksjonsressurspipeline, og reduserer hvert ikon fra 4 KB til under 1 KB.
  • En webdesigner renser opp SVG-illustrasjoner eksportert fra Illustrator som inneholder lag med redaktørmetadata som er usynlig i nettleseren, men blåser opp filen.
  • En utvikler som bygger en ikonfont fra SVG-glyfer sikrer at hver kilde-SVG er ren og konsekvent strukturert før fontbyggingstrinnet.
  • En ytelsesiningeniør reviderer innebygd SVG i HTML og erstatter hver oppblåst original med en SVGO-optimalisert versjon for å forbedre sidevekten.

Ofte stilte spørsmål

Vil SVGO endre utseendet på SVG-en min?

SVGOs standardplugin-er er valgt for å være visuelt tapsfrie: den optimaliserte SVG-en gjengis identisk med originalen i alle standardnettlesere. Noen aggressive plugin-er (som de som runder av banekoordinater svært mye) kan innføre subtile gjengivelsesforskjeller. Hvis du merker en visuell endring, sammenlign de originale og optimaliserte filene i en nettleser og deaktiver det spesifikke plugin-et som forårsaker problemet.

Sendes SVG-filen til en server for optimalisering?

Nei. SVGO kjøres i en Web Worker inne i nettleserfanen din. SVG-teksten leses fra din lokale disk, behandles i JavaScript-minnet, og utdata returneres til siden for nedlasting. Filinnholdet forlater ikke enheten din.

Hvor mye mindre vil SVG-en min bli?

Reduksjonen avhenger av kilden. SVG-er eksportert fra designverktøy med redaktørmetadata krymper vanligvis 30 til 70 prosent. Håndskrevne SVG-er som allerede er magre kan se bare 5 til 15 prosent reduksjon. Verktøyet viser eksakte byte-tall og prosent slik at du kan vurdere hver fil individuelt.

Påvirker optimalisering SVG-animasjoner eller JavaScript inne i filen?

Konfigurasjonen bevarer animasjonselementer og SMIL-attributter. Den fjerner script-elementer: verktøyet legger til plugin-et removeScripts oppå SVGOs standardpreset, fordi en SVG du er i ferd med å bygge inn, ikke bør inneholde kjørbar kode. Noen plugin-er som renser opp attributter kan samhandle med animasjoner hvis animasjonen refererer til disse attributtene via ID; sjekk det gjengitte resultatet etter optimalisering av filer som bruker komplekse animasjoner.

Kan jeg optimalisere flere SVG-filer på én gang?

Gjeldende versjon behandler én SVG-fil om gangen. Slipp en fil, last ned resultatet, og slipp deretter neste fil. Satsbehandling for flere filer i én sesjon er ikke tilgjengelig i denne utgivelsen.

Hvilken versjon av SVGO bruker verktøyet?

Verktøyet inneholder SVGO kjørende i en Web Worker. Den medfølgende versjonen er notert i verktøyets om-informasjon. SVGO vedlikeholdes aktivt og plugin-API-et endret seg betydelig mellom v1, v2 og v3; det gjeldende verktøyet bruker v3-plugin-formatet.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle bildeverktøy