ਮੁਫ਼ਤ SVG ਓਪਟੀਮਾਈਜ਼ਰ ਅਤੇ ਮਿਨੀਫਾਇਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਇਹ ਟੂਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਣ ਵਾਲੇ ਹੱਥ ਨਾਲ ਲਿਖੇ optimizer ਨਾਲ SVG ਫ਼ਾਈਲ ਦਾ ਆਕਾਰ ਘਟਾਉਂਦਾ ਹੈ — ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ, ਕੋਈ ਸਰਵਰ ਨਹੀਂ। ਇਹ ਦੋ ਪਾਸ ਜੋੜਦਾ ਹੈ: attribute-ਪੱਧਰੀ ਬਾਰੀਕ ਕੰਮ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਬਿਲਟ-ਇਨ DOMParser/XMLSerializer, ਅਤੇ comments ਹਟਾਉਣ, metadata ਹਟਾਉਣ ਅਤੇ ਖ਼ਾਲੀ ਥਾਂ ਸਮੇਟਣ ਲਈ ਨਿਸ਼ਾਨਾ regex ਬਦਲ।

1. 1
   DOMParser SVG ਨੂੰ sanitize ਕਰਦਾ ਹੈ

   ਕਿਸੇ ਵੀ optimization ਤੋਂ ਪਹਿਲਾਂ, ਬ੍ਰਾਊਜ਼ਰ ਦਾ DOMParser SVG ਨੂੰ XML ਵਜੋਂ ਪੜ੍ਹਦਾ ਹੈ ਅਤੇ ਹਰ element ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ। Script tags, event handlers (ਕੋਈ ਵੀ on* attribute), animation elements, ਅਤੇ ਬਾਹਰੀ URL references ਬਿਨਾਂ ਸ਼ਰਤ ਹਟਾਏ ਜਾਂਦੇ ਹਨ — ਇਹ ਤੁਹਾਡੇ ਚੁਣੇ optimization ਵਿਕਲਪਾਂ ਤੋਂ ਬੇਪਰਵਾਹ ਚੱਲਦਾ ਹੈ।
2. 2
   DOM-ਅਧਾਰਿਤ ਦਸ਼ਮਲਵ ਗੋਲਾਈ

   ਜੇ ਦਸ਼ਮਲਵ ਗੋਲਾਈ ਚਾਲੂ ਹੈ, ਤਾਂ optimizer ਪਾਰਸ ਕੀਤੇ DOM ਵਿੱਚੋਂ ਦੂਜੀ ਵਾਰ ਲੰਘਦਾ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਜਾਣੇ ਅੰਕੀ attributes (path d data, ਨਿਰਦੇਸ਼ਾਂਕ, transform ਮੁੱਲ, stroke widths, ਆਦਿ) 'ਤੇ ਗੋਲਾਈ ਲਾਉਂਦਾ ਹੈ, ਇੱਕ regex ਵਰਤ ਕੇ ਜੋ .5.5 ਵਰਗੇ ਜੁੜੇ path ਮੁੱਲਾਂ ਨੂੰ ਖ਼ਰਾਬ ਕੀਤੇ ਬਿਨਾਂ ਇਕੱਲੇ floating-point ਨੰਬਰ ਮਿਲਾਉਂਦਾ ਹੈ।
3. 3
   Regex ਪਾਸ ਸੀਰੀਅਲਾਈਜ਼ ਕੀਤਾ markup ਸਾਫ਼ ਕਰਦੇ ਹਨ

   XMLSerializer ਨਾਰਮਲਾਈਜ਼ ਕੀਤਾ XML ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਨਿਸ਼ਾਨਾ string ਬਦਲ HTML comments, Inkscape/Sodipodi editor metadata, XML declaration, ਵਾਧੂ ਡਿਫ਼ਾਲਟ attributes (ਜਿਵੇਂ version="1.1"), ਅਤੇ tags ਵਿਚਕਾਰਲੀ ਖ਼ਾਲੀ ਥਾਂ ਹਟਾਉਂਦੇ ਹਨ — ਹਰ ਪਾਸ ਸੀਮਿਤ ਦਾਇਰੇ ਵਿੱਚ ਤਾਂ ਜੋ text node ਸਮੱਗਰੀ ਕਦੇ ਨਾ ਛੂਹੀ ਜਾਵੇ।
4. 4
   Gzip ਆਕਾਰ ਅਤੇ ਐਕਸਪੋਰਟ ਫਾਰਮੈਟ

   ਬ੍ਰਾਊਜ਼ਰ ਦੀ CompressionStream API ਇਨਪੁੱਟ ਅਤੇ ਆਉਟਪੁੱਟ ਦੋਵਾਂ ਦੇ ਅਸਲ gzip ਆਕਾਰ ਗਿਣਦੀ ਹੈ, ਕਿਉਂਕਿ ਵੈੱਬ 'ਤੇ ਟ੍ਰਾਂਸਫ਼ਰ ਲਾਗਤ ਅਸਲ ਵਿੱਚ ਇਹੀ ਤੈਅ ਕਰਦਾ ਹੈ। optimize ਕੀਤਾ SVG ਡਾਊਨਲੋਡ, ਕੱਚੇ SVG ਵਜੋਂ ਕਾਪੀ, React JSX-ਤਿਆਰ camelCase attributes ਵਿੱਚ ਬਦਲਿਆ, ਜਾਂ CSS data URI ਵਜੋਂ ਐਨਕੋਡ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ — ਸਾਰੇ ਬਦਲਾਅ ਲੋਕਲ ਤੌਰ 'ਤੇ ਹੁੰਦੇ ਹਨ।

ਸੰਬੰਧਿਤ ਟੂਲ