Utilia
Flokkar ▾
Tungumál: is ▾

SVG-þjappari

Þjappaðu og smækkaðu SVG-skrár á netinu með SVGO í vafranum. Veldu forstillingu, berðu niðurstöðuna saman sjónrænt og sjáðu sparnað í stærð og gzip.

Viðbætur

Ef viewBox er fjarlægt hættir teikningin að skalast, og ef auðkenni (ID) eru stytt eða fjarlægð bila CSS, JavaScript, <use> eða akkeristenglar sem vísa í þau. Haltu forstillingunni Örugg fyrir SVG-skrár sem eru notaðar í kóða, sprite-blöðum eða hreyfimyndum.

Hvernig þjappar þú SVG

  1. Slepptu SVG-skrá á svæðið eða smelltu á það til að velja eina. Þú getur líka límt kóðann inn í reitinn SVG-kóði.
  2. Veldu Forstilling: Örugg, Jöfn (sjálfgefin) eða Hámark. Listinn Viðbætur fyrir neðan sýnir nákvæmlega hvaða skref hver forstilling kveikir á.
  3. Stilltu eftir þörfum: Nákvæmni tugabrota (0 til 8 stafir), Margar umferðir, og Snyrtilegt úttak (með inndrætti) ef þú vilt læsilegan kóða. Um leið og þú breytir viðbót, nákvæmni eða umferðum skiptir forstillingin yfir í Sérsniðin.
  4. Smelltu á Þjappa SVG. Skrá sem er sleppt er þjöppuð strax, og þegar niðurstaða er komin keyrir hver breyting á stillingum þjöppunina sjálfkrafa aftur.
  5. Skoðaðu tölurnar Upprunaleg stærð, Stærð eftir þjöppun, Sparnaður og Gzip-þjappað, og berðu síðan teikningarnar tvær saman hlið við hlið.
  6. Smelltu á Afrita til að afrita Þjappaður SVG-kóði, eða Sækja þjappaða SVG til að vista hann sem nafn.min.svg.

Þjöppunin er unnin af SVGO 4, hinum staðlaða opna (MIT) SVG-þjöppunarhugbúnaði sem notaður er í flestum vefsmíðatólum. Vafraútgáfa hans er hlaðin í fyrsta skipti sem þú smellir, og hún keyrir alfarið á tækinu þínu: SVG-skránni þinni er aldrei hlaðið upp.

Hvers vegna SVG-skrár úr hönnunarforritum eru svo þungar

SVG sem er flutt út úr Illustrator, Inkscape, Figma eða Sketch ber miklu meira en teikninguna sjálfa. Ritlar bæta við eigin nafnrýmum og eigindum (heiti laga, hjálparlínur, útflutningsstillingar), <metadata>-blokk, athugasemdum eins og „Generator: Adobe Illustrator“, hnitum með sex eða fleiri tugabrotum, hópum sem innihalda aðeins einn þátt og löngum litum eins og #ffffff. Ekkert af þessu breytir því sem vafrinn teiknar. SVGO fjarlægir það, námundar tölur, endurskrifar ferlagögn með styttri skipunum, styttir liti og sameinar eða opnar óþarfa þætti. 40–60% minnkun er algeng fyrir útfluttar táknmyndir og myndskreytingar.

