میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

SVG در Html

SVG در Html چیست ؟

عرض سلام و خسته نباشید خدمت تمام کاربران عزیز امروز با آموزش SVG در Html در خدمت شما عزیزان هستیم .

تگ SVG تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثل یک مربع یا دایره و … که همگی می توانند درون تگ svg نگهداری شوند.

SVG مخفف Scalable Vector Graphics است ( گرافیک برداری مقیاس پذیر )
SVG برای تعریف گرافیک برای وب استفاده می شود

 

به مثال زیر دقت کنید :

<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>

نتیجه در مرورگر :

 

SVG در Html
SVG در Html

یا به مثال زیر

<rect width=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />
</svg>

نتیجه در مرورگر:

 

SVG در Html
SVG در Html

یا به مثال زیر :

 <polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” /
>

</svg>

نتیجه در مرورگر

SVG در Html
SVG در Html

 

 

تفاوت بین SVG و Canvas
SVG زبانی برای توصیف گرافیک های دو بعدی در XML است.
Canvas گرافیک دو بعدی را در حال پرواز (با جاوا اسکریپت) ترسیم می کند.
SVG مبتنی بر XML است ، به این معنی که هر عنصری در SVG DOM موجود است. می توانید کنترل کننده های رویداد JavaScript را برای یک عنصر پیوست کنید.
در SVG ، هر شکل کشیده شده به عنوان یک شی به یاد می آید. اگر ویژگی های یک شی SVG تغییر کند ، مرورگر می تواند به صورت خودکار شکل را دوباره ارائه دهد.
Canvas پیکسل به پیکسل ارائه می شود. در بوم ، به محض کشیدن گرافیک ، توسط مرورگر فراموش می شود. اگر موقعیت آن تغییر کند ، کل صحنه نیاز به ترسیم مجدد دارد ، از جمله اشیایی که ممکن است توسط این گرافیک پوشانده شده باشند.

 

بیشتر
چند رسانه ای یا Multimedia

نکات مهم در مورد Canvas :

وابسته به رزولیشن

هیچ پشتیبانی بر روی رویداد ها ندارد

سازگاری پایین در رسم متون
می توانید نتیجه را به صورت png یا jpg  ذخیره کنید
مناسب برای بازی های گرافیک محور

 

نکات مهم در مورد SVG :

غیر وابسته به resolution
پشتیبانی بر روی روایداد ها
مناسب برای اپلیکیش های مقیاس بزرگ مانند گوگل مپ
رسم کند در استفاده های پیچیده(هر چیزی که به دفعات زیاد از dom استفاده کند آهسته می شود).
برای اپلیکشین های بازی مناسب نیست

 

 

 

امیدواریم این بخش از آموزش در مورد SVG در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