Ingen upload, 100% lokalt, ingen konto

SVG-optimering

Indsæt eller slip en SVG og skrump den med SVGO. Alt forbliver i din browser.

Sådan virker SVG-optimering

SVG-optimizer kører SVGO (SVG Optimizer) i en Web Worker inde i din browser for at minimere og rydde op i dine SVG-filer uden at uploade dem. SVGO anvender et konfigurerbart sæt plugins, der fjerner kommentarer, sammenfolder whitespace, fusionerer identiske stier, konverterer former til deres mest kompakte repræsentation og fjerner attributter uden visuel effekt. Resultatet er en mindre SVG, der gengiver identisk med originalen.

SVG-filer produceret af designværktøjer som Figma, Illustrator eller Inkscape indeholder ofte betydeligt overhead: editor-specifikke metadata, tomme grupper, overflødige transform-attributter og navnrumsdeklarationer, som ingen browser behøver. SVGOs standardplugin-sæt fjerner dette overhead på en pålidelig måde. Den optimerede fil tilbydes som download, og den procentvise størrelsesreduktion vises, så du kan bekræfte, at optimeringen var det værd.

Skrevet af Bastien Sulyan

Sådan bruger du SVG-optimering, trin for trin

  1. Slip din SVG-fil på upload-området, eller klik for at browse.
  2. SVGO Web Worker kører optimeringen øjeblikkeligt med standardplugin-sættet.
  3. Se den procentvise reduktion og de originale versus optimerede filstørrelser.
  4. Klik på Download for at gemme den optimerede SVG på din enhed.
  5. Hvis specifikke plugins forårsager gengivelsesproblemer, justerer du plugin-konfigurationen og optimerer igen.

Almindelige anvendelser

  • En frontend-udvikler optimerer ikoner eksporteret fra Figma, inden de committes til en produktionsasset-pipeline, og reducerer hvert ikon fra 4 KB til under 1 KB.
  • En webdesigner rydder op i SVG-illustrationer eksporteret fra Illustrator, der indeholder lag af editor-metadata, der er usynlige i browseren men oppuster filen.
  • En udvikler, der bygger en ikonfont fra SVG-glyffer, sikrer, at hver kilde-SVG er ren og konsekvent struktureret inden skrifttype-build-trinnet.
  • En performanceingeniør reviderer inline SVG i HTML og erstatter hvert oppustet original med en SVGO-optimeret version for at forbedre sidevægt.

Ofte stillede spørgsmål

Ændrer SVGO udseendet af min SVG?

SVGOs standardplugins er valgt til at være visuelt tabsfrie: den optimerede SVG gengiver identisk med originalen i alle standard browsere. Nogle aggressive plugins (som dem, der runder stiekoordinater meget kraftigt) kan introducere subtile gengivelsesforskelle. Hvis du bemærker en visuel ændring, sammenligner du de originale og optimerede filer i en browser og deaktiverer det specifikke plugin, der forårsager problemet.

Sendes SVG-filen til en server til optimering?

Nej. SVGO kører i en Web Worker inde i din browser-fane. SVG-teksten læses fra din lokale disk, behandles i JavaScript-hukommelsen, og outputtet returneres til siden til download. Filindholdet forlader ikke din enhed.

Hvor meget mindre vil min SVG blive?

Reduktionen afhænger af kilden. SVG'er eksporteret fra designværktøjer med editor-metadata krymper sædvanligvis med 30 til 70 procent. Håndskrevne SVG'er, der allerede er slanke, kan kun se 5 til 15 procents reduktion. Værktøjet viser de eksakte byte-tal og procent, så du kan evaluere hver fil individuelt.

Påvirker optimering SVG-animationer eller JavaScript inde i filen?

Konfigurationen bevarer animationselementer og SMIL-attributter. Den fjerner script-elementer: værktøjet tilføjer plugin'et removeScripts oven på SVGO's standardpreset, fordi en SVG, du er ved at indlejre, ikke bør bære eksekverbar kode. Nogle plugins, der rydder op i attributter, kan interagere med animationer, hvis animationen refererer til disse attributter via ID; kontroller det gengivede output efter optimering af filer, der bruger komplekse animationer.

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

Den nuværende version behandler én SVG-fil ad gangen. Slip en fil, download resultatet, og slip derefter den næste fil. Batch-behandling af flere filer i en enkelt session er ikke tilgængelig i denne udgivelse.

Hvilken version af SVGO bruger værktøjet?

Værktøjet pakker SVGO, der kører i en Web Worker. Den pakkede version er angivet i værktøjets om-oplysninger. SVGO vedligeholdes aktivt, og plugin-API'et ændrede sig betydeligt mellem v1, v2 og v3; det nuværende værktøj bruger v3-plugin-formatet.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle billedværktøjer