در این آموزش با رسم تصویر و روش‌های مختلف انتخاب تصویر برای رسم در canvas و نکات مربوط به آنها آشنا می‌شوید.
شکل‌های پایه در canvas
مروری بر شکل‌های پایه و ویژگی‌های آنها در canvas. در این آموزش انواع خط و منحنی، و معادل آنها در SVG را مورد بررسی قرار می‌دهیم و موارد خاص را بازگو می‌کنیم.
برش در SVG با عنصر clipPath
با استفاده از عنصر <clipPath> می‌توان ناحیه یا مسیر برش تعریف کرد و از آن در ویژگی clip-path برای مخفی کردن قسمتی از یک عنصر HTML یا SVG استفاده کرد. زمانی که مسیر برشی را بر روی یک عنصر اعمال می‌کنیم، هر قسمتی از آن عنصر که خارج از مسیر برش قرار بگیرند، نمایش داده نمی‌شوند.
استفاده از SVG برای آیکون‌ها
در این مطلب با سه روش خطی، داخلی و خارجی در استفاده از SVG برای آیکون‌ها در صفحات وب و وب اپلیکینش‌ها آشنا می‌شویم.
ساخت گرادینت شعاعی با عنصر radialGradient در SVG
همانند CSS، در SVG نیز امکان استفاده از گرادینت شعاعی با استفاده از عنصر مربوط به آن وجود دارد.
ساخت گرادینت خطی با عنصر linearGradient در SVG
همانطور که در سی‌اس‌اس ویژگی برای ساخت گرادینت خطی داریم، در SVG نیز این امکان وجود دارد که گرادینت‌های خطی داشته باشیم.
عنصر pattern در SVG (الگوها در SVG)
معمولا الگوها در طراحی وب سایت با استفاده از تصاویر بوجود می‌آیند اما بهتر است بدانیم که می‌توانیم آنها را با استفاده SVG نیز بسازیم که این باعث می شود از نظر کیفیت تصویر، خروجی بهتری داشته باشیم و همینطور نیازی نیست برای یک تصویر، درخواستی اضافه به سرور ارسال کنیم.
متن در SVG
در SVG امکان قرار دادن متن نیز وجود دارد، که برای این کار باید از عنصری به نام <text> استفاده کنیم.
آموزش SVG
در این فصل آموزشی به صورت قدم به قدم و بطور کامل با مفاهیم SVG آشنا خواهیم شد. مطالب از ابتدایی تا پیشرفته خواهند بود.
ویژگی Stroke در SVG
همانطور که از ویژگی های مربوط به Fill برای رنگ کردن داخل یک شکل استفاده می کنیم، ویژگی های مربوط به Stroke به ما این قابلیت را می دهند تا دور یک عنصر را رنگ کنیم. Stroke یک Outline یا خط بیرونی برای عناصر SVG می باشد.