ਤੁਹਾਡੇ ਵੈੱਬਪੇਜ ਤੇ ਐਸ ਵੀਜੀ ਗਰਾਫਿਕਸ ਨੂੰ ਕਿਵੇਂ ਰੱਖਿਆ ਜਾਵੇ

SVG ਜਾਂ ਸਕੇਲੇਬਲ ਵੈਕਟਰ ਗਰਾਫਿਕਸ ਤੁਹਾਨੂੰ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਚਿੱਤਰਾਂ ਨੂੰ ਖਿੱਚਣ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਤੇ ਰੈਂਡਰ ਕਰਨ ਦਿੰਦੇ ਹਨ. ਪਰ ਤੁਸੀਂ ਬਸ ਐਸ.ਵੀ.ਜੀ. ਟੈਗ ਨਹੀਂ ਲੈ ਸਕਦੇ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ HTML ਵਿੱਚ ਥੱਪੜ ਨਹੀਂ ਕਰ ਸਕਦੇ. ਉਹ ਦਿਖਾਈ ਨਹੀਂ ਦੇਣਗੇ ਅਤੇ ਤੁਹਾਡਾ ਪੰਨਾ ਅਵੈਧ ਹੋ ਜਾਵੇਗਾ. ਇਸ ਦੀ ਬਜਾਏ, ਤੁਹਾਨੂੰ ਤਿੰਨ ਢੰਗਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪੈਂਦੀ ਹੈ

SVG ਨੂੰ ਸ਼ਾਮਿਲ ਕਰਨ ਲਈ ਆਬਜੈਕਟ ਟੈਗ ਦਾ ਉਪਯੋਗ ਕਰੋ

HTML ਟੈਗ ਤੁਹਾਡੇ ਵੈਬ ਪੇਜ ਵਿੱਚ ਇੱਕ SVG ਗ੍ਰਾਫਿਕ ਨੂੰ ਐਮਬੈੱਡ ਕਰੇਗਾ. ਤੁਸੀਂ ਆਬਜੈਕਟ ਟੈਗ ਨੂੰ ਇੱਕ ਐਸਐਚਜੀ ਫਾਇਲ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਇੱਕ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਲਿਖੋ. ਤੁਹਾਨੂੰ ਆਪਣੀ SVG ਚਿੱਤਰ (ਪਿਕਸਲ ਵਿੱਚ) ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ.

ਕਰੌਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ, ਤੁਹਾਨੂੰ ਟਾਈਪ ਐਟਰੀਬਿਊਟ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਪੜ੍ਹਨਾ ਚਾਹੀਦਾ ਹੈ:

type = "image / svg + xml"

ਅਤੇ ਉਨ੍ਹਾਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਲਈ ਇਕ ਕੋਡਬੇਸ ਜੋ ਇਸਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੀਆਂ (ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ ਹੇਠਾਂ). ਤੁਹਾਡਾ ਕੋਡਬੇਸ ਉਹਨਾਂ ਬ੍ਰਾਉਜ਼ਰਸ ਲਈ ਇੱਕ SVG ਪਲੱਗਇਨ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰੇਗਾ ਜੋ SVG ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ. ਸਭ ਤੋਂ ਵੱਧ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਪਲਗਇਨ http://www.adobe.com/svg/viewer/install/ ਤੇ Adobe ਤੋਂ ਹੈ. ਹਾਲਾਂਕਿ, ਇਹ ਪਲੱਗਇਨ ਅਡੋਬ ਦੁਆਰਾ ਹੁਣ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ. ਇੱਕ ਹੋਰ ਚੋਣ http://www.savarese.com/software/svgplugin/ ਤੇ ਸਾਵੈਸੇਸ ਸਾਫਟਵੇਅਰ ਖੋਜ ਤੋਂ ਐਸ ਐਸ ਆਰ ਸੀ ਐਸਵੀਜੀ ਪਲੱਗਇਨ ਹੈ.

ਤੁਹਾਡਾ ਵਸਤੂ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

