Utilia
Kategoriat ▾
Kieli: fi ▾

SVG-optimoija

Optimoi ja pienennä SVG-tiedostoja verkossa SVGO:lla selaimessasi. Valitse esiasetus, vertaa tulosta visuaalisesti ja katso koon sekä gzip-pakkauksen säästö.

Liitännäiset

viewBoxin poistaminen estää piirroksen skaalautumisen, ja ID:iden lyhentäminen tai poistaminen rikkoo CSS-, JavaScript-, <use>- tai ankkurilinkit, jotka viittaavat niihin. Pidä Turvallinen-esiasetus käytössä koodissa, spriteissä tai animaatioissa käytettävillä SVG-tiedostoilla.

Näin optimoit SVG:n

  1. Pudota SVG-tiedosto pudotusalueelle tai valitse se napsauttamalla aluetta. Voit myös liittää koodin SVG-koodi-ruutuun.
  2. Valitse Esiasetus: Turvallinen, Tasapainoinen (oletus) tai Maksimi. Alla oleva Liitännäiset-luettelo näyttää tarkasti, mitkä vaiheet kukin esiasetus ottaa käyttöön.
  3. Säädä tarvittaessa Desimaalien tarkkuutta (0–8 numeroa), Useita kierroksia ja Muotoiltu tuloste (sisennetty), jos haluat luettavaa koodia. Heti kun muutat liitännäistä, tarkkuutta tai kierroksia, esiasetukseksi vaihtuu Oma.
  4. Napsauta Optimoi SVG. Pudotettu tiedosto optimoidaan heti, ja kun tulos on olemassa, jokainen asetusmuutos ajaa optimoinnin automaattisesti uudelleen.
  5. Tarkista Alkuperäinen koko, Optimoitu koko, Säästö ja Gzip-pakattuna -luvut ja vertaa sitten kahta piirrosta vierekkäin.
  6. Napsauta Kopioi, jos haluat kopioida Optimoidun SVG-koodin, tai Lataa optimoitu SVG, jos haluat tallentaa sen nimellä nimi.min.svg.

Optimoinnin tekee SVGO 4, vakioitu avoimen lähdekoodin (MIT) SVG-optimoija, jota käytetään useimmissa verkkokehityksen rakennustyökaluissa. Sen selainversio ladataan ensimmäisellä napsautuksella, ja se toimii kokonaan laitteellasi: SVG:täsi ei lähetetä palvelimelle.

Miksi suunnittelutyökalujen SVG-tiedostot ovat niin raskaita

Illustratorista, Inkscapesta, Figmasta tai Sketchistä viety SVG sisältää paljon muutakin kuin piirroksen. Editorit lisäävät omia nimiavaruuksiaan ja määritteitään (tasojen nimet, apuviivat, vientiasetukset), <metadata>-lohkon, kommentteja kuten ”Generator: Adobe Illustrator”, koordinaatteja kuudella tai useammalla desimaalilla, ryhmiä jotka sisältävät yhden elementin sekä sanallisia värejä kuten #ffffff. Mikään näistä ei muuta sitä, mitä selain piirtää. SVGO poistaa ne, pyöristää lukuja, kirjoittaa polkudatan lyhyemmillä komennoilla, lyhentää värit sekä yhdistää tai purkaa tarpeettomia elementtejä. Viedyillä kuvakkeilla ja kuvituksilla 40–60 %:n pienennys on tavallinen.

