El meu SVG es puja a un servidor?

No. SVGO s'executa al teu navegador. L'única baixada és el codi de l'optimitzador mateix, la primera vegada que optimitzes.

Per què la vista prèvia es mostra com a imatges?

L'SVG és un format de document que pot contenir JavaScript i carregar fitxers externs. Les dues vistes prèvies es mostren com a <img des d'URL blob locals, i en aquest mode els navegadors no executen mai scripts ni obtenen recursos externs, de manera que previsualitzar aquí un SVG que no és de confiança és segur. El codi optimitzat en si encara conté els scripts tret que Elimina els scripts i els atributs d'esdeveniments estigui activat ho està a Màxim .

El meu SVG optimitzat ja no s'escala. Què ha passat?

Probablement s'ha eliminat el viewBox, ja sigui amb Elimina el viewBox o abans amb una altra eina. Torna a optimitzar l'original amb aquest connector desactivat.

Per què ha deixat de funcionar el meu sprite d'icones o la meva animació?

Escurça i elimina els ID no utilitzats o Combina els traçats han canviat els elements als quals es refereix el teu codi. Fes servir el perfil Segur , que conserva tots dos.

El fitxer optimitzat no és més petit. Per què?

Probablement l'SVG ja està minimitzat. Prova Màxim o una Precisió decimal més baixa, i desactiva Format llegible sortida amb sagnat .

Optimitzador d'SVG en línia – Minimitza i neteja el codi

Optimitza i minimitza fitxers SVG en línia amb SVGO, al navegador. Tria un perfil, compara visualment el resultat i consulta l'estalvi de mida i de gzip.

Com optimitzar un SVG

Deixa anar un fitxer SVG a la zona de càrrega o fes-hi clic per triar-ne un. També pots enganxar el marcatge al quadre Codi SVG.
Tria un Perfil: Segur, Equilibrat (el predeterminat) o Màxim. La llista de Connectors que hi ha a sota mostra exactament quins passos activa cada perfil.
Ajusta si cal: la Precisió decimal (de 0 a 8 dígits), Diverses passades i Format llegible (sortida amb sagnat) si vols codi llegible. Quan canvies un connector, la precisió o les passades, el perfil passa a Personalitzat.
Fes clic a Optimitza l’SVG. Un fitxer que has deixat anar s’optimitza a l’instant i, quan ja hi ha un resultat, cada canvi de configuració torna a executar l’optimització automàticament.
Revisa les xifres de Mida original, Mida optimitzada, Estalvi i Amb gzip, i compara els dos dibuixos un al costat de l’altre.
Fes clic a Copia per copiar el Codi SVG optimitzat, o a Baixa l’SVG optimitzat per desar-lo com a nom.min.svg.

L’optimització la fa SVGO 4, l’optimitzador d’SVG estàndard de codi obert (MIT) que s’utilitza en la majoria d’eines de compilació web. La versió per al navegador es carrega la primera vegada que hi fas clic, i s’executa íntegrament al teu dispositiu: el teu SVG no es puja mai.

Per què els fitxers SVG de les eines de disseny pesen tant

Un SVG exportat d’Illustrator, Inkscape, Figma o Sketch porta molt més que el dibuix. Els editors afegeixen els seus propis espais de noms i atributs (noms de capes, guies, paràmetres d’exportació), un bloc <metadata>, comentaris com «Generator: Adobe Illustrator», coordenades amb sis o més decimals, grups que contenen un sol element i colors llargs com #ffffff. Res d’això canvia el que dibuixa el navegador. SVGO ho elimina, arrodoneix els números, reescriu les dades dels traçats amb ordres més curtes, escurça els colors i combina o desfà els elements redundants. És habitual una reducció del 40–60 % en icones i il·lustracions exportades.

Perfils i connectors arriscats

