کانواس HTML5 در مقابل SVG

کانواس و SVG هر دو اجازه می‌دهند شما در مرورگر گرافیک ایجاد کنید، اما در اصل با یکدیگر متفاوت هستند.

SVG

SVG یک زبان است که برای توصیف گرافیک‌های دو بعدی از طریق XML استفاده می‌کند.

SVG بر اساس XML است، این بدان معناست که هر عنصر در SVG DOM قابل دسترسی است. می‌توانید پردازش‌کنندگان رویداد JavaScript را به یک عنصر متصل کنید.

در SVG، هر شکل کشیده شده به عنوان یک شیء در نظر گرفته می‌شود. اگر ویژگی‌های شیء SVG تغییر کند، مرورگر می‌تواند به طور خودکار شکل را بازسازی کند.

کانواس

کانواس از طریق JavaScript برای کشیدن گرافیک‌های دو بعدی استفاده می‌کند.

کانواس به صورت پیکسلی رندر می‌شود.

در کانواس، پس از اینکه یک شکل کشیده شد، دیگر توجه مرورگر به آن نمی‌شود. اگر موقعیت آن تغییر کند، کل صحنه باید دوباره کشیده شود، از جمله هر چیزی که ممکن است توسط شکل پوشیده شده باشد.

مقایسه کانواس و SVG

در جدول زیر برخی از تفاوت‌های بین کانواس و SVG آورده شده است.

کانواس

  • وابسته به رزولوشن
  • پشتیبانی از پردازش‌کنندگان رویداد را ندارد
  • توانایی ضعیف در رندر کردن متن
  • قادر به ذخیره نتایج به فرمت‌های .png یا .jpg است
  • بهترین انتخاب برای بازی‌های تصویری است که در آن بسیاری از اشیاء به طور مداوم دوباره رندر می‌شوند

SVG

  • غیر وابسته به رزولوشن
  • پشتیبانی از پردازش‌کنندگان رویداد
  • بهترین انتخاب برای برنامه‌هایی که دارای مناطق رندر بزرگ هستند (مثلاً نقشه‌های گوگل)
  • پیکربندی پیچیده باعث کاهش سرعت رندر می‌شود (هر برنامه‌ای که از DOM بیش از حد استفاده کند سریع نیست)
  • ناپسند برای استفاده در برنامه‌های بازی