ਤੁਹਾਨੂੰ inline SVG ਬਨਾਮ img ਕਦੋਂ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ?

Question

Accepted Answer

SVG ਇੱਕ **vector** ਚਿੱਤਰ ਫਾਰਮੈਟ (XML-ਆਧਾਰਤ) ਹੈ, ਇਸ ਲਈ ਇਹ ਕਿਸੇ ਵੀ ਆਕਾਰ ਲਈ ਬਿਨਾਂ ਧੁੰਦਲਾ ਕੀਤੇ ਸਕੇਲ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਨੂੰ ਦੋ ਮੁੱਖ ਤਰੀਕਿਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਹਰ ਇੱਕ ਦੇ ਨੁਕਸਾਨ ਹਨ। ## Inline SVG — HTML ਵਿੱਚ ਸਿਧਾ markup ```html ``` **ਫਾਇਦੇ:** ਤੁਸੀਂ ਇਸ ਨੂੰ CSS (`fill`, `stroke`) ਨਾਲ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹੋ, ਇਸ ਦੇ ਹਿੱਸਿਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰ ਸਕਦੇ ਹੋ, `currentColor` ਦੁਆਰਾ ਰੰਗ ਬਦਲ ਸਕਦੇ ਹੋ (ਪਾਠ ਰੰਗ ਵਿਰਾਸਤ), ਅਤੇ ਇਵੈਂਟਸ ਦਾ ਜਵਾਬ ਦੇ ਸਕਦੇ ਹੋ — ਕਿਉਂਕਿ ਇਹ ਅਸਲ DOM ਹੈ। ਕੋਈ ਵਾਧੂ HTTP ਬੇਨਤੀ ਨਹੀਂ। **ਨੁਕਸਾਨ:** HTML ਨੂੰ ਫੁਲਾਉਂਦਾ ਹੈ, ਵੱਖਰੇ ਤੌਰ ਤੇ ਕੈਸ਼ ਨਹੀਂ ਕੀਤਾ ਗਿਆ, ਦੁਹਰਾਏ ਗਏ ਆਈਕਨ ਮਾਰਕਅਪ ਨੂੰ ਡੁਪਲੀਕੇਟ ਕਰਦੇ ਹਨ। ## SVG `` ਦੁਆਰਾ — ਫਾਇਲ ਦੇ ਤੌਰ ਤੇ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ```html

``` **ਫਾਇਦੇ:** ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਕੈਸ਼ ਕੀਤਾ ਗਿਆ, HTML ਨੂੰ ਸਾਫ ਰੱਖਦਾ ਹੈ, ਸਧਾਰਨ। **ਨੁਕਸਾਨ:** ਤੁਸੀਂ ਆਪਣੇ CSS/JS ਨਾਲ ਇਸ ਦੇ ਅੰਦਰੂਨੀ ਹਿੱਸਿਆਂ ਨੂੰ ਸਟਾਈਲ ਜਾਂ ਸਕ੍ਰਿਪਟ **ਨਹੀਂ** ਕਰ ਸਕਦੇ — ਇਹ ਇੱਕ ਅਪਾਰਦਰਸ਼ੀ ਚਿੱਤਰ ਹੈ। ## ਫੈਸਲੇ ਦੀ ਗਾਈਡ ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## ਰਸਾਈ ```html ``` ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Inline ਬਨਾਮ `` SVG ਚੁਣਨਾ ਇਸ ਗੱਲ ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਤੁਹਾਨੂੰ ਗ੍ਰਾਫਿਕ ਨੂੰ **ਸਟਾਈਲ/ਐਨੀਮੇਟ** ਕਰਨ ਦੀ ਲੋੜ ਹੈ (inline) ਜਾ ਸਿਰਫ ਇਸ ਨੂੰ **ਪ੍ਰਦਰਸ਼ਤ** ਕਰੋ ਕੁਸ਼ਲਤਾ ਨਾਲ (``)। ਆਈਕਨ ਜੋ hover ਜਾਂ ਥੀਮ ਤੇ ਰੰਗ ਬਦਲਦੇ ਹਨ inline ਜਾਂਦੇ ਹਨ (ਅਕਸਰ ਕੰਪੋਨੈਂਟ ਦੇ ਤੌਰ ਤੇ); ਸਥਿਰ ਬ੍ਰਾਂਡ ਸੰਪਤੀਆਂ `` ਦੁਆਰਾ ਜਾਂਦੀਆਂ ਹਨ। ਜਿਸ ਤਰੀਕੇ ਵਾਲਾ ਹੋ, ਵੈਕਟਰ ਹਰ ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਤੇ ਤਿਖਾ ਰਹਿੰਦਾ ਹੈ — ਆਈਕਨ ਅਤੇ ਲੋਗੋ ਲਈ ਆਦਰਸ਼।

Inline SVG — HTML ਵਿੱਚ ਸਿਧਾ markup

SVG <img> ਦੁਆਰਾ — ਫਾਇਲ ਦੇ ਤੌਰ ਤੇ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ

ਫੈਸਲੇ ਦੀ ਗਾਈਡ

ਰਸਾਈ

ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

SVG `<img>` ਦੁਆਰਾ — ਫਾਇਲ ਦੇ ਤੌਰ ਤੇ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