SVG-optimeringsværktøj

SVG-kodens struktur og overflødige data

En SVG-fil (Scalable Vector Graphics) er i sin grundform et XML-baseret dokument, der beskriver todimensionel vektorgrafik. Fordi formatet er tekstbaseret, indeholder det ofte mange elementer, som er nødvendige under designprocessen i programmer som Adobe Illustrator, Figma eller Inkscape, men som er fuldstændig overflødige, når grafikken skal vises på en hjemmeside.

Når en designer eksporterer en SVG, tilføjer designsoftwaren typisk metadata, editor-namespaces, kommentarer og komplekse XML-deklarationer. Disse data fylder op i kildekoden uden at bidrage til det visuelle resultat på skærmen. Ved at fjerne disse unødvendige elementer kan filstørrelsen reduceres markant, hvilket gør koden renere og mere effektiv at arbejde med for webudviklere.

Hvorfor SVG-optimering forbedrer webperformance

I moderne webudvikling spiller indlæsningshastighed en afgørende rolle for både brugeroplevelsen og søgemaskineoptimering (SEO). SVG-filer bruges i stor stil til ikoner, logoer og illustrationer, fordi de kan skaleres uendeligt uden tab af kvalitet. Hvis en hjemmeside indlæser mange uoptimerede SVG-filer, akkumuleres den overflødige kode, hvilket øger den samlede mængde data, som brugerens browser skal hente og tolke.

Optimering af SVG-filer reducerer båndbreddeforbruget og sikrer, at browseren hurtigere kan parse og rendre grafikken. Dette er især vigtigt for mobilbrugere på langsomme netværksforbindelser, hvor hvert sparet byte bidrager til en hurtigere og mere responsiv oplevelse.

Sikker og tabsfri oprydning af vektorgrafik

Dette værktøj udfører en sikker og tabsfri optimering af din SVG-kode. Det betyder, at filstørrelsen reduceres, uden at der ændres på grafikkens visuelle udseende. Værktøjet opnår dette ved at følge en række præcise regler for, hvad der kan fjernes, og hvad der skal bevares:

• Hvad der fjernes: Værktøjet fjerner kommentarer, metadata, editor-namespaces, overflødige attribut-mellemrum, ubrugte namespaces samt omdanner farvekoder til kortere, ækvivalente værdier (f.eks. kortere hex-koder).
• Hvad der bevares: For at sikre, at grafikken ikke går i stykker, bevares viewBox, ID'er, labels og selve geometriens struktur.
• Hvad der undgås: Værktøjet afstår fra at omskrive stier (paths), omdøbe ID'er, fjerne viewBox eller udføre aggressiv afrunding af præcision. Dette forhindrer, at kurver deformeres, eller at CSS- og JavaScript-interaktioner, der er bundet til specifikke ID'er, holder op med at fungere.

Sådan fungerer optimeringsprocessen i browseren

Når du bruger dette SVG-optimeringsværktøj, foregår hele processen lokalt på din computer. Din SVG-kode optimeres direkte i din browser, og intet uploades til BroBroGo. Dette sikrer, at dine data forbliver på din egen enhed under hele processen.

Du indsætter blot din rå SVG-kode i inputfeltet. Værktøjet analyserer koden, fjerner de overflødige XML-komponenter og leverer den optimerede kode med det samme. Hvis du ændrer i inputtet eller rydder feltet under en igangværende proces, vil optimeringen øjeblikkeligt blive afbrudt.

Efter en fuldført optimering præsenterer værktøjet resultatet med følgende data:

• Original: Størrelsen på den oprindelige SVG i bytes.
• Resultat: Størrelsen på den optimerede SVG i bytes.
• Sparet: Den nøjagtige mængde plads, der er sparet, angivet i både bytes og procent.

Fejlhåndtering og begrænsninger

For at beskytte systemet og sikre en stabil kørsel i browseren er der indbygget en række valideringer og begrænsninger i værktøjet:

• Tomt input: Hvis du forsøger at optimere uden at have indsat kode, vises beskeden "Indsæt SVG-kode først.".
• Manglende SVG-element: Hvis koden ikke indeholder et gyldigt SVG-element, returneres fejlen "Der blev ikke fundet noget <svg>-element.".
• Sikkerhedsblokering: SVG-filer, der indeholder en dokumenttype (doctype) eller en brugerdefineret entitetserklæring, blokeres af sikkerhedsmæssige årsager. I disse tilfælde vises fejlen "Denne SVG bruger en dokumenttype (doctype) eller en brugerdefineret entitet. Fjern den før optimering.". Dette forhindrer potentielle sårbarheder relateret til parsing af eksterne XML-entiteter.
• Størrelsesbegrænsning: SVG-koden skal holdes under en specifik tegngrænse. Hvis denne grænse overskrides, vises beskeden "Denne SVG er for stor til dette værktøj. Hold den under {max} tegn.".
• Timeout: Hvis optimeringen tager for lang tid og overskrider 15 sekunder, afbrydes processen med fejlen "Det tog for lang tid og blev afbrudt – prøv med en mindre SVG.".
• Ingen besparelse: Hvis koden allerede er fuldt optimeret, og der ikke kan spares yderligere plads med de sikre indstillinger, vises beskeden "Optimeret. Der blev ikke sparet noget på filstørrelsen med de valgte indstillinger for sikker oprydning.".
• Generel fejl: Ved uforudsete problemer under parsingen vises beskeden "Kunne ikke optimere denne SVG.".

Ofte stillede spørgsmål (FAQ)

Hvad fjerner værktøjet?

Det fjerner kommentarer, metadata, editor-namespaces, overflødige attribut-mellemrum, ubrugte namespaces og omdanner farver til kortere ækvivalenter. Det bevarer viewBox, ID'er, labels og selve geometrien.

Kan værktøjet optimere alle SVG-filer?

Den håndterer normal indlejret SVG-kode. SVG-filer med dokumenttyper (doctype) eller brugerdefinerede entitetserklæringer blokeres, da disse kan gøre parsing usikker. Fjern disse erklæringer og prøv igen.

Vil det ændre på, hvordan grafikken ser ud?

Optimeringsværktøjet undgår at omskrive stier (paths), omdøbe ID'er, fjerne viewBox og afrunde præcision for aggressivt. Hvis din SVG afhænger af kommentarer eller metadata til dit design-workflow, bør du beholde en kopi af originalen.

Sendes min SVG-kode til en ekstern server?

Nej, din SVG-kode optimeres direkte i din browser. Intet uploades til BroBroGo, hvilket betyder, at behandlingen sker lokalt på din egen enhed.