Utilia
Kategooriad ▾
Keel: et ▾

SVG-optimeerija

Optimeeri ja minimeeri SVG-faile SVGO-ga otse brauseris. Vali eelseadistus, võrdle tulemust visuaalselt ning vaata suuruse ja gzipi kokkuhoidu.

Pluginad

viewBox'i eemaldamine takistab joonistuse skaleerumist ning ID-de lühendamine või eemaldamine rikub neile viitavad CSS-i, JavaScripti, <use> või ankrulingid. Hoia eelseadistus Ohutu koodis, spraitides või animatsioonides kasutatavate SVG-de jaoks.

Kuidas SVG-d optimeerida

  1. Lohista SVG-fail tõmbealale või klõpsa sellel valimiseks. Võid kleepida koodi ka kasti SVG-kood.
  2. Vali Eelseadistus: Ohutu, Tasakaalustatud (vaikimisi) või Maksimaalne. Allolev loend Pluginad näitab täpselt, millised sammud iga eelseadistus sisse lülitab.
  3. Vajaduse korral kohanda: Kümnendkohtade täpsus (0–8 numbrit), Mitu läbimist ja Kenasti vormindatud (taandega väljund), kui tahad loetavat koodi. Niipea kui muudad pluginat, täpsust või läbimisi, lülitub eelseadistus väärtusele Oma.
  4. Klõpsa Optimeeri SVG. Allalaaditud fail optimeeritakse kohe ja kui tulemus on olemas, käivitab iga seadete muutus optimeerimise automaatselt uuesti.
  5. Vaata arve Originaali suurus, Optimeeritud suurus, Kokkuhoid ja Gzipitud, seejärel võrdle kahte joonistust kõrvuti.
  6. Klõpsa Kopeeri, et kopeerida Optimeeritud SVG-kood, või Laadi optimeeritud SVG alla, et salvestada see nimega name.min.svg.

Optimeerimise teeb SVGO 4, standardne avatud lähtekoodiga (MIT) SVG-optimeerija, mida kasutab enamik veebi ehitustööriistu. Selle brauseriversioon laaditakse esimesel klõpsul ja see töötab täielikult sinu seadmes: sinu SVG-d ei laadita kunagi üles.

Miks kujundustööriistade SVG-failid on nii rasked

Illustratorist, Inkscape’ist, Figmast või Sketchist eksporditud SVG kannab palju enamat kui joonistust. Redaktorid lisavad oma nimeruumid ja atribuudid (kihinimed, juhtjooned, ekspordiseaded), <metadata> ploki, kommentaarid nagu „Generator: Adobe Illustrator“, kuue või enama kümnendkohaga koordinaadid, rühmad, mis sisaldavad ühte elementi, ja mahukad värvid nagu #ffffff. Miski neist ei muuda seda, mida brauser joonistab. SVGO eemaldab selle, ümardab arvud, kirjutab teeandmed ümber lühemate käskudega, lühendab värve ning ühendab või lahti pakib üleliigsed elemendid. Eksporditud ikoonide ja illustratsioonide puhul on tavaline 40–60% vähenemine.