Segur executa el perfil per defecte de SVGO però conserva els ID, <desc>, els traçats separats i les regles de <style>, amb 3 decimals i una passada. Fes-lo servir per a SVG als quals es fa referència des de CSS o JavaScript, sprites i animacions.
Equilibrat és el perfil per defecte de SVGO, amb 3 decimals i diverses passades. Va bé per a la majoria d’icones i il·lustracions que es mostren com a imatges.
Màxim hi afegeix Elimina </strong>, <strong>Elimina els scripts i els atributs d’esdeveniments</strong>, <strong>Elimina width/height (conserva el viewBox)</strong> i <strong>Substitueix xlink:href per href</strong>, amb 2 decimals i diverses passades.</li> </ul> <p>Cap perfil elimina el viewBox. <strong>Elimina el viewBox</strong> només hi és per a casos especials: sense ell, el dibuix ja no es pot escalar a la mida que li dones amb CSS.</p> <p>Cal saber què poden trencar els altres connectors:</p> <ul> <li><strong>Escurça i elimina els ID no utilitzats</strong> canvia el nom d’ID com <code>#icon-home</code> per <code>a</code>. Qualsevol selector CSS, consulta de JavaScript, referència de sprite <code><use href="#…"></code>, àncora de pàgina o animació SMIL/CSS que apunti al nom antic deixa de funcionar.</li> <li><strong>Elimina <title></strong> i <strong>Elimina <desc></strong> esborren el nom i la descripció accessibles. Conserva’ls en les icones i gràfics amb significat que els lectors de pantalla han d’anunciar.</li> <li>Una <strong>Precisió decimal</strong> baixa pot deformar les icones petites: les corbes tremolen i les vores es desplacen. Comprova sempre la comparació visual; 3 és un valor per defecte segur.</li> <li><strong>Combina els traçats</strong> uneix traçats adjacents en un de sol, de manera que un efecte de ratolí o una animació que apuntava a un sol traçat perd el seu objectiu.</li> </ul> <h2>Consells</h2> <ul> <li>Conserva una còpia mestra sense optimitzar per editar; tracta el <code>.min.svg</code> com a codi compilat.</li> <li>Activa gzip o brotli al servidor: els formats de text com l’SVG es comprimeixen molt bé, i la xifra <strong>Amb gzip</strong> mostra el que els visitants baixen de debò (es mostra quan el navegador admet <code>CompressionStream</code>).</li> <li>L’SVG en línia es pot estilitzar amb CSS i animar, però no es desa a la memòria cau per separat; un SVG dins d’<code><img></code> es desa a la memòria cau però no es pot estilitzar des de la pàgina.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Preguntes freqüents</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>El meu SVG es puja a un servidor?</summary> <div class="prose px-5 pb-5"><p>No. SVGO s’executa al teu navegador. L’única baixada és el codi de l’optimitzador mateix, la primera vegada que optimitzes.</p></div> </details> <details class="faq group"> <summary>Per què la vista prèvia es mostra com a imatges?</summary> <div class="prose px-5 pb-5"><p>L’SVG és un format de document que pot contenir JavaScript i carregar fitxers externs. Les dues vistes prèvies es mostren com a <code><img></code> des d’URL blob locals, i en aquest mode els navegadors no executen mai scripts ni obtenen recursos externs, de manera que previsualitzar aquí un SVG que no és de confiança és segur. El codi optimitzat en si encara conté els scripts tret que <strong>Elimina els scripts i els atributs d’esdeveniments</strong> estigui activat (ho està a <strong>Màxim</strong>).</p></div> </details> <details class="faq group"> <summary>El meu SVG optimitzat ja no s'escala. Què ha passat?</summary> <div class="prose px-5 pb-5"><p>Probablement s’ha eliminat el viewBox, ja sigui amb <strong>Elimina el viewBox</strong> o abans amb una altra eina. Torna a optimitzar l’original amb aquest connector desactivat.</p></div> </details> <details class="faq group"> <summary>Per què ha deixat de funcionar el meu sprite d'icones o la meva animació?</summary> <div class="prose px-5 pb-5"><p><strong>Escurça i elimina els ID no utilitzats</strong> o <strong>Combina els traçats</strong> han canviat els elements als quals es refereix el teu codi. Fes servir el perfil <strong>Segur</strong>, que conserva tots dos.</p></div> </details> <details class="faq group"> <summary>El fitxer optimitzat no és més petit. Per què?</summary> <div class="prose px-5 pb-5"><p>Probablement l’SVG ja està minimitzat. Prova <strong>Màxim</strong> o una <strong>Precisió decimal</strong> més baixa, i desactiva <strong>Format llegible (sortida amb sagnat)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Eines relacionades</h2> <ul class="card-grid mt-4"><li><a class="card" href="/ca/svg-a-png/"> <span class="card-title">SVG a PNG</span> <span class="card-text">Converteix SVG a PNG, JPG o WebP al navegador amb qualsevol amplada, alçada, escala o DPI, amb fons transparent o de color. Per lots i ZIP, sense pujar res.</span> </a></li> <li><a class="card" href="/ca/imatge-a-svg/"> <span class="card-title">Vectoritzador d'imatge a SVG</span> <span class="card-text">Converteix un logotip o dibuix PNG o JPG en traçats vectorials SVG al navegador. Perfils, nombre de colors i filtre de taques, sense pujar res.</span> </a></li> <li><a class="card" href="/ca/compressor-imatges/"> <span class="card-title">Compressor d'imatges</span> <span class="card-text">Comprimeix imatges JPG, PNG i WebP amb un control de qualitat, compara les mides abans i després i processa fotos per lots sense pujar-les enlloc.</span> </a></li> <li><a class="card" href="/ca/formatador-css/"> <span class="card-title">Formatador i minimitzador de CSS</span> <span class="card-text">Embelleix CSS desordenat amb una sagnia neta o minimitza'l amb csso, i consulta la mida abans i després. Funciona al navegador; no es puja res.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Publicitat"><span class="ad-label">Publicitat</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Eines en línia gratuïtes que funcionen al navegador. Les teves dades es queden al teu dispositiu.</p> </div> <nav aria-label="Categories"> <p class="font-semibold">Eines</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/ca/eines-de-text/">Eines de text</a></li><li><a class="link-muted" href="/ca/eines-per-a-desenvolupadors/">Eines per a desenvolupadors</a></li><li><a class="link-muted" href="/ca/web-seo-i-marqueting/">Web, SEO i màrqueting</a></li><li><a class="link-muted" href="/ca/colors-i-disseny/">Colors i disseny</a></li><li><a class="link-muted" href="/ca/edicio-dimatges/">Edició d'imatges</a></li><li><a class="link-muted" href="/ca/pdf-i-documents/">PDF i documents</a></li><li><a class="link-muted" href="/ca/calculadores-de-matematiques/">Calculadores de matemàtiques</a></li><li><a class="link-muted" href="/ca/calculadores-financeres/">Calculadores financeres</a></li><li><a class="link-muted" href="/ca/data-i-hora/">Data i hora</a></li><li><a class="link-muted" href="/ca/convertidors-dunitats/">Convertidors d'unitats</a></li><li><a class="link-muted" href="/ca/calculadores-de-salut/">Salut i forma física</a></li><li><a class="link-muted" href="/ca/llar-bricolatge-cuina-cotxe/">Llar, bricolatge, cuina i cotxe</a></li><li><a class="link-muted" href="/ca/generadors/">Generadors</a></li><li><a class="link-muted" href="/ca/proves-de-dispositiu/">Proves de dispositiu i navegador</a></li><li><a class="link-muted" href="/ca/audio-i-video/">Àudio i vídeo</a></li><li><a class="link-muted" href="/ca/educacio-i-idiomes/">Educació i idiomes</a></li><li><a class="link-muted" href="/ca/jocs/">Jocs</a></li></ul> </nav> <nav aria-label="Informació"> <p class="font-semibold">Informació</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/ca/quant-a/">Quant a</a></li> <li><a class="link-muted" href="/ca/contacte/">Contacte</a></li> <li><a class="link-muted" href="/ca/privadesa/">Política de privadesa</a></li> <li><a class="link-muted" href="/ca/condicions-d-us/">Condicions d'ús</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>