Neidio i'r prif gynnwys

Optimeiddwr a Meinwr SVG am ddim

Tynnu metadata, cywasgu bylchau gwyn, a thalgrynnu degolion i leihau maint ffeil SVG yn sylweddol — gostyngiadau nodweddiadol o 30-70%. Mae rhagolwg gweledol yn gwirio nad oes dim yn torri.

Yn gweithio all-lein ar ôl llwytho

Gollyngwch ffeil yma, neu cliciwch i bori

SVG · wedi'i brosesu ar eich dyfais

neu pwyswch Ctrl+V i ludo o'ch clipfwrdd

Pori ffeiliau
— neu gludwch SVG isod —

Nid yw eich ffeiliau byth yn gadael eich dyfais. Mae'r holl brosesu yn digwydd yn lleol yn eich porwr.

Defnyddiau cyffredin

  • Optimeiddio Eicon SVG ar gyfer CynhyrchiadTynnu metadata diangen o eicon SVG cyn anfon - lleihau nodweddiadol o 50-80%.
  • Optimeiddio Brand Logo SVGsLleihau maint ffeil SVG logo ar gyfer llwytho gwefan cyflym heb aberth ansawdd.
  • Optimeiddio Lluniau ac Hero SVGsAr gyfer lluniau mwy (arwyr, graffeg addurniadol), gall optimeiddio ysgogi 30-70% oddi ar faint ffeil.
  • Lleihau Maint Bundle JavaScriptPan fydd SVGs yn cael eu mewnforio fel cydran React neu reoladwy yn y cod, mae optimeiddio yn eu lleihau y bundle JS.
  • Glanhau Allforion SVG Figma / SketchMae allforion Figma a Sketch SVG yn cynnwys metadata helaeth. Tynnu cyn ei ddefnyddio mewn cynhyrchiad.

Sut Mae'n Gweithio

Mae'r offeryn hwn yn lleihau maint ffeiliau SVG gan ddefnyddio optimeiddiwr wedi'i ysgrifennu â llaw sy'n rhedeg yn gyfan gwbl yn eich porwr — dim llyfrgelloedd, dim gweinydd. Mae'n cyfuno dau bàs: DOMParser/XMLSerializer adeiledig y porwr ar gyfer gwaith manwl ar lefel priodoleddau, ac amnewidiadau regex penodol ar gyfer tynnu sylwadau, dileu metadata a chywasgu gofod gwyn.

  1. 1
    Mae DOMParser yn glanweithio'r SVG
    Cyn unrhyw optimeiddio, mae DOMParser y porwr yn darllen yr SVG fel XML ac yn cerdded drwy bob elfen. Caiff tagiau sgript, trinwyr digwyddiadau (unrhyw briodoledd on*), elfennau animeiddio a chyfeiriadau URL allanol eu tynnu'n ddiamod — mae hyn yn rhedeg ni waeth pa opsiynau optimeiddio a ddewiswch.
  2. 2
    Talgrynnu degolion yn seiliedig ar y DOM
    Os yw talgrynnu degolion wedi'i alluogi, mae'r optimeiddiwr yn cerdded drwy'r DOM wedi'i ddosrannu eilwaith ac yn talgrynnu priodoleddau rhifol hysbys yn unig (data d llwybrau, cyfesurynnau, gwerthoedd trawsffurfio, lled strociau ac ati), gan ddefnyddio regex sy'n cyfateb i rifau pwynt arnawf unigol heb lygru gwerthoedd llwybr cydgadwynog fel .5.5.
  3. 3
    Mae pasiau regex yn glanhau'r marcio wedi'i gyfresu
    Mae XMLSerializer yn cynhyrchu XML wedi'i normaleiddio, yna mae amnewidiadau llinyn penodol yn tynnu sylwadau HTML, metadata golygyddion Inkscape/Sodipodi, y datganiad XML, priodoleddau rhagosodedig diangen (fel version="1.1") a gofod gwyn rhwng tagiau — gyda phob pàs wedi'i gyfyngu'n dynn fel nad yw cynnwys nodau testun byth yn cael ei gyffwrdd.
  4. 4
    Maint gzip a fformatau allforio
    Mae API CompressionStream y porwr yn cyfrifo meintiau gzip go iawn y mewnbwn a'r allbwn, gan mai dyna sy'n pennu cost trosglwyddo ar y we mewn gwirionedd. Gellir llwytho'r SVG wedi'i optimeiddio i lawr, ei gopïo fel SVG crai, ei drosi'n briodoleddau camelCase parod ar gyfer React JSX, neu ei amgodio fel URI data CSS — mae pob trosiad yn digwydd yn lleol.

Caiff eich SVG ei ddarllen a'i brosesu'n gyfan gwbl yn nhab eich porwr — nid yw beitiau'r ffeil byth yn gadael eich dyfais.

Offer Cysylltiedig

Cwestiynau Cyffredin