شنبه ۳۱ شهريور ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش HTML - گرافیک SVG

HTML (Hypertext Markup Language) و SVG (Scalable Vector Graphics) دو زبان نشانه گذاری هستند که برای ایجاد و نمایش محتوای گرافیکی در وب استفاده می شوند.

HTML برای ایجاد ساختار و محتوای یک صفحه وب استفاده می شود، در حالی که SVG برای ایجاد گرافیک های برداری استفاده می شود که می توانند بدون از دست دادن کیفیت خود مقیاس پذیر شوند. SVG فرمتی برای توصیف گرافیک های دوبعدی در قالب XML (Extensible Markup Language) است.

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

گرافیک های SVG را می توان با استفاده از تگ <svg> مستقیماً در HTML جاسازی کرد، که به توسعه دهندگان اجازه می دهد تا به راحتی گرافیک های برداری را در صفحات وب خود بگنجانند. SVG همچنین می تواند با استفاده از ابزارهای طراحی مختلف مانند Adobe Illustrator، Inkscape و Sketch ایجاد شود.

عنصر <svg> در HTML

عنصر <svg> در HTML برای ایجاد گرافیک SVG در یک صفحه وب استفاده می شود. این عنصر بعنوان ظرفی در نظر گرفته می شود که می تواند شامل عناصر گرافیکی مختلفی مانند اشکال، خطوط، منحنی ها، متن و تصاویر باشد.

عنصر <svg> دارای تعدادی ویژگی است که می توان از آنها برای کنترل اندازه، موقعیت و ظاهر گرافیک استفاده کرد. برخی از متداول ترین ویژگی های مورد استفاده عبارتند از:

  • width و height : عرض و ارتفاع گرافیک SVG را بر حسب پیکسل یا سایر واحدهای اندازه گیری مشخص می کند.
  • ViewBox: ناحیه قابل مشاهده گرافیک SVG را مشخص می کند. مقدار مجموعه ای از چهار عدد است که مختصات x و y گوشه سمت چپ بالای viewBox و سپس عرض و ارتفاع viewBox را نشان می دهد.
  • ReserveAspectRatio: تعیین می کند که چگونه گرافیک SVG باید مقیاس شود تا در ظرف خود قرار گیرد.
  • xmlns: فضای نام XML را برای عنصر SVG مشخص می کند. این ویژگی برای اینکه گرافیک های SVG به درستی نمایش داده شوند لازم است.

در اینجا مثالی از نحوه استفاده از عنصر <svg> برای ایجاد یک مستطیل ساده آورده شده است:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

در این مثال، عرض و ارتفاع گرافیک SVG را روی 100 پیکسل قرار داده ایم و یک مستطیل قرمز با عرض 80 پیکسل و ارتفاع 80 پیکسل ایجاد کرده ایم که 10 پیکسل از لبه های بالا و سمت چپ SVG قرار گرفته است. 

در اینجا نیز یک مثال SVG بسیار ساده است که یک دایره ایجاد می کند:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

این کد SVG یک دایره آبی با شعاع 40 پیکسل، در مرکز مختصات (50،50) درون بوم SVG، که دارای عرض و ارتفاع 100 پیکسل است، نمایش می دهد.

ویژگی های cx و cy مختصات x و y مرکز دایره را مشخص می کنند، در حالی که ویژگی r شعاع را مشخص می کند. ویژگی fill رنگ دایره را آبی می کند.

رایج ترین عناصر مورد استفاده در SVG

  • <rect> - برای ایجاد یک مستطیل استفاده می شود
  • <circle> - برای ایجاد یک دایره استفاده می شود
  • <ellipse> - برای ایجاد بیضی استفاده می شود
  • <line> - برای ایجاد یک خط استفاده می شود
  • <polyline> - برای ایجاد یک سری خطوط مستقیم متصل استفاده می شود
  • <polygon> - برای ایجاد یک شکل بسته با سه یا چند ضلع استفاده می شود
  • <path> - برای ایجاد اشکال پیچیده با استفاده از منحنی ها و خطوط استفاده می شود
  • <text> - برای افزودن متن به گرافیک SVG استفاده می شود
  • <image> - برای افزودن تصاویر شطرنجی به گرافیک SVG استفاده می شود
  • <use> - برای استفاده مجدد و ارجاع به عناصر SVG موجود استفاده می شود
  • <g> - برای گروه بندی عناصر SVG با هم استفاده می شود
  • <defs> - برای تعریف عناصر SVG قابل استفاده مجدد، مانند گرادیان ها یا فیلترها استفاده می شود
  • <linearGradient> - برای تعریف پر کردن گرادیان خطی استفاده می شود
  • <radialGradient> - برای تعریف پر شیب شعاعی استفاده می شود
  • <filter> - برای اعمال جلوه های بصری به عناصر SVG استفاده می شود 

این عناصر را می توان برای ایجاد گرافیک SVG پیچیده تر و پویاتر ترکیب و به صورت تودرتو استفاده کرد.

تفاوت بین SVG و Canvas

SVG (گرافیک برداری مقیاس پذیر) و Canvas هر دو برای ایجاد گرافیک در وب استفاده می شوند، اما از چندین جنبه کلیدی با هم تفاوت دارند.

  •  SVG یک فرمت مبتنی بر برداری است، به این معنی که گرافیک ها با معادلات ریاضی تعریف می شوند و می توانند تا بی نهایت مقیاس شوند بدون اینکه کیفیت خود را از دست بدهند. از طرف دیگر، Canvas یک فرمت مبتنی بر شطرنجی است، به این معنی که گرافیک با دستکاری پیکسل ها روی بوم با اندازه ثابت ایجاد می شود.
  • SVG مجموعه‌ای از عناصر گرافیکی مانند <rect>، <circle> و <path> را ارائه می‌کند که می‌توان از آنها برای ایجاد اشکال و خطوط استفاده کرد. از طرف دیگر Canvas مجموعه ای از روش های ترسیم مانند fillRect()، strokeRect() و lineTo() را ارائه می دهد که به توسعه دهندگان اجازه می دهد پیکسل ها را مستقیماً ترسیم و دستکاری کنند.
  • SVG از انیمیشن و تعامل از طریق CSS و جاوا اسکریپت پشتیبانی می کند. Canvas پشتیبانی داخلی برای انیمیشن ارائه نمی دهد، اما انیمیشن ها را می توان با استفاده از جاوا اسکریپت ایجاد کرد.
  • گرافیک های SVG را می توان برای کاربرانی که به فناوری کمکی مانند صفحه خوان ها متکی هستند در دسترس قرار داد، زیرا عناصر SVG می توانند شامل متن جایگزین و سایر ویژگی های دسترسی باشند. از طرف دیگر، گرافیک canvas، ذاتا قابل دسترسی نیست.
  •  گرافیک‌های SVG نسبت به گرافیک‌های Canvas در مقیاس‌بندی و رندر کردن اشکال پیچیده بهتر عمل می‌کنند. با این حال، گرافیک canvas می تواند برای ارائه اشکال ساده و تعداد زیادی ذرات یا انیمیشن سریعتر باشد.

به طور خلاصه، SVG برای ایجاد گرافیک های برداری مقیاس پذیر که به راحتی قابل دستکاری و در دسترس هستند، بهترین است، در حالی که Canvas برای ایجاد انیمیشن های بی درنگ، مبتنی بر پیکسل و تجربیات تعاملی مناسب است.

  گرافیک Canvas - درس قبلی
درس بعدی - مفهوم چند رسانه ای