SVG در HTML

آپ SVG علامت کو براہ راست HTML پیج میں ایمبد کرسکتے ہیں

SVG کو براہ راست HTML پیج میں ایمبد کریں

ایک سادا SVG گرافک نمونہ درج کیا گیا ہے:

متاسفم، آپ کا براوزر ان لائن SVG کو مدد نہیں دیتا

یہ HTML کا کد ہے:

<!DOCTYPE html>
<html>
<body>
<h1>میری پہلی SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

خود کا ایک تجربہ کریں

SVG کا کد توضیح:

  • SVG تصویر <svg> علامت سے شروع ہوتی ہے
  • <svg> علامت کا width اور height کا پاریمتر SVG تصویر کی چوڑائی اور اونچائی کا تعین کرتا ہے
  • <circle> علامت کا استعمال کیا جاتا ہے تاکہ کرون درج کیا جاسکے
  • cx اور cy کا پاریمتر کرون کی مرکز کا x اور y کا نشان دہی کرتا ہے۔ اگر cx اور cy کو طے نہ کیا جاتا تو کرون کا مرکز (0, 0) پر طے کیا جاتا ہے
  • r کا پاریمتر کرون کی دوائی کا تعین کرتا ہے
  • stroke اور stroke-width کا پاریمتر شپ کی کایا کی دکھائی کا کنٹرول کرتا ہے ۔ ہم نے کرون کی کایا کو 4 پیکسل کا سبز رنگ کا ‘کور’ طے کیا ہے
  • fill کا پاریمتر کا استعمال کیا جاتا ہے تاکہ کرون کا رنگ طے کیا جاسکے ۔ ہم نے پُلنگ رنگ کا پُلنگ رنگ طے کیا ہے
  • </svg> برچسب بستن تصویر SVG

توجه: چون SVG با XML نوشته شده است، بنابراین تمام عناصر باید به درستی بسته شوند!