آموزش اس‌وی‌جی (گرافیک برداری مقیاس‌پذیر) ۲۰۲۴ - درون کد - آخرین آپدیت

دانلود SVG (Scalable Vector Graphics) 2024 - Inside the Code

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

آموزش جامع SVG: از صفر تا صد

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

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

آنچه در این دوره خواهید آموخت:

این دوره به طور کامل به SVGs می‌پردازد. پوشش می‌دهیم که چگونه SVGها را پیدا و دانلود کنید، چطور SVGها را در برنامه‌هایی مانند Inkscape و Illustrator بسازید و همچنین روش‌های مختلف افزودن SVG به صفحات وب خود را یاد می‌گیریم. تمرکز اصلی این دوره بر درک کد متنی SVG است.

نشان می‌دهیم که چگونه با جزئیات تعاریف و کاربردهای عناصر و صفات متعدد SVG، آن‌ها را مشاهده، درک، نوشتن و ویرایش کنید. موضوعاتی مانند:

  • نحوه کدنویسی اشکال پایه مانند دایره، خط، منحنی و چندضلعی.
  • چگونگی درک مسیرها و دستورات مورد استفاده برای ترسیم آن‌ها.
  • نحوه افزودن عناصر متنی هنری به یک SVG.
  • نحوه هدف قرار دادن و استایل‌دهی عناصر خاص SVG با استفاده از CSS یا صفات نمایشی.
  • نحوه درک نماها، viewBox، اندازه‌بندی و موقعیت‌دهی عناصر SVG.
  • چگونه عناصر SVG می‌توانند تبدیل یا متحرک شوند.
  • نحوه پیاده‌سازی گرادیان‌ها، فیلترها، مسیرهای برش (clip-paths) و ماسک‌ها.
  • نحوه ایجاد، ویرایش یا حذف عناصر SVG از صفحه وب با استفاده از JavaScript.
  • نحوه استفاده از عنوان‌ها، توضیحات، نقش‌ها و صفات aria برای دسترسی‌پذیری و بهینه‌سازی SVG برای سئو (SEO).

پیش‌نیازها:

این دوره نیازمند دانش قبلی از HTML و CSS است. آشنایی با Visual Studio Code یا ویرایشگر کد منبع دیگر مفید خواهد بود اما کاملاً ضروری نیست. مهم‌تر از همه، داشتن اشتیاق برای یادگیری جدیدترین اطلاعات در مورد گرافیک‌های برداری مقیاس‌پذیر است.

تجربه کدنویسی قبلی کاملاً ضروری نیست، زیرا این دوره مروری خوب بر اصول اولیه SVG ارائه می‌دهد. اما برای بهره‌مندی کامل از درس‌ها، داشتن دانش یا تجربه با HTML5 و CSS3 مفید است.


سرفصل ها و درس ها

مقدمه‌ای بر گرافیک‌های وکتور مقیاس‌پذیر (SVG) Introduction to Scalable Vector Graphics (SVG)

  • مقدمه دوره Course Introduction

  • گرافیک‌های SVG در مقابل رستری و مزایای SVG برای وب SVG vs Raster Graphics and SVG Advantages for the Web

یافتن، ساختن و استفاده از SVGها Finding, Making, and Using SVGs

  • دانلود، تألیف یا کدنویسی SVGها Downloading, Authoring, or Coding SVGs

  • ابزارهای مفید برای این دوره Helpful Tools for this Course

  • افزودن SVGها به یک صفحه وب Adding SVGs to a Web Page

مقدمه‌ای بر کد SVG Introduction to SVG Code

  • مقدمه‌ای بر عناصر کد SVG Introduction to SVG Code Elements

  • عناصر بصری SVG - اشکال پایه SVG Visual Elements - Basic Shapes

  • عناصر ساختاری، کانتینر و توصیفی SVG SVG Structural, Container, and Descriptive Elements

  • مقدمه‌ای بر ویژگی‌های SVG Introduction to SVG Attributes

استایل دهی به SVGها Styling SVGs

  • نحوه استایل دهی به عناصر SVG How to Style SVG Elements

مسیرها و دستورات مسیر SVG SVG Paths and Path Commands

  • مقدمه‌ای بر مسیرهای SVG Introduction to SVG Paths

  • دستورات مسیر SVG: MoveTo و LineTo SVG Path Commands: MoveTo and LineTo

  • دستورات مسیر SVG: منحنی‌ها و قوس‌ها SVG Path Commands: Curves and Arcs

  • مشاهده و ویرایش مسیرهای SVG Viewing and Modifying SVG Paths

متن SVG SVG Text

  • مقدمه‌ای بر متن SVG Introduction to SVG Text

  • متن SVG روی مسیر SVG Text on a Path

اندازه‌بندی SVG - Viewport و viewBox SVG Sizing - Viewport and viewBox

  • مقدمه‌ای بر اندازه‌بندی و موقعیت‌یابی SVG Introduction to SVG Sizing and Positioning

  • نسبت‌های تصویر SVG SVG Aspect Ratios

تبدیلات و انیمیشن‌های SVG SVG Transformations and Animations

  • تبدیلات SVG SVG Transforms

  • انیمیشن‌های SVG - بخش ۱ SVG Animations - Part 1

  • انیمیشن‌های SVG - بخش ۲ SVG Animations - Part 2

  • ترسیم خطوط SVG SVG Line Drawings

سایر ویژگی‌ها و موضوعات SVG Other SVG Features and Topics

  • گرادیان‌های خطی و شعاعی Linear and Radial Gradients

  • فیلترهای SVG SVG Filters

  • مسیرهای برش و ماسک‌ها Clip-Paths and Masks

دستکاری SVG با جاوا اسکریپت SVG Manipulation by JavaScript

  • استفاده از جاوا اسکریپت برای دستکاری عناصر SVG Using JavaScript to Manipulate SVG Elements

قابلیت دسترسی و سئو SVG SVG Accessibility and SEO

  • قابلیت دسترسی و سئو SVG SVG Accessibility and SEO

  • نکات پایانی Concluding Remarks

نمایش نظرات

آموزش اس‌وی‌جی (گرافیک برداری مقیاس‌پذیر) ۲۰۲۴ - درون کد
جزییات دوره
3 hours
28
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
306
4.5 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Peter Bartholomew Peter Bartholomew

طراح وب‌سایت