ਵੈੱਬ ਪਰਫਾਰਮੈਂਸ ਲਈ SVG ਫਾਈਲ ਦੇ ਆਕਾਰ ਦਾ ਮਹੱਤਵ
ਵੈੱਬਸਾਈਟ ਦੀ ਲੋਡਿੰਗ ਸਪੀਡ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ (user experience) ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਫਾਈਲਾਂ ਦੇ ਆਕਾਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। SVG (Scalable Vector Graphics) ਇੱਕ ਪ੍ਰਸਿੱਧ ਫਾਰਮੈਟ ਹੈ ਜੋ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਅਤੇ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਕਿਉਂਕਿ SVG ਫਾਈਲਾਂ XML-ਅਧਾਰਿਤ ਟੈਕਸਟ ਕੋਡ ਹੁੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਇਹਨਾਂ ਵਿੱਚ ਅਕਸਰ ਬਹੁਤ ਸਾਰਾ ਅਜਿਹਾ ਡਾਟਾ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਗ੍ਰਾਫਿਕ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੁੰਦਾ।
ਜਦੋਂ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰ ਅਤੇ ਡਿਜ਼ਾਈਨਰ ਆਪਣੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਇਨਲਾਈਨ ਆਈਕਨਾਂ ਜਾਂ ਚਿੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਤਾਂ ਹਰ ਇੱਕ ਵਾਧੂ ਬਾਈਟ ਪੇਜ ਦੇ ਕੁੱਲ ਆਕਾਰ ਨੂੰ ਵਧਾਉਂਦੀ ਹੈ। SVG ਕੋਡ ਨੂੰ ਅਨੁਕੂਲਿਤ (optimize) ਕਰਕੇ ਫਾਈਲ ਦਾ ਆਕਾਰ ਘਟਾਉਣ ਨਾਲ ਪੇਜ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਬੈਂਡਵਿਡਥ ਦੀ ਬਚਤ ਹੁੰਦੀ ਹੈ ਅਤੇ ਸਰਵਰ 'ਤੇ ਲੋਡ ਘਟਦਾ ਹੈ।
SVG ਕੋਡ ਦੀ ਬਣਤਰ ਅਤੇ ਹਟਾਏ ਜਾਣ ਯੋਗ ਤੱਤ
ਇੱਕ ਆਮ SVG ਫਾਈਲ ਵਿੱਚ ਸਿਰਫ਼ ਚਿੱਤਰ ਦੀ ਜਿਓਮੈਟਰੀ ਹੀ ਨਹੀਂ ਹੁੰਦੀ, ਬਲਕਿ ਕਈ ਹੋਰ ਤੱਤ ਵੀ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਵੈੱਬ 'ਤੇ ਰੈਂਡਰਿੰਗ ਲਈ ਬੇਲੋੜੇ ਹੁੰਦੇ ਹਨ। ਜਦੋਂ ਕੋਈ ਗ੍ਰਾਫਿਕ ਡਿਜ਼ਾਈਨ ਸੌਫਟਵੇਅਰ ਵਿੱਚ SVG ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਹ ਆਪਣੇ ਆਪ ਕਈ ਤਰ੍ਹਾਂ ਦੇ ਮੈਟਾਡੇਟਾ ਅਤੇ ਕੋਡ ਜੋੜ ਦਿੰਦੇ ਹਨ।
ਇਸ ਟੂਲ ਦੀ ਮਦਦ ਨਾਲ SVG ਕੋਡ ਵਿੱਚੋਂ ਹੇਠ ਲਿਖੇ ਤੱਤਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੂਪ ਵਿੱਚ ਹਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:
- ਟਿੱਪਣੀਆਂ (Comments): ਕੋਡ ਦੇ ਅੰਦਰ ਡਿਵੈਲਪਰਾਂ ਲਈ ਲਿਖੀਆਂ ਗਈਆਂ ਟਿੱਪਣੀਆਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਬੇਕਾਰ ਹੁੰਦੀਆਂ ਹਨ।
- ਮੈਟਾਡੇਟਾ (Metadata): ਚਿੱਤਰ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਸੌਫਟਵੇਅਰ, ਲੇਖਕ ਜਾਂ ਸਿਰਜਣਾ ਦੀ ਮਿਤੀ ਬਾਰੇ ਜਾਣਕਾਰੀ।
- ਐਡੀਟਰ ਨੇਮਸਪੇਸ (Editor Namespaces): ਵੱਖ-ਵੱਖ ਡਿਜ਼ਾਈਨ ਟੂਲਸ ਦੁਆਰਾ ਆਪਣੇ ਨਿੱਜੀ ਵਰਤੋਂ ਲਈ ਜੋੜੇ ਗਏ ਨੇਮਸਪੇਸ।
- ਵਾਧੂ ਐਟਰੀਬਿਊਟ ਸਪੇਸਿੰਗ (Extra attribute spacing): ਕੋਡ ਦੇ ਅੰਦਰ ਮੌਜੂਦ ਬੇਲੋੜੀਆਂ ਖਾਲੀ ਥਾਵਾਂ (spaces)।
- ਨਾ-ਵਰਤੇ ਨੇਮਸਪੇਸ (Unused namespaces): ਉਹ ਨੇਮਸਪੇਸ ਜੋ ਕੋਡ ਵਿੱਚ ਕਿਤੇ ਵੀ ਵਰਤੇ ਨਹੀਂ ਗਏ ਹਨ।
- ਛੋਟੇ ਸਮਾਨ ਰੰਗ (Shorter equivalent colors): ਰੰਗਾਂ ਦੇ ਕੋਡਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਛੋਟੇ ਰੂਪਾਂ ਵਿੱਚ ਬਦਲਣਾ (ਜਿਵੇਂ ਕਿ ਲੰਬੇ ਹੈਕਸਾਡੈਸੀਮਲ ਕੋਡ ਨੂੰ ਛੋਟੇ ਕੋਡ ਵਿੱਚ ਬਦਲਣਾ)।
ਇਹ ਸਾਰੀਆਂ ਤਬਦੀਲੀਆਂ ਕਰਨ ਦੇ ਬਾਵਜੂਦ, ਇਹ ਟੂਲ viewBox, IDs, ਲੇਬਲ ਅਤੇ ਜਿਓਮੈਟਰੀ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ ਤਾਂ ਜੋ ਚਿੱਤਰ ਦੀ ਬਣਤਰ ਖਰਾਬ ਨਾ ਹੋਵੇ।
ਲੌਸਲੈੱਸ (Lossless) ਆਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਵਿਧੀ
ਗ੍ਰਾਫਿਕਸ ਦੇ ਸੰਦਰਭ ਵਿੱਚ "ਲੌਸਲੈੱਸ" (lossless) ਆਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਫਾਈਲ ਦਾ ਆਕਾਰ ਤਾਂ ਘਟਾਇਆ ਜਾਂਦਾ ਹੈ, ਪਰ ਚਿੱਤਰ ਦੀ ਵਿਜ਼ੂਅਲ ਗੁਣਵੱਤਾ ਜਾਂ ਦਿੱਖ ਵਿੱਚ ਕੋਈ ਵੀ ਬਦਲਾਅ ਨਹੀਂ ਆਉਂਦਾ।
ਇਹ ਟੂਲ ਸੁਰੱਖਿਅਤ ਕਲੀਨਅੱਪ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ। ਇਹ ਪਾਥ ਰੀਰਾਈਟਸ (path rewrites), ID ਰੀਨੇਮਿੰਗ (ID renaming), viewBox ਹਟਾਉਣ ਅਤੇ ਪ੍ਰੀਸੀਜ਼ਨ ਰਾਊਂਡਿੰਗ (precision rounding) ਤੋਂ ਬਚਦਾ ਹੈ। ਇਸ ਦਾ ਫਾਇਦਾ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡਾ ਵੈਕਟਰ ਗ੍ਰਾਫਿਕ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਿਵੇਂ ਉਹ ਅਨੁਕੂਲਨ ਤੋਂ ਪਹਿਲਾਂ ਸੀ, ਜਦੋਂ ਕਿ ਉਸਦਾ ਕੋਡ ਪਹਿਲਾਂ ਨਾਲੋਂ ਹਲਕਾ ਅਤੇ ਸਾਫ਼ ਹੋ ਜਾਂਦਾ ਹੈ।
ਸੁਰੱਖਿਆ ਅਤੇ ਐਕਸਐਮਐਲ (XML) ਪਾਰਸਿੰਗ
ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ XML ਐਂਟਿਟੀਜ਼ ਨੂੰ ਪਾਰਸ ਕਰਨ ਨਾਲ ਸੁਰੱਖਿਆ ਦੇ ਗੰਭੀਰ ਖਤਰੇ ਪੈਦਾ ਹੋ ਸਕਦੇ ਹਨ। ਇਸੇ ਕਾਰਨ ਕਰਕੇ, ਇਹ ਟੂਲ ਸੁਰੱਖਿਆ ਨਿਯਮਾਂ ਨੂੰ ਸਖ਼ਤੀ ਨਾਲ ਲਾਗੂ ਕਰਦਾ ਹੈ।
ਜੇਕਰ ਕਿਸੇ SVG ਫਾਈਲ ਵਿੱਚ ਦਸਤਾਵੇਜ਼ ਕਿਸਮ (document type) ਜਾਂ ਕਸਟਮ ਐਂਟਿਟੀ ਘੋਸ਼ਣਾਵਾਂ (custom entity declarations) ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਇਹ ਟੂਲ ਉਸਨੂੰ ਪ੍ਰੋਸੈਸ ਨਹੀਂ ਕਰਦਾ ਅਤੇ ਬਲੌਕ ਕਰ ਦਿੰਦਾ ਹੈ। ਅਜਿਹੇ ਕੋਡ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ, ਉਪਭੋਗਤਾ ਨੂੰ ਪਹਿਲਾਂ ਉਹਨਾਂ ਘੋਸ਼ਣਾਵਾਂ ਨੂੰ ਕੋਡ ਵਿੱਚੋਂ ਹਟਾਉਣਾ ਪੈਂਦਾ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਹਾਡੀ ਗੋਪਨੀਯਤਾ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ, ਤੁਹਾਡਾ SVG ਕੋਡ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। BroBroGo 'ਤੇ ਕੁਝ ਵੀ ਅਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਟੂਲ ਦੇ ਇਨਪੁਟ, ਆਉਟਪੁੱਟ ਅਤੇ ਗਲਤੀਆਂ ਦੇ ਸੁਨੇਹੇ
ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਇਨਪੁਟ ਖੇਤਰ ਵਿੱਚ ਆਪਣਾ ਇਨਲਾਈਨ SVG ਕੋਡ ਪੇਸਟ ਕਰਨਾ ਹੁੰਦਾ ਹੈ। ਟੂਲ ਦੀਆਂ ਕੁਝ ਸੀਮਾਵਾਂ ਅਤੇ ਨਿਯਮ ਹਨ, ਜਿਨ੍ਹਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਇਹ ਹੇਠ ਲਿਖੇ ਨਤੀਜੇ ਅਤੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ:
ਸਫਲਤਾਪੂਰਵਕ ਆਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦੇ ਨਤੀਜੇ:
- ਅਸਲ: ਇਹ ਬਾਈਟਸ ਵਿੱਚ ਅਸਲ SVG ਫਾਈਲ ਦਾ ਆਕਾਰ ਦਰਸਾਉਂਦਾ ਹੈ।
- ਆਉਟਪੁੱਟ: ਇਹ ਅਨੁਕੂਲਿਤ ਕੀਤੇ ਗਏ SVG ਦਾ ਆਕਾਰ ਬਾਈਟਸ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ।
- ਬਚਾਇਆ: ਇਹ ਬਚਾਈ ਗਈ ਸਪੇਸ ਨੂੰ ਬਾਈਟਸ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ (%) ਦੇ ਰੂਪ ਵਿੱਚ ਦਰਸਾਉਂਦਾ ਹੈ।
- ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ —
{pct}% ਛੋਟਾ ({saved}ਬਚਾਇਆ)।
ਸੰਭਾਵਿਤ ਗਲਤੀਆਂ ਅਤੇ ਹੋਰ ਸੁਨੇਹੇ:
- ਜੇਕਰ ਇਨਪੁਟ ਖਾਲੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ: ਪਹਿਲਾਂ SVG ਕੋਡ ਪੇਸਟ ਕਰੋ।
- ਜੇਕਰ ਇਨਪੁਟ ਵਿੱਚ ਕੋਈ SVG ਐਲੀਮੈਂਟ ਨਹੀਂ ਹੈ: ਕੋਈ <svg> ਐਲੀਮੈਂਟ ਨਹੀਂ ਮਿਲਿਆ।
- ਜੇਕਰ SVG ਵਿੱਚ ਦਸਤਾਵੇਜ਼ ਕਿਸਮ ਜਾਂ ਕਸਟਮ ਐਂਟਿਟੀ ਹੈ: ਇਹ SVG ਇੱਕ ਦਸਤਾਵੇਜ਼ ਕਿਸਮ (document type) ਜਾਂ ਕਸਟਮ ਐਂਟਿਟੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਅਨੁਕੂਲਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਸਨੂੰ ਹਟਾਓ।
- ਜੇਕਰ SVG ਕੋਡ ਨਿਰਧਾਰਤ ਅੱਖਰ ਸੀਮਾ ਤੋਂ ਵੱਧ ਹੈ: ਇਹ SVG ਇਸ ਟੂਲ ਲਈ ਬਹੁਤ ਵੱਡਾ ਹੈ। ਇਸਨੂੰ
{max}ਅੱਖਰਾਂ ਤੋਂ ਘੱਟ ਰੱਖੋ। - ਜੇਕਰ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ 15 ਸੈਕੰਡ ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੱਗਦਾ ਹੈ: ਇਸ ਵਿੱਚ ਬਹੁਤ ਸਮਾਂ ਲੱਗਿਆ ਅਤੇ ਇਸਨੂੰ ਰੋਕ ਦਿੱਤਾ ਗਿਆ — ਕਿਰਪਾ ਕਰਕੇ ਛੋਟੇ SVG ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
- ਜੇਕਰ ਸੁਰੱਖਿਅਤ ਸਫ਼ਾਈ ਦੌਰਾਨ ਕੋਈ ਵੀ ਸਾਈਜ਼ ਘੱਟ ਨਹੀਂ ਹੁੰਦਾ: ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਗਿਆ। ਸੁਰੱਖਿਅਤ ਕਲੀਨਅੱਪ ਸੈੱਟ ਨਾਲ ਕੋਈ ਆਕਾਰ ਨਹੀਂ ਬਚਾਇਆ ਜਾ ਸਕਿਆ।
- ਜੇਕਰ ਕੋਈ ਹੋਰ ਤਕਨੀਕੀ ਸਮੱਸਿਆ ਆਉਂਦੀ ਹੈ: ਇਸ SVG ਨੂੰ ਅਨੁਕੂਲਿਤ (optimize) ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ।
ਜੇਕਰ ਤੁਸੀਂ ਪ੍ਰਕਿਰਿਆ ਦੇ ਦੌਰਾਨ ਇਨਪੁਟ ਨੂੰ ਸਾਫ਼ ਕਰਦੇ ਹੋ ਜਾਂ ਬਦਲਦੇ ਹੋ, ਤਾਂ ਚੱਲ ਰਹੀ ਅਨੁਕੂਲਨ ਪ੍ਰਕਿਰਿਆ ਤੁਰੰਤ ਬੰਦ ਹੋ ਜਾਵੇਗੀ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)
ਇਹ ਕੀ ਹਟਾਉਂਦਾ ਹੈ?
ਇਹ ਟਿੱਪਣੀਆਂ, ਮੈਟਾਡੇਟਾ, ਐਡੀਟਰ ਨੇਮਸਪੇਸ, ਵਾਧੂ ਐਟਰੀਬਿਊਟ ਸਪੇਸਿੰਗ, ਨਾ-ਵਰਤੇ ਨੇਮਸਪੇਸ ਅਤੇ ਛੋਟੇ ਸਮਾਨ ਰੰਗਾਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। ਇਹ viewBox, IDs, ਲੇਬਲ ਅਤੇ ਜਿਓਮੈਟਰੀ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ।
ਕੀ ਇਹ ਹਰ SVG ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦਾ ਹੈ?
ਇਹ ਆਮ ਇਨਲਾਈਨ SVG ਕੋਡ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ। ਦਸਤਾਵੇਜ਼ ਕਿਸਮ (document type) ਜਾਂ ਕਸਟਮ ਐਂਟਿਟੀ ਘੋਸ਼ਣਾਵਾਂ ਵਾਲੇ SVGs ਨੂੰ ਬਲੌਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਉਹ ਪਾਰਸਿੰਗ ਨੂੰ ਅਸੁਰੱਖਿਅਤ ਬਣਾ ਸਕਦੇ ਹਨ। ਉਹਨਾਂ ਘੋਸ਼ਣਾਵਾਂ ਨੂੰ ਹਟਾਓ ਅਤੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
ਕੀ ਇਹ ਗ੍ਰਾਫਿਕ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ?
ਆਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਹੈ। ਆਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਪਾਥ ਰੀਰਾਈਟਸ, ID ਰੀਨੇਮਿੰਗ, viewBox ਹਟਾਉਣ ਅਤੇ ਪ੍ਰੀਸੀਜ਼ਨ ਰਾਊਂਡਿੰਗ ਤੋਂ ਬਚਦੀ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ SVG ਡਿਜ਼ਾਈਨ ਵਰਕਫਲੋ ਲਈ ਟਿੱਪਣੀਆਂ ਜਾਂ ਮੈਟਾਡੇਟਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਤਾਂ ਅਸਲ ਦੀ ਇੱਕ ਕਾਪੀ ਆਪਣੇ ਕੋਲ ਰੱਖੋ।
ਕੀ ਮੇਰਾ ਕੋਡ ਕਿਸੇ ਸਰਵਰ 'ਤੇ ਅਪਲੋਡ ਹੁੰਦਾ ਹੈ?
ਨਹੀਂ, ਤੁਹਾਡੀ ਗੋਪਨੀਯਤਾ ਸਾਡੀ ਤਰਜੀਹ ਹੈ। ਤੁਹਾਡਾ SVG ਕੋਡ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। BroBroGo 'ਤੇ ਕੁਝ ਵੀ ਅਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।