در این مطلب با سه روش خطی، داخلی و خارجی در استفاده از SVG برای آیکون‌ها در صفحات وب و وب اپلیکینش‌ها آشنا می‌شویم.
ساخت گرادینت شعاعی با عنصر radialGradient در SVG
همانند CSS، در SVG نیز امکان استفاده از گرادینت شعاعی با استفاده از عنصر مربوط به آن وجود دارد.
ساخت گرادینت خطی با عنصر linearGradient در SVG
همانطور که در سی‌اس‌اس ویژگی برای ساخت گرادینت خطی داریم، در SVG نیز این امکان وجود دارد که گرادینت‌های خطی داشته باشیم.
عنصر pattern در SVG (الگوها در SVG)
معمولا الگوها در طراحی وب سایت با استفاده از تصاویر بوجود می‌آیند اما بهتر است بدانیم که می‌توانیم آنها را با استفاده SVG نیز بسازیم که این باعث می شود از نظر کیفیت تصویر، خروجی بهتری داشته باشیم و همینطور نیازی نیست برای یک تصویر، درخواستی اضافه به سرور ارسال کنیم.
آموزش SVG
در این فصل آموزشی به صورت قدم به قدم و بطور کامل با مفاهیم SVG آشنا خواهیم شد. مطالب از ابتدایی تا پیشرفته خواهند بود.
ویژگی Stroke در SVG
همانطور که از ویژگی های مربوط به Fill برای رنگ کردن داخل یک شکل استفاده می کنیم، ویژگی های مربوط به Stroke به ما این قابلیت را می دهند تا دور یک عنصر را رنگ کنیم. Stroke یک Outline یا خط بیرونی برای عناصر SVG می باشد.
ویژگی Fill در SVG
در مطالب قبل از ویژگی fill در مثال ها استفاده کردیم در این مطلب این ویژگی را بصورت کامل بررسی می کنیم. ویژگی های fill به ما این قابلیت را می دهند تا داخل یک عنصر SVG را نقاشی کنیم.
عنصر Path یا مسیر در SVG
عنصر مسیر یا همان path در svg از اهمیت زیادی برای ترسیم اشکال مختلف برخوردار است. در این مطلب به طور کامل با این عنصر و سینتکس آن آشنا می شویم و نحوه ترسیم خطوط راست و منحنی را فرا خواهیم گرفت.
اشکال پایه در SVG
SVG شامل اشکال مستطیل، خط مستقیم، دایره، بیضی، چند ضلعي و چند خطی می باشد که در این مطلب به معرفی این اشکال پرداخته و با نحوه ساخت آنها آشنا می شویم.
ویژگی transform در SVG
عناصر SVG نیز مثل عناصر HTML می توانند توسط توابع rotate، translate، scale و غیره دچار تغییر شکل، مکان و دگرگونی های مختلف شوند.