برتری و ضعف های svg و canvas برای کارهای گرافیکی در HTML5

Question

برای انجام کارهای گرافیکی در یک برنامه تحت وب (مانند رسم انواع نمودار) هم از svg و هم از canvas می توان استفاده نمود.

این دو از لحاظ ساختار چه تفاوتهایی دارند و هر کدام برای کدام دسته از کارها مناسب ترند؟

Answer 1

تفاوتهای عمده این دو API عبارتند از:

• SVG مقیاس پذیر است در حالی که canvas به صورت پیکسل به پیکسل نسبت به رسم گرافیک اقدام می کند.
• SVG در فایل قابلیت ذخیره سازی دارد (چون به صورت تگ اقدام به رسم گرافیک می شود) در حالی که canvas به وسیله Java Script اقدام به رسم گرافیک می کند، و از آنجایی که تک تک اجزای SVG در DOM موجود است ویرایش آن نیز به راحتی ممکن است.

در کل می توان گفت تنها مزیت canvas  سهولت در استفاده می باشد.

SVG علاوه بر موارد مطرح شده به علت خوانایی بالای xml ، نگهداری و توسعه اش راحت تر است در حالی که تولید گرافیک توسط کانواس به دانش برنامه نویسی نیاز دارد (که طراحان صفحات وب معمولا این تخصص را ندارند)

با توجه به اینکه SVG در DOM قرار می گیرد، از سرعت رندر شدن پایین تری برخوردار است که عیب آن می باشد، لذا استفاده از آن برای ایجاد گرافیک های دینامیک (مانند بازی تحت وب) مناسب نیست.