SVG به عنوان یک فرمت گرافیکی برداری، مزایای متعددی نسبت به فرمت‌های رستر (مانند PNG و JPG) دارد:

• مقیاس‌پذیری: گرافیک‌های SVG بدون افت کیفیت، در هر اندازه‌ای قابل نمایش هستند. این ویژگی برای طراحی وب‌سایت‌های واکنش‌گرا (Responsive) حیاتی است.
• کیفیت بالا: SVG از خطوط و اشکال ریاضی برای ترسیم گرافیک استفاده می‌کند، بنابراین تصاویر شارپ و واضحی را در هر رزولوشنی ارائه می‌دهد.
• حجم کم: فایل‌های SVG معمولاً حجم کمتری نسبت به تصاویر رستر دارند، که باعث افزایش سرعت بارگذاری صفحات وب می‌شود.
• قابلیت دستکاری: SVGها را می‌توان با استفاده از CSS و JavaScript به راحتی دستکاری و انیمیشن‌سازی کرد. این ویژگی، امکان ایجاد تعاملات پیچیده و جذاب را فراهم می‌کند.

کاربردهای SVG گسترده است و شامل موارد زیر می‌شود:

• آیکون‌ها و لوگوها
• تصاویر و نمودارهای تعاملی
• انیمیشن‌های پویا
• نقشه‌های تعاملی
• طراحی رابط کاربری (UI)

این دوره به شما کمک می‌کند تا به یک متخصص SVG تبدیل شوید. سرفصل‌های اصلی دوره عبارتند از:

• مبانی SVG: درک ساختار SVG، عناصر اصلی (مانند `
• استایل‌دهی SVG با CSS: استفاده از CSS برای رنگ‌آمیزی، تنظیم حاشیه‌ها، سایه‌دهی و اعمال افکت‌های بصری به عناصر SVG.
• کار با متن در SVG: ایجاد و استایل‌دهی متن، و استفاده از فونت‌های وب (Web Fonts) در SVG.
• مسیرها (Paths) و اشکال پیچیده: یادگیری نحوه ایجاد مسیرهای پیچیده با استفاده از دستورات M، L، H، V، C، S، Q، T و Z، و ساخت اشکال سفارشی.
• گروه‌بندی و مدیریت عناصر SVG: استفاده از تگ `` برای گروه‌بندی عناصر SVG و اعمال تغییرات مشترک به آن‌ها.
• ترانسفورم‌ها (Transforms): اعمال ترانسفورم‌های translate, rotate, scale و skew برای تغییر موقعیت، چرخش و مقیاس‌بندی عناصر SVG.
• انیمیشن‌های SVG:
  • انیمیشن‌های CSS: استفاده از CSS برای ایجاد انیمیشن‌های ساده و موثر.
  • انیمیشن‌های SMIL (Synchronized Multimedia Integration Language): یادگیری زبان SMIL برای ایجاد انیمیشن‌های پیچیده‌تر.
  • انیمیشن با جاوااسکریپت: استفاده از کتابخانه‌های جاوااسکریپت (مانند GreenSock - GSAP) برای ایجاد انیمیشن‌های پیشرفته و تعاملی.
• بهینه‌سازی SVG: تکنیک‌های کاهش حجم فایل‌های SVG و افزایش عملکرد آن‌ها.
• ایجاد SVG های واکنش‌گرا: طراحی SVG هایی که در دستگاه‌های مختلف به درستی نمایش داده شوند.

برای شرکت در این دوره، داشتن دانش اولیه در زمینه‌های زیر ضروری است:

• HTML: آشنایی با ساختار HTML و نحوه استفاده از تگ‌ها.
• CSS: آشنایی با اصول استایل‌دهی CSS و نحوه اعمال استایل به عناصر HTML.
• جاوااسکریپت (اختیاری): داشتن دانش پایه جاوااسکریپت برای استفاده از کتابخانه‌های انیمیشن و ایجاد تعاملات پیچیده‌تر، مفید خواهد بود.

اگر با HTML و CSS آشنایی دارید، این دوره برای شما مناسب است. حتی اگر تجربه کمی در این زمینه دارید، می‌توانید با تلاش و تمرین، مطالب دوره را فرا بگیرید.

این دوره به صورت گام به گام و با ارائه مثال‌های عملی، شما را با مفاهیم SVG آشنا می‌کند. سرفصل‌های دوره به شرح زیر است:

• مقدمه و مروری بر SVG
  • SVG چیست و چرا باید از آن استفاده کنیم؟
  • مروری بر مزایا و معایب SVG
  • آماده‌سازی محیط توسعه
• ساختار و عناصر اصلی SVG
  • تگ `
  • اشکال پایه: ``, ``, ``, ``, ``, ``
  • استفاده از صفت‌های fill, stroke, stroke-width
• استایل‌دهی SVG با CSS
  • انتخابگرهای CSS برای SVG
  • استایل‌دهی داخلی، خارجی و inline
  • استفاده از `class` و `id`
  • افکت‌های CSS: shadows, filters
• کار با متن در SVG
  • تگ `` و تنظیم متن
  • استفاده از `` برای متن‌های چند خطی
  • استفاده از فونت‌های وب در SVG
• مسیرها (Paths) و اشکال پیچیده
  • آشنایی با دستورات M, L, H, V, C, S, Q, T, Z
  • ایجاد اشکال سفارشی با استفاده از مسیرها
• گروه‌بندی و مدیریت عناصر SVG
  • تگ `` و استفاده از آن برای گروه‌بندی
  • استفاده از `clipPath` و `mask`
• ترانسفورم‌ها (Transforms)
  • `translate`, `rotate`, `scale`, `skew`
  • ترکیب ترانسفورم‌ها
• انیمیشن‌های SVG با CSS
  • `transition` و `animation`
  • ساخت انیمیشن‌های ساده با CSS
• انیمیشن‌های SVG با SMIL
  • تگ‌های ``, ``, ``
  • ایجاد انیمیشن‌های پیچیده‌تر با SMIL
• انیمیشن‌های SVG با جاوااسکریپت
  • آشنایی با کتابخانه‌های انیمیشن (GSAP)
  • ایجاد انیمیشن‌های تعاملی و پیشرفته
• بهینه‌سازی و واکنش‌گرایی SVG
  • کاهش حجم فایل SVG
  • ایجاد SVGهای واکنش‌گرا
  • استفاده از `viewBox` و `preserveAspectRatio`
• پروژه‌های عملی
  • طراحی آیکون‌ها با SVG
  • ساخت نمودارهای تعاملی
  • ایجاد انیمیشن‌های جذاب

این دوره با ارائه مثال‌های عملی و پروژه‌های کاربردی، به شما کمک می‌کند تا مهارت‌های خود را در زمینه SVG و انیمیشن‌سازی ارتقا دهید.