کانواس HTML5 در برابر SVG
کانواس و SVG هر دو اجازه میدهند شما در مرورگر گرافیک ایجاد کنید، اما اساساً متفاوت هستند.
SVG
SVG یک زبان است که برای توصیف گرافیکهای 2D از XML استفاده میکند.
SVG بر اساس XML است، این بدان معناست که هر عنصر در SVG DOM قابل دسترسی است. میتوانید پردازشکنندگان رویداد JavaScript را به یک عنصر متصل کنید.
در SVG، هر شکل ترسیم شده به عنوان یک شیء در نظر گرفته میشود. اگر ویژگیهای شیء SVG تغییر کند، مرورگر میتواند به طور خودکار شکل را مجدداً ترسیم کند.
کانواس
کانواس از طریق JavaScript برای ترسیم گرافیکهای 2D استفاده میکند.
کانواس به صورت پیکسلی رندر میشود.
در کانواس، پس از اینکه یک شکل ترسیم شده است، دیگر به توجه مرورگر نمیپردازد. اگر موقعیت آن تغییر کند، کل صحنه باید مجدداً ترسیم شود، از جمله هر چیزی که ممکن است توسط شکل پوشانده شده باشد.
مقایسه کانواس و SVG
در جدول زیر برخی از تفاوتهای بین کانواس و SVG آورده شده است.
کانواس
- بستگی به وضوح دارد
- پشتیبانی از پردازشکنندگان رویداد را ندارد
- توانایی ضعیف در رندرینگ متن
- قادر به ذخیره نتایج تصویری به فرمتهای .png یا .jpg است
- بهترین استفاده برای بازیهای تصویری، که بسیاری از اشیاء به طور مکرر مجدداً رندر میشوند
SVG
- بستگی به وضوح ندارد
- پشتیبانی از پردازشکنندگان رویداد
- بهترین استفاده برای برنامههایی با منطقههای رندرینگ بزرگ (مثل نقشههای گوگل)
- پیکربندی پیچیده میتواند سرعت رندرینگ را کاهش دهد (هر برنامهای که از DOM بیش از حد استفاده کند سریع نیست)
- نامناسب برای برنامههای بازی
