Optimitzador d'SVG

Funcionament de l'optimització de fitxers SVG

L'Optimitzador d'SVG és una eina dissenyada per netejar i reduir la mida del codi SVG sense alterar l'aparença visual de la imatge gràfica. El procés es basa a rebre codi SVG integrat normal, processar-lo directament al navegador de l'usuari i eliminar-ne els elements innecessaris que afegeixen pes al fitxer sense aportar valor a la representació visual.

Quan s'introdueix el codi a l'àrea d'entrada, l'eina analitza l'estructura XML de l'SVG. Un cop finalitzat el procés, es mostren les dades comparatives de pes i es permet copiar o descarregar el codi resultant ja reduït. Si l'usuari neteja l'entrada o modifica el codi durant una optimització en curs, el procés s'atura immediatament per processar la nova acció.

Seguretat i privadesa en el processament de dades

La privadesa de les dades és un factor clau en el disseny d'aquesta eina. El codi SVG s'optimitza al navegador. No es puja res a BroBroGo.

Aquesta arquitectura d'execució local garanteix que la informació dels gràfics i el codi font associat no es transmetin a servidors externs. A més, per motius de seguretat en l'anàlisi de dades XML, l'eina bloqueja de manera estricta qualsevol fitxer SVG que contingui declaracions de tipus de document (DOCTYPE) o entitats personalitzades. Aquesta mesura evita vulnerabilitats de seguretat habituals en el processament de fitxers XML en aplicacions web.

Elements que s'eliminen i es conserven durant la neteja

L'optimització es realitza sota un criteri de conservació visual i estructural estricte, aplicant una neteja segura que redueix l'espai sense trencar la compatibilitat del gràfic.

L'eina actua sobre els següents elements del codi:

• Comentaris i metadades: S'eliminen les anotacions de text i les dades de creació generades pels programes de disseny.
• Espais de noms de l'editor: Es netegen els atributs i etiquetes propis de programes com Inkscape o Adobe Illustrator que no són necessaris per a la renderització web.
• Espais addicionals d'atributs: Es suprimeixen els espais en blanc redundants dins de les etiquetes XML.
• Espais de noms no utilitzats: S'eliminen les declaracions de vocabularis XML que no es fan servir en el document.
• Colors equivalents més curts: Es transformen els valors de color a la seva expressió hexadecimal o de text més curta possible (per exemple, convertint valors de color de format llarg a equivalents de tres caràcters o noms més breus).

Per contra, per garantir que el gràfic no perdi funcionalitat ni es deformi, l'optimitzador manté completament intactes els següents components:

• El viewBox original, assegurant que l'escalabilitat del gràfic no es vegi afectada.
• Els identificadors (ID) i les etiquetes, necessaris per a la interacció mitjançant CSS o JavaScript.
• La geometria de tots els elements i camins.
• L'eina evita explícitament la reescriptura de camins, el canvi de nom d'identificadors, l'eliminació de viewBox i l'arrodoniment de precisió.

Gestió d'errors i límits del sistema

El sistema compta amb un conjunt de regles de validació per garantir l'estabilitat del navegador durant el processament. Si el codi introduït no compleix els requisits, l'eina mostra missatges d'error específics:

• Entrada buida: Si s'intenta optimitzar sense haver introduït text, es mostra el missatge: "Enganxeu primer el codi SVG.".
• Format no vàlid: Si el text introduït no conté cap etiqueta o estructura d'SVG, es mostra l'error: "No s'ha trobat cap element <svg>.".
• Declaracions bloquejades: Si es detecta un tipus de document o entitats personalitzades, es mostra el missatge: "Aquest SVG utilitza un tipus de document o una entitat personalitzada. Elimineu-los abans d'optimitzar.".
• Mida excedida: L'SVG ha d'estar per sota d'un límit màxim de caràcters. Si se supera aquest límit, es mostra l'error: "Aquest SVG és massa gran per a aquesta eina. Mantingueu-lo per sota dels {max} caràcters.".
• Temps d'espera esgotat: Si el procés d'optimització és extremadament complex i supera els 15 segons, l'eina s'atura i mostra el missatge: "El procés ha trigat massa i s'ha aturat; proveu-ho amb un SVG més petit.".
• Error genèric: En cas de fallada inesperada en l'anàlisi, es mostra: "No s'ha pogut optimitzar aquest SVG.".

Mètriques de rendiment i resultats

Un cop completat el procés amb èxit, l'eina calcula i mostra les dades de rendiment de l'optimització a través de tres indicadors clau:

1. Original: Mostra la mida del fitxer SVG original expressada en bytes.
2. Resultat: Mostra la mida del codi SVG optimitzat en bytes.
3. Estalviat: Detalla la quantitat d'espai que s'ha reduït, expressada tant en bytes com en percentatge.

Si l'optimització redueix la mida del fitxer, es mostra el missatge d'èxit: "Optimitzat: un {pct}% més petit (s'han estalviat {saved}).". En cas que el codi ja estigués completament optimitzat i la neteja segura no hagi pogut reduir-ne més el pes, es mostra el missatge: "Optimitzat. No s'ha reduït la mida amb la configuració de neteja segura.".

Preguntes freqüents

Què s'elimina?

Elimina comentaris, metadades, espais de noms de l'editor, espais addicionals d'atributs, espais de noms no utilitzats i colors equivalents més curts. Manté intactes el viewBox, els identificadors, les etiquetes i la geometria.

Pot optimitzar qualsevol SVG?

Gestiona codi SVG integrat normal. Els fitxers SVG amb declaracions de tipus de document o d'entitats personalitzades es bloquegen perquè poden fer que l'anàlisi no sigui segura. Elimineu aquestes declaracions i torneu-ho a provar.

Canviarà l'aspecte del gràfic?

L'optimitzador evita la reescriptura de camins, el canvi de nom d'identificadors, l'eliminació de viewBox i l'arrodoniment de precisió. Si el vostre SVG depèn de comentaris o metadades per al flux de treball de disseny, conserveu-ne una còpia de l'original.