Esiasetukset ja riskialttiit liitännäiset

  • Turvallinen ajaa SVGO:n oletusesiasetuksen mutta säilyttää ID:t, <desc>-elementin, erilliset polut ja <style>-säännöt, 3 desimaalilla ja yhdellä kierroksella. Käytä sitä CSS:stä tai JavaScriptistä viitatuille SVG-tiedostoille, spriteille ja animaatioille.
  • Tasapainoinen on SVGO:n oletusesiasetus, 3 desimaalia ja useita kierroksia. Se sopii useimmille kuvina näytettäville kuvakkeille ja kuvituksille.
  • Maksimi lisää Poista </strong>, <strong>Poista skriptit ja tapahtumamääritteet</strong>, <strong>Poista width/height (säilytä viewBox)</strong> ja <strong>Korvaa xlink:href määritteellä href</strong>, 2 desimaalilla ja useilla kierroksilla.</li> </ul> <p>Mikään esiasetus ei poista viewBoxia. <strong>Poista viewBox</strong> on olemassa vain erikoistapauksia varten: ilman sitä piirros ei enää voi skaalautua CSS:ssä antamaasi kokoon.</p> <p>Tiedä, mitä muut liitännäiset voivat rikkoa:</p> <ul> <li><strong>Lyhennä ja poista käyttämättömät ID:t</strong> nimeää ID:t, kuten <code>#icon-home</code>, uudelleen muotoon <code>a</code>. Mikä tahansa CSS-valitsin, JavaScript-kysely, <code><use href="#…"></code>-spriteviittaus, sivun ankkuri tai vanhaa nimeä kohdistava SMIL-/CSS-animaatio lakkaa toimimasta.</li> <li><strong>Poista <title></strong> ja <strong>Poista <desc></strong> poistavat saavutettavan nimen ja kuvauksen. Säilytä ne merkityksellisissä kuvakkeissa ja kaavioissa, jotka ruudunlukijoiden täytyy ilmoittaa.</li> <li>Matala <strong>Desimaalien tarkkuus</strong> voi vääristää pieniä kuvakkeita: käyrät aaltoilevat ja reunat siirtyvät. Tarkista aina visuaalinen vertailu. 3 on turvallinen oletus.</li> <li><strong>Yhdistä polut</strong> liittää vierekkäiset polut yhdeksi, joten yhteen polkuun kohdistunut hover-efekti tai animaatio menettää kohteensa.</li> </ul> <h2>Vinkkejä</h2> <ul> <li>Säilytä optimoimaton pääkopio muokkausta varten ja kohtele <code>.min.svg</code>-tiedostoa kuin käännettyä koodia.</li> <li>Ota gzip tai brotli käyttöön palvelimellasi: tekstimuodot, kuten SVG, pakkautuvat erittäin hyvin, ja <strong>Gzip-pakattuna</strong>-luku näyttää, mitä kävijät todellisuudessa lataavat (näytetään, kun selaimesi tukee <code>CompressionStream</code>-rajapintaa).</li> <li>Upotettua SVG:tä voi tyylitellä CSS:llä ja animoida, mutta sitä ei välimuistiteta erikseen. <code><img></code>-elementissä oleva SVG välimuistitetaan, mutta sitä ei voi tyylitellä sivulta.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Usein kysytyt kysymykset</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Lähetetäänkö SVG:ni palvelimelle?</summary> <div class="prose px-5 pb-5"><p>Ei. SVGO toimii selaimessasi. Ainoa lataus on itse optimoijan koodi ensimmäisellä optimointikerralla.</p></div> </details> <details class="faq group"> <summary>Miksi esikatselu näytetään kuvina?</summary> <div class="prose px-5 pb-5"><p>SVG on dokumenttimuoto, joka voi sisältää JavaScriptiä ja ladata ulkoisia tiedostoja. Molemmat esikatselut piirretään <code><img></code>-elementteinä paikallisista blob-osoitteista, ja tässä tilassa selaimet eivät koskaan suorita skriptejä tai hae ulkoisia resursseja, joten epäluotettavan SVG:n esikatselu täällä on turvallista. Optimoitu koodi sisältää silti kaikki skriptit, ellei <strong>Poista skriptit ja tapahtumamääritteet</strong> ole käytössä (se on käytössä esiasetuksessa <strong>Maksimi</strong>).</p></div> </details> <details class="faq group"> <summary>Optimoitu SVG ei enää skaalaudu. Mitä tapahtui?</summary> <div class="prose px-5 pb-5"><p>viewBox on todennäköisesti poistettu, joko <strong>Poista viewBox</strong> -liitännäisellä tai aiemmin jollakin toisella työkalulla. Optimoi alkuperäinen uudelleen niin, että tämä liitännäinen on pois päältä.</p></div> </details> <details class="faq group"> <summary>Miksi kuvakesprite tai animaatio lakkasi toimimasta?</summary> <div class="prose px-5 pb-5"><p><strong>Lyhennä ja poista käyttämättömät ID:t</strong> tai <strong>Yhdistä polut</strong> muutti elementtejä, joihin koodisi viittaa. Käytä <strong>Turvallinen</strong>-esiasetusta, joka säilyttää molemmat.</p></div> </details> <details class="faq group"> <summary>Optimoitu tiedosto ei ole pienempi. Miksi?</summary> <div class="prose px-5 pb-5"><p>SVG on todennäköisesti jo pienennetty. Kokeile <strong>Maksimi</strong>-esiasetusta tai pienempää <strong>Desimaalien tarkkuutta</strong> ja poista <strong>Muotoiltu tuloste (sisennetty)</strong> käytöstä.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Aiheeseen liittyvät työkalut</h2> <ul class="card-grid mt-4"><li><a class="card" href="/fi/svg-png-muunnin/"> <span class="card-title">SVG–PNG-muunnin</span> <span class="card-text">Muunna SVG PNG-, JPG- tai WebP-muotoon selaimessasi millä tahansa leveydellä, korkeudella, skaalauksella tai DPI:llä, läpinäkyvällä tai värillisellä taustalla.</span> </a></li> <li><a class="card" href="/fi/kuva-svg-muunnin/"> <span class="card-title">Kuva SVG:ksi (vektorointi)</span> <span class="card-text">Muunna PNG- tai JPG-logo tai piirros SVG-vektoripoluiksi selaimessasi. Esiasetukset, värien määrä ja pilkkusuodatin, turvallinen esikatselu ja lataus.</span> </a></li> <li><a class="card" href="/fi/kuvan-pakkaus/"> <span class="card-title">Kuvan pakkaus</span> <span class="card-text">Pakkaa JPG-, PNG- ja WebP-kuvia laatuliukusäätimellä, vertaa kokoja ennen ja jälkeen ja käsittele valokuvia erinä lähettämättä niitä palvelimelle.</span> </a></li> <li><a class="card" href="/fi/css-muotoilija/"> <span class="card-title">CSS-muotoilija ja -pienentäjä</span> <span class="card-text">Siisti sotkuinen CSS selkeällä sisennyksellä tai pienennä se csso:lla ja katso koko ennen ja jälkeen. Toimii selaimessa, mitään ei lähetetä palvelimelle.</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="Mainos"><span class="ad-label">Mainos</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">Ilmaisia verkkotyökaluja, jotka toimivat selaimessasi. Tietosi pysyvät laitteellasi.</p> </div> <nav aria-label="Kategoriat"> <p class="font-semibold">Työkalut</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/fi/tekstityokalut/">Tekstityökalut</a></li><li><a class="link-muted" href="/fi/kehittajatyokalut/">Kehittäjätyökalut</a></li><li><a class="link-muted" href="/fi/web-seo-markkinointi/">Web, SEO ja markkinointi</a></li><li><a class="link-muted" href="/fi/varit-ja-suunnittelu/">Värit ja suunnittelu</a></li><li><a class="link-muted" href="/fi/kuvankasittely/">Kuvankäsittely</a></li><li><a class="link-muted" href="/fi/pdf-ja-asiakirjat/">PDF ja asiakirjat</a></li><li><a class="link-muted" href="/fi/laskimet-ja-matematiikka/">Laskimet ja matematiikka</a></li><li><a class="link-muted" href="/fi/talouslaskimet/">Talouslaskimet</a></li><li><a class="link-muted" href="/fi/paivamaara-ja-aika/">Päivämäärä ja aika</a></li><li><a class="link-muted" href="/fi/yksikkomuuntimet/">Yksikkömuuntimet</a></li><li><a class="link-muted" href="/fi/terveys-ja-kunto/">Terveys ja kunto</a></li><li><a class="link-muted" href="/fi/koti-keittio-auto/">Koti, keittiö ja auto</a></li><li><a class="link-muted" href="/fi/generaattorit/">Generaattorit</a></li><li><a class="link-muted" href="/fi/laite-ja-selaintestit/">Laite- ja selaintestit</a></li><li><a class="link-muted" href="/fi/aani-ja-video/">Ääni ja video</a></li><li><a class="link-muted" href="/fi/opiskelu-ja-kielet/">Opiskelu ja kielet</a></li><li><a class="link-muted" href="/fi/pelit/">Pelit</a></li></ul> </nav> <nav aria-label="Tietoa"> <p class="font-semibold">Tietoa</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/fi/tietoa-meista/">Tietoa meistä</a></li> <li><a class="link-muted" href="/fi/yhteystiedot/">Yhteystiedot</a></li> <li><a class="link-muted" href="/fi/tietosuojaseloste/">Tietosuojaseloste</a></li> <li><a class="link-muted" href="/fi/kayttoehdot/">Käyttöehdot</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>