HTML <svg> کا نشان‌دهنده

تعریف و استعمال

<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 لوگوی دروکردن:

<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