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>
نتیجه در مرورگر :
یا به مثال زیر
<rect width=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />
</svg>
نتیجه در مرورگر:
یا به مثال زیر :
<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 و Canvas
SVG زبانی برای توصیف گرافیک های دو بعدی در XML است.
Canvas گرافیک دو بعدی را در حال پرواز (با جاوا اسکریپت) ترسیم می کند.
SVG مبتنی بر XML است ، به این معنی که هر عنصری در SVG DOM موجود است. می توانید کنترل کننده های رویداد JavaScript را برای یک عنصر پیوست کنید.
در SVG ، هر شکل کشیده شده به عنوان یک شی به یاد می آید. اگر ویژگی های یک شی SVG تغییر کند ، مرورگر می تواند به صورت خودکار شکل را دوباره ارائه دهد.
Canvas پیکسل به پیکسل ارائه می شود. در بوم ، به محض کشیدن گرافیک ، توسط مرورگر فراموش می شود. اگر موقعیت آن تغییر کند ، کل صحنه نیاز به ترسیم مجدد دارد ، از جمله اشیایی که ممکن است توسط این گرافیک پوشانده شده باشند.
نکات مهم در مورد Canvas :
وابسته به رزولیشن
هیچ پشتیبانی بر روی رویداد ها ندارد
سازگاری پایین در رسم متون
می توانید نتیجه را به صورت png یا jpg ذخیره کنید
مناسب برای بازی های گرافیک محور
نکات مهم در مورد SVG :
غیر وابسته به resolution
پشتیبانی بر روی روایداد ها
مناسب برای اپلیکیش های مقیاس بزرگ مانند گوگل مپ
رسم کند در استفاده های پیچیده(هر چیزی که به دفعات زیاد از dom استفاده کند آهسته می شود).
برای اپلیکشین های بازی مناسب نیست
امیدواریم این بخش از آموزش در مورد SVG در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .
