Hvordan SVG-optimalisering fungerer
SVG (Scalable Vector Graphics) er et XML-basert format som beskriver todimensjonal vektorgrafikk. Siden SVG-filer i praksis er tekstfiler skrevet i XML, inneholder de ofte mye data som ikke er nødvendig for å vise selve grafikken i en nettleser.
Dette verktøyet analyserer SVG-koden du limer inn, og fjerner overflødige elementer uten at det visuelle utseendet til grafikken endres. Prosessen foregår lokalt i nettleseren din, noe som betyr at koden din ikke lastes opp til BroBroGo. Verktøyet fjerner kommentarer, metadata, redigeringsnavnerom (namespaces), ekstra mellomrom i attributter, ubrukte navnerom og konverterer fargekoder til kortere ekvivalente farger der det er mulig.
For å sikre at grafikken ikke blir ødelagt, beholder optimaliseringen viktige strukturelle elementer intakt. Verktøyet unngår å skrive om baner (paths), endre ID-navn, fjerne viewBox eller utføre uforutsigbar avrunding av tallpresisjon. Dette gir en trygg og tapsfri opprydding av koden.
Hvorfor filstørrelse på SVG har betydning for nettsteder
Når du bruker SVG-bilder på moderne nettsider, enten som eksterne filer eller som inline-kode direkte i HTML-dokumentet, påvirker filstørrelsen nettstedets ytelse. Store SVG-filer med unødvendig kode øker den totale mengden data som må overføres over nettverket, noe som kan føre til tregere innlastingstid og en dårligere brukeropplevelse.
For front-end-utviklere og designere er det spesielt viktig å optimalisere inline-ikoner og illustrasjoner. Hvert ekstra tegn, hver kommentar fra grafiske redigeringsprogrammer som Adobe Illustrator eller Inkscape, og hvert unødvendige navnerom øker størrelsen på HTML-dokumentet. Ved å fjerne disse uvesentlige dataene reduseres parsingtiden i nettleseren, slik at siden rendres raskere.
Begrensninger og sikkerhetsregler for inndata
For å sikre stabil og trygg prosessering har verktøyet noen definerte regler for hva slags SVG-kode som godtas:
- Maksimal lengde: SVG-koden må være under en bestemt tegngrense. Hvis koden overskrider denne grensen, vil verktøyet stoppe og vise feilmeldingen:
Denne SVG-en er for stor for dette verktøyet. Hold den under {max} tegn.. - Dokumenttyper og entiteter: SVG-filer som inneholder dokumenttype-deklarasjoner (doctype) eller egendefinerte XML-entiteter blokkeres. Dette gjøres av sikkerhetshensyn for å forhindre sårbarheter knyttet til parsing av eksterne XML-entiteter i webapplikasjoner. Hvis slike elementer oppdages, vises feilmeldingen:
Denne SVG-en bruker en dokumenttype eller en egendefinert entitet. Fjern dette før du optimaliserer.. - Tidsavbrudd: Hvis en optimalisering tar for lang tid (over 15 sekunder), avbrytes prosessen med meldingen:
Det tok for lang tid og ble avbrutt – prøv en mindre SVG-fil..
Tolking av resultater og feilmeldinger
Når du har limt inn koden og startet prosessen, vil verktøyet gi tilbakemelding basert på resultatet av optimaliseringen:
| Felt / Melding | Beskrivelse |
|---|---|
| Original | Størrelsen på den opprinnelige SVG-koden målt i bytes. |
| Resultat | Størrelsen på den ferdig optimaliserte SVG-koden i bytes. |
| Spart | Mengden plass som ble spart, oppgitt i bytes og prosent. |
Optimalisert – {pct} % mindre ({saved} spart). |
Vises når optimaliseringen er fullført og filstørrelsen ble redusert. |
Optimalisert. Ingen størrelse ble spart med gjeldende innstillinger for sikker opprydding. |
Vises dersom koden allerede var maksimalt optimalisert, slik at ingen bytes ble spart. |
Kunne ikke optimalisere denne SVG-en. |
Generell feilmelding dersom noe går galt under prosesseringen. |
Lim inn SVG-kode først. |
Vises hvis du forsøker å optimalisere et tomt inndatafelt. |
Fant ikke noe <svg>-element. |
Vises dersom teksten som er limt inn ikke inneholder gyldig SVG-kode. |
Dersom du endrer innholdet i inndatafeltet eller tømmer det under en pågående prosess, vil den aktive optimaliseringen umiddelbart avbrytes.
Ofte stilte spørsmål
Hva er det som fjernes?
Den fjerner kommentarer, metadata, redigeringsnavnerom (namespaces), ekstra mellomrom i attributter, ubrukte navnerom og kortere ekvivalente farger. Den beholder viewBox, ID-er, etiketter og geometri intakt.
Kan den optimalisere alle SVG-filer?
Den håndterer vanlig innebygd SVG-kode. SVG-filer med dokumenttype (doctype) eller egendefinerte entitetserklæringer blokkeres fordi disse kan gjøre tolkingen usikker. Fjern disse erklæringene og prøv igjen.
Vil den endre hvordan grafikken ser ut?
Optimalisereren unngår å skrive om baner (paths), endre ID-navn, fjerne viewBox og avrunde presisjon for mye. Hvis SVG-en din er avhengig av kommentarer eller metadata for en designarbeidsflyt, bør du beholde en kopi av originalen.
Blir SVG-koden min lagret på en server?
Nei, SVG-koden din optimaliseres lokalt i nettleseren din. Ingenting sendes til BroBroGo.