تدریس SVG

SVG گرافیک‌های وکتور قابل بزرگنمایی (Scalable Vector Graphics) است.

SVG به معنای XML تعریف فرمت‌های گرافیک بر اساس وکتور است.

مثال‌های هر فصل

با استفاده از ویرایشگر "آموزش شخصی" ما، می‌توانید SVG را ویرایش کنید و سپس بر روی دکمه کلیک کنید تا نتایج را مشاهده کنید.

مثال SVG

<html>
<body>
<h1>SVG اولین من</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

آموزش شخصی

آگاهی‌های پایه‌ای مورد نیاز

قبل از ادامه، باید اطلاعات زیر را به خوبی بدانید:

  • HTML
  • اساسی XML

اگر می‌خواهید ابتدا این موارد را یاد بگیرید، لطفاً به آموزش‌های مرتبط در صفحه اصلی ما بروید.

چه چیزی است SVG؟

  • SVG به معنای گرافیک‌های وکتور قابل بزرگنمایی است
  • SVG برای تعریف گرافیک‌های بر اساس وکتور برای وب استفاده می‌شود
  • SVG با فرمت XML گرافیک‌ها تعریف می‌شوند
  • SVG هر عنصر و هر ویژگی در فایل می‌تواند برای انیمیشن تنظیم شود
  • SVG استاندارد پیشنهادی W3C است
  • SVG با استانداردهای W3C دیگر مانند DOM و XSL

SVG استاندارد پیشنهادی W3C است

SVG نسخه 1.0 در تاریخ 4 سپتامبر 2001 به عنوان استاندارد پیشنهادی W3C تصویب شد.

SVG نسخه 1.1 در تاریخ 14 ژانویه 2003 به عنوان استاندارد پیشنهادی W3C تصویب شد.

SVG نسخه 1.1 (دومین نسخه) در تاریخ 16 اوت 2011 به عنوان استاندارد پیشنهادی W3C تصویب شد.

SVG مزایای

در مقایسه با فرمت‌های تصویری دیگر (مانند JPEG و GIF)، استفاده از SVG مزایای آن این است که:

  • SVG تصاویر می‌توانند با هر ویرایشگر متن ایجاد و ویرایش شوند
  • SVG تصاویر می‌توانند جستجو، شاخص‌گذاری، اسکریپت‌سازی و فشرده‌سازی شوند
  • SVG تصاویر قابل توسعه هستند
  • SVG تصاویر می‌توانند با هر رزولوشن با کیفیت بالا چاپ شوند
  • SVG تصاویر قابل بزرگنمایی هستند
  • SVG تصاویر در بزرگنمایی یا کوچکنمایی کیفیت خود را از دست نمی‌دهند
  • SVG یک استاندارد باز است
  • SVG فایل‌های XML

ایجاد SVG تصاویر

SVG تصاویر می‌توانند با هر ویرایشگر متن ایجاد شوند، اما استفاده از برنامه‌های طراحی (مانند Inkscapeایجاد تصاویر SVG معمولاً آسان‌تر است.