Eelseadistused ja riskantsed pluginad

  • Ohutu käivitab SVGO vaikeeelseadistuse, kuid säilitab ID-d, <desc>, eraldi teed ja <style> reeglid, 3 kümnendkoha ja ühe läbimisega. Kasuta seda CSS-ist või JavaScriptist viidatud SVG-de, spraitide ja animatsioonide jaoks.
  • Tasakaalustatud on SVGO vaikeeelseadistus, 3 kümnendkohta, mitu läbimist. See sobib enamikule piltidena kuvatavatele ikoonidele ja illustratsioonidele.
  • Maksimaalne lisab Eemalda </strong>, <strong>Eemalda skriptid ja sündmuseatribuudid</strong>, <strong>Eemalda width/height (viewBox jääb)</strong> ja <strong>Asenda xlink:href atribuudiga href</strong>, 2 kümnendkoha ja mitme läbimisega.</li> </ul> <p>Ükski eelseadistus ei eemalda viewBox’i. <strong>Eemalda viewBox</strong> on olemas ainult erijuhtude jaoks: ilma selleta ei saa joonistus enam skaleeruda suurusele, mille CSS-is annad.</p> <p>Tea, mida teised pluginad rikkuda võivad:</p> <ul> <li><strong>Lühenda ja eemalda kasutamata ID-d</strong> nimetab ID-d nagu <code>#icon-home</code> ümber nimeks <code>a</code>. Iga CSS-valija, JavaScripti päring, <code><use href="#…"></code> spraidiviide, lehe ankur või SMIL-i/CSS-i animatsioon, mis sihtis vana nime, lakkab töötamast.</li> <li><strong>Eemalda <title></strong> ja <strong>Eemalda <desc></strong> kustutavad ligipääsetava nime ja kirjelduse. Hoia need olulistel ikoonidel ja diagrammidel, mida ekraanilugejad peavad teatama.</li> <li>Madal <strong>Kümnendkohtade täpsus</strong> võib väikesi ikoone moonutada: kõverad võbelevad ja servad nihkuvad. Kontrolli alati visuaalset võrdlust; 3 on ohutu vaikeväärtus.</li> <li><strong>Ühenda teed</strong> ühendab kõrvuti teed üheks, seega kaotab hõljutusefekt või animatsioon, mis sihtis ühte teed, oma sihtmärgi.</li> </ul> <h2>Näpunäiteid</h2> <ul> <li>Hoia redigeerimiseks alles optimeerimata põhikoopia; kohtle faili <code>.min.svg</code> nagu kompileeritud koodi.</li> <li>Luba oma serveris gzip või brotli: tekstivormingud nagu SVG tihenduvad väga hästi ja näitaja <strong>Gzipitud</strong> näitab, mida külastajad tegelikult alla laadivad (kuvatakse, kui sinu brauser toetab <code>CompressionStream</code>-i).</li> <li>Sisseehitatud SVG-d saab CSS-iga kujundada ja animeerida, kuid seda ei panda eraldi vahemällu; SVG elemendis <code><img></code> läheb vahemällu, kuid seda ei saa lehelt kujundada.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Korduma kippuvad küsimused</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Kas minu SVG laaditakse serverisse üles?</summary> <div class="prose px-5 pb-5"><p>Ei. SVGO töötab sinu brauseris. Ainus allalaadimine on optimeerija kood ise, esimesel optimeerimisel.</p></div> </details> <details class="faq group"> <summary>Miks eelvaade kuvatakse piltidena?</summary> <div class="prose px-5 pb-5"><p>SVG on dokumendivorming, mis võib sisaldada JavaScripti ja laadida väliseid faile. Mõlemad eelvaated renderdatakse <code><img></code>-ina kohalikelt blob-URL-idelt ja selles režiimis brauserid ei käivita kunagi skripte ega too väliseid ressursse, seega on ebausaldusväärse SVG eelvaatlus siin ohutu. Optimeeritud kood ise sisaldab skripte endiselt, kui <strong>Eemalda skriptid ja sündmuseatribuudid</strong> pole sees (<strong>Maksimaalne</strong> puhul on).</p></div> </details> <details class="faq group"> <summary>Minu optimeeritud SVG ei skaleeru enam. Mis juhtus?</summary> <div class="prose px-5 pb-5"><p>viewBox eemaldati tõenäoliselt kas valikuga <strong>Eemalda viewBox</strong> või varem mõne teise tööriistaga. Optimeeri originaal uuesti, kui see plugin on väljas.</p></div> </details> <details class="faq group"> <summary>Miks minu ikoonide sprait või animatsioon lakkas töötamast?</summary> <div class="prose px-5 pb-5"><p><strong>Lühenda ja eemalda kasutamata ID-d</strong> või <strong>Ühenda teed</strong> muutis elemente, millele sinu kood viitab. Kasuta eelseadistust <strong>Ohutu</strong>, mis säilitab mõlemad.</p></div> </details> <details class="faq group"> <summary>Optimeeritud fail ei ole väiksem. Miks?</summary> <div class="prose px-5 pb-5"><p>SVG on tõenäoliselt juba minimeeritud. Proovi <strong>Maksimaalne</strong> või väiksemat <strong>Kümnendkohtade täpsus</strong> ja lülita <strong>Kenasti vormindatud (taandega väljund)</strong> välja.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Seotud tööriistad</h2> <ul class="card-grid mt-4"><li><a class="card" href="/et/svg-png-ks/"> <span class="card-title">SVG PNG-ks</span> <span class="card-text">Teisenda SVG PNG-, JPG- või WebP-vormingusse brauseris mis tahes laiuse, kõrguse, mõõtkava või DPI-ga, läbipaistva või värvilise taustaga. Üleslaadimiseta.</span> </a></li> <li><a class="card" href="/et/pilt-svg-ks/"> <span class="card-title">Pilt SVG-ks jälgija</span> <span class="card-text">Muuda PNG- või JPG-logo või joonistus SVG vektorjoonteks otse brauseris. Eelseadistused, värvide arv ja laikude filter, turvaline eelvaade, üleslaadimiseta.</span> </a></li> <li><a class="card" href="/et/pildipakkija/"> <span class="card-title">Pildipakkija</span> <span class="card-text">Paki JPG-, PNG- ja WebP-pilte kvaliteediliuguriga, võrdle suurusi enne ja pärast ning töötle fotosid mitu korraga ilma neid üles laadimata.</span> </a></li> <li><a class="card" href="/et/css-vormindaja/"> <span class="card-title">CSS-i vormindaja ja minimeerija</span> <span class="card-text">Kaunista segane CSS puhta taandega või minimeeri see csso-ga ning vaata mahtu enne ja pärast. Töötab sinu brauseris, midagi ei saadeta serverisse.</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="Reklaam"><span class="ad-label">Reklaam</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">Tasuta veebitööriistad, mis töötavad sinu brauseris. Sinu andmed jäävad sinu seadmesse.</p> </div> <nav aria-label="Kategooriad"> <p class="font-semibold">Tööriistad</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/et/tekstitooriistad/">Tekstitööriistad</a></li><li><a class="link-muted" href="/et/arendajatooriistad/">Arendajatööriistad</a></li><li><a class="link-muted" href="/et/veeb-seo-turundus/">Veeb, SEO ja turundus</a></li><li><a class="link-muted" href="/et/varvid-ja-disain/">Värvid ja disain</a></li><li><a class="link-muted" href="/et/pilditooriistad/">Pilditööriistad</a></li><li><a class="link-muted" href="/et/pdf-ja-dokumendid/">PDF ja dokumendid</a></li><li><a class="link-muted" href="/et/matemaatikakalkulaatorid/">Matemaatikakalkulaatorid</a></li><li><a class="link-muted" href="/et/finantskalkulaatorid/">Finantskalkulaatorid</a></li><li><a class="link-muted" href="/et/kuupaev-ja-kellaaeg/">Kuupäev ja kellaaeg</a></li><li><a class="link-muted" href="/et/uhikumuundurid/">Ühikumuundurid</a></li><li><a class="link-muted" href="/et/tervis-ja-trenn/">Tervis ja trenn</a></li><li><a class="link-muted" href="/et/kodu-kook-auto/">Kodu, köök ja auto</a></li><li><a class="link-muted" href="/et/generaatorid/">Generaatorid</a></li><li><a class="link-muted" href="/et/seadme-ja-brauseritestid/">Seadme- ja brauseritestid</a></li><li><a class="link-muted" href="/et/heli-ja-video/">Heli ja video</a></li><li><a class="link-muted" href="/et/oppimine-ja-keeled/">Õppimine ja keeled</a></li><li><a class="link-muted" href="/et/mangud/">Mängud</a></li></ul> </nav> <nav aria-label="Teave"> <p class="font-semibold">Teave</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/et/meist/">Meist</a></li> <li><a class="link-muted" href="/et/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/et/privaatsuspoliitika/">Privaatsuspoliitika</a></li> <li><a class="link-muted" href="/et/kasutustingimused/">Kasutustingimused</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>