مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در آخرین مطالبی که در ادامه بحث html5 ارائه شد ، پس از آشنایی با html5 و ساختار کلی عناصر در html5 و همچنین آشنایی با عناصر جدید در html5، در این بخش از آموزش ها، قصد داریم در مورد کار با تگ گرافیکی SVG در html5 و تفاوت بین تگ SVG و تگ Canvas ، مطالبی آموزشی و کاربردی را ارائه دهیم. البته در مطالب آموزشی اولیه ی html، در پی وی لرن، در مورد گرافیک در html ، اشاره ای به تگ کاربردی <canvas> داشتیم. در این بخش نیز ، در ادامه مبحث گرافیک در html ، به بررسی تگ گرافیکی و پرکاربردی در html در قالب موضوع آموزشی کار با تگ گرافیکی SVG ، می پردازیم.
کار با تگ گرافیکی SVG در html5
تگ SVG ، برای رسم اشکال هندسی با قابلیت تغییر اندازه ، بکار می رود. این تگ در حالت کلی برای تعریف گرافیک در وب بکار می رود.
تگ <svg>
تگ <svg> ، به عنوان ظرفی برای گرافیک های رسم شده عمل می کند.
تگ <svg> ، دارای چندین روش برای رسم مسیر ها ، مربع یا مستطیل ، دایره ، متن و عکس های گرافیکی است.
رسم دایره
مثال- رسم دایره با تگ svg
مثال : رسم دایره
| <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> |
رسم مستطیل
مثال- رسم مستطیل با تگ <svg>:
مثال : رسم مستطیل
| <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg> |
رسم مستطیل به گوشه های گرد
مثال : مستطیل با گوشه های گرد
| <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> |
رسم ستاره
مثال : رسم ستاره
| <svg width="300" height="200"> <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>
مثال : لوگوی svg
| <svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg> |
تفاوت بین تگ SVG و تگ Canvas
SVG زبانی برای رسم اشکل دوبعدی گرافیکی در XML است.
Canvas اشکال هندسی دو بعدی را در حال حرکت رسم می کند. (با استفاده از جاوااسکریپت).
SVG مبتنی بر XML است، به این معنی که هر عنصر در SVG DOM موجود است. می توانید یک عنصر را برای رویداد جاوااسکریپت اضافه کنید.
در SVG هر شکل کشیده به عنوان یک شیء در نظر گرفته شده است.
اگر ویژگی یک شیء SVG تغییر کند، مرورگر می تواند به صورت خودکار شکل را بروز کند.
مقایسه ی Canvas و SVG
جدول زیر برخی از تفاوت های مهم بین Canvas و SVG را نشان می دهد:
| Canvas | SVG |
|---|
روزلوشون وابسته است
پشتیبانی از رویداد پردازنده پشتیبانی نمی کند
قابلیت رندر متن ضعیف
شما می توانید تصویر حاصل را به عنوان .png یا .jpg ذخیره کنید
مناسب برای بازی های گرافیکی شدید | رزولوشون مستقل
پشتیبانی از رویداد پردازنده
برای برنامه های کاربردی با مناطق رندر بزرگ مناسب (نقشه های گوگل) مناسب است
رندر کند اگر پیچیده باشد (هر چیزی که از DOM استفاده می کند بسیار کند خواهد بود)
برای برنامه های بازی مناسب نیست |
کلام آخر
گاها در طراحی وب صفحات وب و یا درج محتوای آموزشی، علمی و … ممکن است که نیاز به رسم اشکال گرافیکی ساده در بخش هایی داشته باشید، که در این خصوص مباحث فوق که در رابطه با کار با تگ گرافیکی SVG در html5 ارائه شد تا حدی می تواند به شما کمک کند.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
مهدی جنتی
مستطیلو ک من میکشم تو مختصات ب مشکل میخورم .مختصات یا مستطیل رو ناپدید میکنه یا اصن جابجا نمیکنه