സൗജന്യ SVG ഒപ്റ്റിമൈസർ & മിനിഫയർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഈ ടൂൾ പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്ന ഒരു കൈകൊണ്ട് എഴുതിയ ഒപ്റ്റിമൈസർ ഉപയോഗിച്ച് SVG ഫയൽ വലുപ്പം കുറയ്ക്കുന്നു — ലൈബ്രറികളില്ല, സെർവർ ഇല്ല. ഇത് രണ്ട് പാസുകൾ സംയോജിപ്പിക്കുന്നു: ആട്രിബ്യൂട്ട്-തല കൃത്യതയ്ക്കായി ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ DOMParser/XMLSerializer, കമന്റ് നീക്കം ചെയ്യൽ, മെറ്റാഡാറ്റ നീക്കം ചെയ്യൽ, വൈറ്റ്സ്പേസ് ചുരുക്കൽ എന്നിവയ്ക്കുള്ള ടാർഗെറ്റഡ് regex സബ്സ്റ്റിറ്റ്യൂഷനുകൾ.

1. 1
   DOMParser SVG സാനിറ്റൈസ് ചെയ്യുന്നു

   ഏതെങ്കിലും ഒപ്റ്റിമൈസേഷന് മുമ്പ്, ബ്രൗസറിന്റെ DOMParser SVG-യെ XML ആയി വായിക്കുകയും ഓരോ എലമെന്റിലൂടെയും നടക്കുകയും ചെയ്യുന്നു. സ്ക്രിപ്റ്റ് ടാഗുകൾ, ഇവന്റ് ഹാൻഡ്ലറുകൾ (ഏതെങ്കിലും on* ആട്രിബ്യൂട്ട്), ആനിമേഷൻ എലമെന്റുകൾ, ബാഹ്യ URL റഫറൻസുകൾ എന്നിവ നിരുപാധികമായി നീക്കം ചെയ്യുന്നു — നിങ്ങൾ ഏത് ഒപ്റ്റിമൈസേഷൻ ഓപ്ഷനുകൾ തിരഞ്ഞെടുത്താലും ഇത് പ്രവർത്തിക്കുന്നു.
2. 2
   DOM-അധിഷ്ഠിത ഡെസിമൽ റൗണ്ടിംഗ്

   ഡെസിമൽ റൗണ്ടിംഗ് പ്രാപ്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, ഒപ്റ്റിമൈസർ പാഴ്സ് ചെയ്ത DOM രണ്ടാം തവണ നടക്കുകയും അറിയപ്പെടുന്ന ന്യൂമെറിക് ആട്രിബ്യൂട്ടുകൾക്ക് മാത്രം (path d ഡാറ്റ, കോർഡിനേറ്റുകൾ, transform മൂല്യങ്ങൾ, stroke widths, മുതലായവ) റൗണ്ടിംഗ് പ്രയോഗിക്കുകയും ചെയ്യുന്നു, .5.5 പോലുള്ള കൂട്ടിച്ചേർത്ത path മൂല്യങ്ങൾ കേടാക്കാതെ വ്യക്തിഗത ഫ്ലോട്ടിംഗ്-പോയിന്റ് നമ്പറുകൾ പൊരുത്തപ്പെടുത്തുന്ന ഒരു regex ഉപയോഗിച്ച്.
3. 3
   regex പാസുകൾ സീരിയലൈസ്ഡ് മാർക്കപ്പ് വൃത്തിയാക്കുന്നു

   XMLSerializer നോർമലൈസ്ഡ് XML നിർമ്മിക്കുന്നു, പിന്നെ ടാർഗെറ്റഡ് സ്ട്രിംഗ് റീപ്ലേസ്മെന്റുകൾ HTML കമന്റുകൾ, Inkscape/Sodipodi എഡിറ്റർ മെറ്റാഡാറ്റ, XML ഡിക്ലറേഷൻ, ആവർത്തന ഡിഫോൾട്ട് ആട്രിബ്യൂട്ടുകൾ (version="1.1" പോലുള്ളവ), ടാഗുകൾക്കിടയിലുള്ള വൈറ്റ്സ്പേസ് എന്നിവ നീക്കം ചെയ്യുന്നു — ടെക്സ്റ്റ് നോഡ് ഉള്ളടക്കം ഒരിക്കലും തൊടാതെ ഓരോ പാസും ഇടുങ്ങിയ സ്കോപ്പിലാണ്.
4. 4
   Gzip വലുപ്പവും എക്സ്പോർട്ട് ഫോർമാറ്റുകളും

   ബ്രൗസറിന്റെ CompressionStream API ഇൻപുട്ടിന്റെയും ഔട്ട്പുട്ടിന്റെയും യഥാർത്ഥ gzip വലുപ്പങ്ങൾ കണക്കാക്കുന്നു, കാരണം അതാണ് വെബിൽ ട്രാൻസ്ഫർ ചെലവ് യഥാർത്ഥത്തിൽ നിർണ്ണയിക്കുന്നത്. ഒപ്റ്റിമൈസ് ചെയ്ത SVG ഡൗൺലോഡ് ചെയ്യാം, റോ SVG ആയി കോപ്പി ചെയ്യാം, React JSX-റെഡി camelCase ആട്രിബ്യൂട്ടുകളാക്കി പരിവർത്തനം ചെയ്യാം, അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ URI ആയി എൻകോഡ് ചെയ്യാം — എല്ലാ പരിവർത്തനങ്ങളും ലോക്കലായി സംഭവിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