SVG ਲਈ ਆਬਜੈਕਟ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਲਈ ਸੁਝਾਅ

  • ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਘੱਟੋ-ਘੱਟ ਜਿੰਨੀ ਵੱਡੀ ਤਸਵੀਰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਏਮਬੇਡ ਕਰ ਰਹੇ ਹੋਣ ਦੇ ਬਰਾਬਰ ਹੈ ਨਹੀਂ ਤਾਂ ਤੁਹਾਡੀ ਚਿੱਤਰ ਨੂੰ ਕਲੀਪ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.
  • ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀ SVG ਸਹੀ ਤਰ੍ਹਾਂ ਨਾ ਦਿਖਾਈ ਦੇਵੇ ਜੇ ਤੁਸੀਂ ਸਹੀ ਸਮੱਗਰੀ ਦੀ ਕਿਸਮ (ਟਾਈਪ = "image / svg + xml") ਸ਼ਾਮਲ ਨਾ ਕਰੋ, ਤਾਂ ਮੈਂ ਇਸਨੂੰ ਛੱਡਣ ਦੀ ਸਿਫਾਰਸ਼ ਨਹੀਂ ਕਰਦਾ.
  • ਤੁਸੀਂ ਬ੍ਰਾਉਜ਼ਰ ਲਈ ਆਬਜੈਕਟ ਟੈਗ ਦੇ ਅੰਦਰ ਫਾਲਬੈਕ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਜੋ SVG ਫਾਈਲਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਤ ਨਹੀਂ ਕਰੇਗਾ.
  • ਤੁਸੀਂ ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਆਪਣੇ SVG ਅਤੇ ਸਮਗਰੀ ਦੀ ਕਿਸਮ ਦਾ ਸਰੋਤ ਵੀ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ IE 6 ਅਤੇ 7 ਵਿੱਚ ਵਧੀਆ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" ਚੌੜਾਈ = "110" ਉਚਾਈ = "60" ਕੋਡਬੇਸ = "http://www.savarese.com/software/svgplugin/">

ਨੋਟ ਕਰੋ ਕਿ ਇਸ ਲਈ ਇਸ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਕਲਾਸਿਕ ਦੀ ਲੋੜ ਹੈ

ਕਿਸੇ ਆਬਜੈਕਟ ਟੈਗ ਉਦਾਹਰਨ ਵਿੱਚ ਇੱਕ SVG ਵੇਖੋ.

ਏਮਬੈੱਡ ਟੈਗ ਨਾਲ ਐਸਐਚਜੀ ਐਮ.ਵੀ.

SVG ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਤੁਹਾਡੇ ਕੋਲ ਇਕ ਹੋਰ ਵਿਕਲਪ ਹੈ ਟੈਗ ਨੂੰ ਵਰਤਣਾ. ਤੁਸੀਂ ਆਬਜੈਕਟ ਟੈਗ ਦੇ ਰੂਪ ਵਿੱਚ ਲੱਗਭੱਗ ਉਹੀ ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਸਮੇਤ ਚੌੜਾਈ <, ਉਚਾਈ, ਕਿਸਮ, ਅਤੇ ਕੋਡਬੇਸ> ਇੱਕਮਾਤਰ ਫਰਕ ਇਹ ਹੈ ਕਿ ਡੇਟਾ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਆਪਣੀ ਐਸ.ਵੀ.ਜੀ. ਦਸਤਾਵੇਜ਼ URL ਨੂੰ src ਗੁਣ ਵਿੱਚ ਰੱਖੋ.

ਤੁਹਾਡਾ ਏਮਬੈਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" ਟਾਈਪ ਕਰੋ = "image / svg + xml" ਕੋਡਬੇਸ = "http://www.adobe.com / svg / ਦਰਸ਼ਕ / ਇੰਸਟਾਲ "/>

SVG ਲਈ ਏਮਬੈਡ ਵਰਤਣ ਲਈ ਸੁਝਾਅ

  • ਐਮਬੈੱਡ ਟੈਗ ਵੈਧ HTML4 ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਵੈਧ HTML5 ਹੈ, ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਇੱਕ HTML4 ਪੰਨੇ ਵਿੱਚ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਪੰਨਾ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੋਵੇਗਾ.
  • ਸਭ ਤੋਂ ਅਨੁਕੂਲਤਾ ਲਈ ਸ਼ੌਰਫ ਐਟਿਟਿਉ ਵਿਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਓਲਲਾਈਫਡ ਡੋਮੇਨ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰੋ.
  • ਕੁਝ ਰਿਪੋਰਟਾਂ ਵੀ ਹਨ ਜੋ ਐਡਬੌਨ ਪਲੱਗਇਨ ਨਾਲ ਐਂਬੈੱਡ ਟੈਗ ਵਰਤਣ ਨਾਲ Mozilla versions 1.0 ਤੋਂ 1.4 ਨੂੰ ਕਰੈਸ਼ ਕਰ ਦੇਵੇਗਾ.

ਏਮਬੈਗ ਟੈਗ ਉਦਾਹਰਨ ਵਿੱਚ ਇੱਕ SVG ਵੇਖੋ.

SVG ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਇੱਕ ਆਈਫਰੇਮ ਦੀ ਵਰਤੋਂ ਕਰੋ

Iframes ਤੁਹਾਡੇ ਵੈਬ ਪੇਜਾਂ ਤੇ ਇੱਕ SVG ਚਿੱਤਰ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦਾ ਦੂਜਾ ਆਸਾਨ ਤਰੀਕਾ ਹੈ. ਇਸਦੇ ਲਈ ਕੇਵਲ ਤਿੰਨ ਗੁਣਾਂ ਦੀ ਲੋੜ ਹੈ: ਆਮ ਵਾਂਗ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ, ਅਤੇ src ਤੁਹਾਡੇ SVG ਫਾਈਲ ਦੇ ਸਥਾਨ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ.

ਤੁਹਾਡਾ iframe ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ: