مقایسه SVG با HTML5 Canvas

دوشنبه 13 شهريور 1396

7:58

طراحی سایت

[ ]

در سال 2004 HTML5 برای نقاشی و ایجاد تصاویر از روش های مبتنی بر کتابخانه جاوا اسکریپت با نام Canvas استفاده کرد همچنین در سال 2001 نیز SVG که مبتنی بر بردار بوده است برای تصاویر در طراحی سایت مورد استفاده قرار گرفت هر دو از این روش های دارای مزایا و معایبی می باشند . اما سوال این سات که کدامیک از این دو انتخاب بهتری برای شرایط های گوناگون می باشد و نقاط ضعف آن ها کجاست ؟

جاوا اسکریپت در مقابل XML

بزرگترین تفاوت بین HTML5 Canvas و SVG نشانه گذاری یا به جای آن برنامه نویسی است. در واقع با یک تگ < Canvas > که در HTML5 به کار می رود تصاویر ساخته می شود با این روش اجازه داده می شود انواع تصاویر و اشکال های مختلف نظیر مستطیل ، مربع و حتی چند ضلعی پیچیده ساخته می شود و کتابخانه های جاو اسکریپت نیز برای رنگ آمیزی در آن مورد استفاده قرار می گیرد . همچنین می توان نوع ایجاد تصاویر را در SVG به صورت زیر انجام داد ، طراحان سایت می توانند در طراحی سایت خود از یک خط کد جهت تولید تصاویر و یا اشکال استفاده نمایند این باعث می شود که سرعت تولید اشکال های مختلف برای طراحان ساده تر باشند همچنین SVG از نشانگذاری XML استفاده می کند که برای بسیار قابل فهم تر می باشد .

یکی دیگر از مزایای SVG این است که طراحی را می توان از طریق CSS انجام داد ، اشکال های مختلف در سایت می تواند از طریق شناسه ID و یا دسته بندی طراحی ایجاد شود . بنابراین نشانگذاری که در SVG انجام می شود آن رد در زمان و فضا پیش رو می کند .

پیکسل در مقابل بردار

یکی دیگر از تفاوت های این دو روش در فرمت آن ها می باشد در حالی که Canvas یک فرمت پیکسلی محسوب می شود فرمت SVG یک فرمت برداری می باشد البته Canvas باعث می شود که دارای ایجاد گرافیک با رزولیشن بالا به خوبی انجام شود اما اگر بر روی آن بزرگ نمایی انجام شود وضوح خود را از دست می دهد در صورتی که فرمت SVG به دلیل برداری بودن آن وضوح خود را از دست نمی دهد . همچنین می توان در SVG ، بیت مپ نیز قرار داد .

تعاملات و اثرات

فرمت SVG از CSS پشتیبانی می کند و تمامی گزینه های Style نیز در دسترس قرار دارند . به این ترتیب شما می توانید جلوه های شناور را به شکل های SVG ایجاد نمایید و با رنگ های مختلف آن ها را تغییر دهید . همچنین می توان با استفاده از کتابخانه های جاو اسکریپت مانند Canvas ، فرمت SVG را آدرس دهی نمود .

سرعت

تفاوت بزرگ بین HTML5 Canvas و SVG سرعت نهایی در مورد رندر و نمایش نقاشی ها در مرورگر است . با آنکه SVG دارای فرمت برداری است اما در تصاویر پیچیده و زیاد رندر کردن آن برای مرورگر ها نسبت به Canvas پایین تر می باشد و در این فاکتور Canvas سرعت بهتری دارد . البته در ایجاد تصاویری که دارای اندازه های بزرگی هستند SVG سرعت بهتر از Canvas دارد ولی در تصاویر پیچیده و تعداد زیاد آن Canvas سرعت بهتری برای نمایش دادن آن ها به کاربران سایت ایفا می کند .

دستکاری در پیکسل

از آنجا که HTML5 Canvas مبتنی بر پیکسل می باشد دستکاری آن نسبت به SVG بسیار ساده تر است گرچه SVG نیز امکاناتی برای تغییر رنگ و بیت مپ در اختیار طراحان قرار می دهد اما دستکاری Canvas به دلیل ماهیت پیکسل بودن آن بسیار ساده تر می باشد و این کار می تواند توسط انواع نرم افزار های گرافیکی به راحتی ایجاد شود .

[ بازدید : 35 ] [ امتیاز : 3 ] [ نظر شما :

]