تفاوت canvas و SVG

canvas یا SVG؟ یه تصمیم‌گیری عملی و کامل

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

یادآوری سریع: تفاوت فلسفی این دو

قبل از هر چیز، بیا اصل ماجرا رو دوباره مرور کنیم: SVG یعنی «شکل‌ها را مستقیم به‌عنوان عنصر توصیف کن»؛ canvas یعنی «یه بوم بده، بقیه‌ش با جاوااسکریپت». این تفاوت فلسفی پایه‌ی تمام تفاوت‌های عملی‌ایه که الان می‌بینیم.

معیار اول: نگهداری و تغییر محتوا بعد از رسم

<!-- SVG: تغییر آسان بعد از رسم -->
<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue"></circle>
</svg>

<script>
  document.getElementById("myCircle").setAttribute("fill", "red");
</script>

تو SVG، چون هر شکل یه عنصر واقعی و مستقل تو DOM هست، می‌شه بعداً باهاش دقیقاً مثل هر عنصر HTML دیگه‌ای کار کرد؛ پیداش کرد با getElementById، رنگش رو عوض کرد، جابه‌جاش کرد، یا حتی پاکش کرد، بدون اینکه لازم باشه هیچی «دوباره» رسم بشه.

<!-- canvas: برای تغییر، باید دوباره کل صحنه رو رسم کنی -->
<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
  const ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(50, 50, 100, 100);
  // برای تغییر رنگ این مستطیل، باید کل canvas پاک و دوباره رسم بشه
  ctx.clearRect(0, 0, 200, 200);
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
</script>

تو canvas، هیچ مفهومی از «شکلی که رسم کردم» به‌عنوان یه عنصر مستقل وجود نداره؛ فقط یه سری پیکسل رنگ‌شده روی بومه. برای تغییر یه بخش خاص، معمولاً باید کل ناحیه رو پاک کنی (clearRect) و دوباره از اول رسم کنی. این یعنی برای صحنه‌های ساده که خیلی کم تغییر می‌کنن، SVG راحت‌تره؛ اما برای صحنه‌هایی که هزاران بار در ثانیه به‌طور کامل عوض می‌شن (مثل یه بازی پرتحرک)، این «رسم مجدد کامل» تو canvas عملاً یه مزیت عملکردیه، نه ضعف.

معیار دوم: عملکرد با تعداد زیاد المان

اینجا یکی از مهم‌ترین تفاوت‌های عملیه: وقتی تعداد المان‌هایی که باید رسم بشن خیلی زیاد بشه (مثلاً چند هزار ذره‌ی متحرک تو یه انیمیشن، یا هزاران نقطه‌ی داده تو یه نمودار پیچیده)، SVG چون هر شکل رو به‌عنوان یه عنصر مجزا تو DOM نگه می‌داره، مرورگر مجبوره این تعداد زیاد عنصر رو مدیریت کنه که می‌تونه کند بشه. اما canvas چون فقط پیکسل رنگ می‌کنه (بدون اینکه عنصر جداگانه‌ای برای هرکدوم بسازه)، برای تعداد خیلی زیاد المان، معمولاً عملکرد بهتری داره.

جدول تصمیم‌گیری بر اساس نوع پروژه

نوع پروژه	گزینه‌ی پیشنهادی	دلیل
آیکون و لوگو	SVG	مقیاس‌پذیری بی‌نقص، حجم فایل کم
نمودار ساده (چند ستون یا خط)	SVG	تعامل آسان (کلیک روی هر میله)، دسترسی‌پذیری بهتر
نقشه‌ی تعاملی با چند منطقه	SVG	هر منطقه یه عنصر مستقل با رویداد کلیک مجزا
بازی دوبعدی با صدها المان متحرک	canvas	عملکرد بهتر با تعداد زیاد و رسم مکرر
ویرایش و فیلتر تصویر (پیکسل‌به‌پیکسل)	canvas	دسترسی مستقیم به داده‌ی پیکسلی تصویر
امضای دیجیتال با ماوس/انگشت	canvas	رسم آزاد و پیوسته بر اساس حرکت اشاره‌گر

معیار سوم: دسترسی‌پذیری

همون‌طور که تو دو درس قبل دیدیم، این یکی از مهم‌ترین تفاوت‌هاست. SVG چون بخشی واقعی از DOM هست، می‌شه به هر عنصرش ویژگی‌های دسترسی‌پذیری (مثل role یا aria-label) اضافه کرد و صفحه‌خوان می‌تونه اون‌ها رو بشناسه. canvas این امکان رو به‌سادگی نداره؛ محتواش فقط پیکسله و صفحه‌خوان هیچ چیزی از ساختار واقعی نمی‌فهمه، مگر با تکنیک‌های اضافه و پیچیده‌تر.

