HTML <svg> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <sup>
  • ਅਗਲਾ ਪੰਨਾ <table>

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

<svg> SVG ਗਰਾਫਿਕਸ ਦਾ ਕੰਟੇਨਰ ਦੇਣ ਵਾਲੀ ਟੈਗ ਹੈ。

SVG ਵਿੱਚ ਕਈ ਪਥ, ਫਰੇਮ, ਗੋਲ, ਟੈਕਸਟ ਅਤੇ ਗਰਾਫਿਕਸ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਹਨ。

SVG ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ SVG ਸਿੱਖਿਆ。

ਹੋਰ ਵੀ ਦੇਖੋ:

HTML ਸਿੱਖਿਆ ਪੁਸਤਕ:HTML SVG

SVG ਸਿੱਖਿਆ ਪੁਸਤਕ:SVG ਸਿੱਖਿਆ

ਇੱਕ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਗੋਲ ਦਿਖਾਓ:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 2

ਚੌਕੇ ਦਿਖਾਓ:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 3

ਗੋਲਾਕਾਰ ਚੌਕੇ ਦਿਖਾਓ:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 4

ਤਾਰਾ ਦਿਖਾਓ:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 5

SVG logo ਦੀ ਪ੍ਰਤੀਕਸ਼ਾ ਕਰੋ:

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਬਰੌਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰੌਜ਼ਰਾਂ ਵਿੱਚ ਇਸ ਗੁਣ ਦਾ ਪਹਿਲਾ ਪੂਰਣ ਸਮਰਥਨ ਦੀ ਸੰਖਿਆ ਸਾਰੇ ਬਰੌਜ਼ਰਾਂ ਵਿੱਚ ਇਸ ਗੁਣ ਦਾ ਪਹਿਲਾ ਪੂਰਣ ਸਮਰਥਨ ਦੀ ਸੰਖਿਆ

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
4.0 9.0 3.0 3.2 10.1
  • ਪਿਛਲਾ ਪੰਨਾ <sup>
  • ਅਗਲਾ ਪੰਨਾ <table>