گرافیک و فرمول؛ SVG، canvas و MathML

HTML می‌تواند میزبان قالب‌های دیگر باشد

SVG گرافیک برداری است و شکل‌هایش با بزرگ‌شدن وضوح خود را حفظ می‌کنند. می‌توان فایل SVG را با img نمایش داد یا نشانه‌گذاری SVG را مستقیماً در سند قرار داد. کد SVG از منبع ناشناس را بدون بررسی وارد صفحه نکن.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
     width="100" height="100" role="img" aria-labelledby="circle-title">
  <title id="circle-title">دایرهٔ آبی</title>
  <circle cx="50" cy="50" r="35" fill="blue" />
</svg>

canvas سطح رسم پیکسلی است. تگ تنها بوم را ایجاد می‌کند و معمولاً برای رسم باید از JavaScript استفاده شود؛ عناصر رسم‌شدهٔ آن خودکار مثل عناصر معنایی HTML در دسترس نیستند. ابعاد بوم را با width و height مشخص کن و جایگزین محتوایی بده.

<canvas width="400" height="200">
  نمودار ظرفیت کارگاه؛ ۱۲ نفر از ۲۰ نفر ثبت‌نام کرده‌اند.
</canvas>

MathML قالب نشانه‌گذاری فرمول ریاضی است و داخل HTML قرار می‌گیرد:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup><mi>x</mi><mn>2</mn></msup>
</math>

این درس مرز کاربردها را معرفی می‌کند: SVG برای شکل برداری، canvas برای رسم برنامه‌ای و MathML برای ساختار فرمول. آموزش عمیق رسم و پردازش گرافیک بخشی جدا از مهارت‌های اصلی HTML است. نمونه‌ها را در مرورگرهای هدف خودت بررسی کن.