معیار چهارم: حجم فایل و پیچیدگی کد

برای شکل‌های نسبتاً ساده، SVG معمولاً کد کوتاه‌تر و خواناتری داره (چون مستقیم شبیه HTML نوشته می‌شه). برای صحنه‌های خیلی پیچیده با منطق پیشرفته (مثل فیزیک برخورد تو یه بازی)، canvas معمولاً کد جاوااسکریپتی سنگین‌تری داره، اما این پیچیدگی برای اون نوع کاربرد اجتناب‌ناپذیره.

آیا می‌شه هر دو رو با هم ترکیب کرد؟

<div>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="green"></circle>
  </svg>
  <canvas id="gameCanvas" width="600" height="400"></canvas>
</div>

بله، کاملاً ممکنه؛ مثلاً یه سایت می‌تونه از SVG برای آیکون‌های رابط کاربری استفاده کنه، و هم‌زمان از canvas برای بخش بازی یا نمودار پیچیده‌ی داخل همون صفحه بهره ببره. این دو رقیب هم نیستن؛ هرکدوم ابزار مناسب یه کار خاصن.

یه مثال تصمیم‌گیری واقعی: نمودار فروش شرکت

فرض کن می‌خوای یه نمودار میله‌ای فروش ماهانه بسازی که کاربر بتونه روی هر میله کلیک کنه و جزئیات بیشتر ببینه. اینجا SVG گزینه‌ی بهتریه، چون هر میله می‌تونه یه عنصر rect مستقل باشه که رویداد کلیک جداگانه داره و برای صفحه‌خوان هم قابل‌توصیفه. اما اگه بخوای یه شبیه‌سازی ذره‌ای (Particle Simulation) با ده‌ها هزار نقطه‌ی متحرک بسازی که هر فریم صدها بار موقعیتشون عوض می‌شه، canvas انتخاب درست‌تریه، چون مدیریت این تعداد عنصر مستقل تو SVG عملاً مرورگر رو کند می‌کنه.

چند اشتباه رایج

• استفاده از canvas برای آیکون‌های ساده‌ای که با SVG هم مقیاس‌پذیرتر و هم قابل‌دسترس‌تر می‌شدن.
• تلاش برای ساخت یه بازی پیچیده با هزاران المان متحرک با SVG، که به مشکلات عملکردی جدی می‌خوره.
• نادیده‌گرفتن این‌که این دو ابزار قابل ترکیب هستن و لازم نیست فقط یکی رو تو کل پروژه انتخاب کرد.

بهترین روش‌ها

• برای گرافیک‌های ساده، تعاملی، و کم‌تعداد (آیکون، نمودار پایه، نقشه)، همیشه اول سراغ SVG برو.
• فقط وقتی تعداد المان‌ها خیلی زیاده یا نیاز به رسم پیکسلی مستقیم داری (مثل پردازش تصویر)، سراغ canvas برو.
• در پروژه‌های بزرگ، از ترکیب هر دو ابزار برای بخش‌های مختلف نترس.

نکته‌ی سئو

ترجیح SVG برای محتوای گرافیکی مهم (مثل نمودارهای داده) می‌تواند به فهم بهتر گوگل از محتوا کمک کند، چون این محتوا بخشی از خود HTML صفحه است، برخلاف canvas که محتوایش برای موتورهای جستجو کاملاً غیرقابل‌تحلیل است.

نکته‌ی دسترسی‌پذیری

برای هر پروژه‌ای که دسترسی‌پذیری یک اولویت جدی است (مثل سایت‌های دولتی یا آموزشی)، ترجیح SVG نسبت به canvas، در مواردی که هر دو از نظر فنی قابل‌استفاده هستند، انتخاب مسئولانه‌تری محسوب می‌شود.

جمع‌بندی

انتخاب بین canvas و SVG باید بر اساس نیاز واقعی پروژه انجام شود: SVG برای گرافیک‌های نسبتاً ساده، تعاملی و نیازمند دسترسی‌پذیری بهتر مناسب‌تر است، در حالی‌که canvas برای صحنه‌های پیچیده با تعداد زیاد المان یا نیاز به پردازش مستقیم پیکسلی عملکرد بهتری ارائه می‌دهد. این دو ابزار رقیب نیستند و می‌توانند در یک پروژه‌ی واحد در کنار هم استفاده شوند.