Forstillingar og áhættusamar viðbætur

  • Örugg keyrir sjálfgefna forstillingu SVGO en heldur auðkennum (ID), <desc>, aðskildum ferlum og <style>-reglum, með 3 tugabrotum og einni umferð. Notaðu hana fyrir SVG-skrár sem vísað er í úr CSS eða JavaScript, sprite-blöð og hreyfimyndir.
  • Jöfn er sjálfgefin forstilling SVGO, 3 tugabrot, margar umferðir. Hún hentar flestum táknmyndum og myndskreytingum sem birtast sem myndir.
  • Hámark bætir við Fjarlægja </strong>, <strong>Fjarlægja skriftur og atburðaeigindi</strong>, <strong>Fjarlægja width/height (halda viewBox)</strong> og <strong>Skipta xlink:href út fyrir href</strong>, með 2 tugabrotum og mörgum umferðum.</li> </ul> <p>Engin forstilling fjarlægir viewBox. <strong>Fjarlægja viewBox</strong> er aðeins til staðar fyrir sértilvik: án hans getur teikningin ekki lengur skalast í þá stærð sem þú gefur henni í CSS.</p> <p>Vertu meðvitaður um hvað aðrar viðbætur geta brotið:</p> <ul> <li><strong>Stytta og fjarlægja ónotuð auðkenni (ID)</strong> endurnefnir auðkenni eins og <code>#icon-home</code> í <code>a</code>. Allir CSS-veljarar, JavaScript-fyrirspurnir, sprite-tilvísanir með <code><use href="#…"></code>, akkeri á síðunni eða SMIL/CSS-hreyfimyndir sem vísa í gamla nafnið hætta að virka.</li> <li><strong>Fjarlægja <title></strong> og <strong>Fjarlægja <desc></strong> eyða aðgengilegu heiti og lýsingu. Haltu þeim á merkingarbærum táknmyndum og gröfum sem skjálesarar þurfa að tilkynna.</li> <li>Lág <strong>Nákvæmni tugabrota</strong> getur afmyndað litlar táknmyndir: ferlar sveiflast og brúnir reika. Skoðaðu alltaf sjónræna samanburðinn; 3 er öruggt sjálfgildi.</li> <li><strong>Sameina ferla</strong> sameinar aðliggjandi ferla í einn, þannig að sveimáhrif eða hreyfimynd sem vísaði í einn feril missir viðfang sitt.</li> </ul> <h2>Ráð</h2> <ul> <li>Geymdu óþjappað frumeintak til að breyta; farðu með <code>.min.svg</code> eins og þýddan kóða.</li> <li>Kveiktu á gzip eða brotli á netþjóninum þínum: textasnið eins og SVG þjappast mjög vel, og talan <strong>Gzip-þjappað</strong> sýnir það sem gestir sækja í raun (sýnd þegar vafrinn þinn styður <code>CompressionStream</code>).</li> <li>Innfelld SVG er hægt að stílsetja með CSS og lífga, en hún er ekki geymd sérstaklega í skyndiminni; SVG í <code><img></code> er geymd í skyndiminni en ekki er hægt að stílsetja hana frá síðunni.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Algengar spurningar</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Er SVG-skránni minni hlaðið upp á netþjón?</summary> <div class="prose px-5 pb-5"><p>Nei. SVGO keyrir í vafranum þínum. Eina niðurhalið er kóði þjöppunarforritsins sjálfs, í fyrsta skipti sem þú þjappar.</p></div> </details> <details class="faq group"> <summary>Af hverju er forskoðunin sýnd sem myndir?</summary> <div class="prose px-5 pb-5"><p>SVG er skjalasnið sem getur innihaldið JavaScript og hlaðið ytri skrám. Báðar forskoðanir eru birtar sem <code><img></code> frá staðbundnum blob-slóðum, og í þeim ham keyra vafrar aldrei skriftur eða sækja ytri tilföng, þannig að það er öruggt að forskoða ótraust SVG hér. Þjappaði kóðinn sjálfur inniheldur þó allar skriftur nema <strong>Fjarlægja skriftur og atburðaeigindi</strong> sé virkt (það er í <strong>Hámark</strong>).</p></div> </details> <details class="faq group"> <summary>Þjappaða SVG-skráin mín skalast ekki lengur. Hvað gerðist?</summary> <div class="prose px-5 pb-5"><p>viewBox var líklega fjarlægt, annaðhvort með <strong>Fjarlægja viewBox</strong> eða áður af öðru verkfæri. Þjappaðu upprunalegu skrána aftur með þeirri viðbót slökkta.</p></div> </details> <details class="faq group"> <summary>Af hverju hætti táknmyndablaðið mitt eða hreyfimyndin að virka?</summary> <div class="prose px-5 pb-5"><p><strong>Stytta og fjarlægja ónotuð auðkenni (ID)</strong> eða <strong>Sameina ferla</strong> breytti þáttunum sem kóðinn þinn vísar í. Notaðu forstillinguna <strong>Örugg</strong>, sem heldur hvoru tveggja.</p></div> </details> <details class="faq group"> <summary>Þjappaða skráin er ekki minni. Af hverju?</summary> <div class="prose px-5 pb-5"><p>SVG-skráin er líklega þegar smækkuð. Prófaðu <strong>Hámark</strong> eða lægri <strong>Nákvæmni tugabrota</strong>, og slökktu á <strong>Snyrtilegt úttak (með inndrætti)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Tengd verkfæri</h2> <ul class="card-grid mt-4"><li><a class="card" href="/is/svg-i-png/"> <span class="card-title">SVG í PNG</span> <span class="card-text">Umbreyttu SVG í PNG, JPG eða WebP í vafranum í hvaða stærð, stuðli eða DPI sem er, með gegnsæjum eða lituðum bakgrunni. Margar skrár og ZIP, engin upphleðsla.</span> </a></li> <li><a class="card" href="/is/mynd-i-svg/"> <span class="card-title">Mynd í SVG</span> <span class="card-text">Umbreyttu PNG- eða JPG-lógói eða teikningu í SVG-vigurferla í vafranum. Forstillingar, litafjöldi og dílasía, örugg forskoðun og niðurhal, án upphleðslu.</span> </a></li> <li><a class="card" href="/is/thjappa-myndir/"> <span class="card-title">Myndaþjappa</span> <span class="card-text">Þjappaðu JPG-, PNG- og WebP-myndum með gæðasleða, berðu saman stærðir fyrir og eftir og unnu margar ljósmyndir í einu án þess að hlaða þeim upp.</span> </a></li> <li><a class="card" href="/is/css-snidari/"> <span class="card-title">CSS-sniðari og smækkari</span> <span class="card-text">Fegraðu óskipulagt CSS með snyrtilegum inndrætti eða smækkaðu það með csso og sjáðu stærðina fyrir og eftir. Virkar í vafranum, engu er hlaðið upp.</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="Auglýsing"><span class="ad-label">Auglýsing</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">Ókeypis netverkfæri sem keyra í vafranum þínum. Gögnin þín haldast á tækinu þínu.</p> </div> <nav aria-label="Flokkar"> <p class="font-semibold">Verkfæri</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/is/textaverkfaeri/">Textaverkfæri</a></li><li><a class="link-muted" href="/is/throunarverkfaeri/">Þróunarverkfæri</a></li><li><a class="link-muted" href="/is/vefur-seo-markadssetning/">Vefur, SEO og markaðssetning</a></li><li><a class="link-muted" href="/is/litir-og-honnun/">Litir og hönnun</a></li><li><a class="link-muted" href="/is/myndir-og-ljosmyndir/">Myndir og ljósmyndir</a></li><li><a class="link-muted" href="/is/pdf-og-skjol/">PDF og skjöl</a></li><li><a class="link-muted" href="/is/staerdfraedi-reiknivelar/">Stærðfræðireiknivélar</a></li><li><a class="link-muted" href="/is/fjarmalareiknivelar/">Fjármálareiknivélar</a></li><li><a class="link-muted" href="/is/dagsetningar-og-timi/">Dagsetningar og tími</a></li><li><a class="link-muted" href="/is/einingaumbreyting/">Einingaumbreyting</a></li><li><a class="link-muted" href="/is/heilsa-og-thjalfun/">Heilsa og þjálfun</a></li><li><a class="link-muted" href="/is/heimili-eldhus-bill/">Heimili, eldhús og bíll</a></li><li><a class="link-muted" href="/is/framleidendur/">Framleiðendur</a></li><li><a class="link-muted" href="/is/taekja-og-vafraprof/">Tækja- og vafrapróf</a></li><li><a class="link-muted" href="/is/hljod-og-myndbond/">Hljóð og myndbönd</a></li><li><a class="link-muted" href="/is/menntun-og-tungumal/">Menntun og tungumál</a></li><li><a class="link-muted" href="/is/leikir/">Leikir</a></li></ul> </nav> <nav aria-label="Upplýsingar"> <p class="font-semibold">Upplýsingar</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/is/um-okkur/">Um okkur</a></li> <li><a class="link-muted" href="/is/hafa-samband/">Hafa samband</a></li> <li><a class="link-muted" href="/is/personuverndarstefna/">Persónuverndarstefna</a></li> <li><a class="link-muted" href="/is/notkunarskilmalar/">Notkunarskilmálar</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>