گرافیک برداری مقیاس پذیر (SVG) عناصر طراحی همه کاره را ایجاد می کند. آنها می توانند پیچیده یا ساده باشند. می توانید آنها را با انیمیشن و جلوه های ویژه ترکیب کنید. و ذاتاً پاسخگو هستند.
جای تعجب نیست که طراحان وب به این قالب روی آورده اند. SVG سطح جدیدی از انعطاف پذیری را در مقایسه با تصاویر مبتنی بر پیکسل اضافه می کند. آنها یک تطابق کامل با طراحی مدرن هستند. به علاوه، پشتیبانی مرورگر جهانی است.
به این ترتیب، ما به جستجوی نمونه هایی از اشکال SVG پرداختیم. هدف یافتن مجموعه ای متنوع از پیاده سازی ها بود. کنجکاو هستید که چه چیزی ممکن است؟ به این هشت نمونه جالب از اشکال SVG در عمل نگاه کنید.
امواج CSS ساده توسط گودکاتز
گرافیک تقسیم کننده برای فرمت SVG مناسب است. این تصاویر در هر صفحه نمایشی کاملاً تیز باقی می مانند. امواج متحرک در این قطعه ظرافت را به شما اضافه می کند. حتی بهتر از آن، کاربران تلفن همراه می توانند از این ویژگی بدون ضربه عملکرد لذت ببرند.
Pen Simple CSS Waves | موبایل و عرض کامل توسط Goodkatz
تصویر SVG رونمایی شد توسط سیلویا جویا فلوریو
در اینجا نمونه ای از کارهایی است که جلوه های ماسک SVG می توانند انجام دهند. تماشا کنید که چند ضلعی ها از این درخت می افتند تا یک تصویر ماسک نشان داده شود. برای تقویت انیمیشن از CSS و جاوا اسکریپت استفاده می شود. این افکت به مواردی مانند فتوشاپ و فلش نیاز داشت. دیگر نیازی به آن ابزارهای سنگین نیست.
تصویر قلم SVG رونمایی شده توسط Silvia Gioia Florio را ببینید
انتقال صفحه شکل SVG توسط Pixelbuilders
می‌توانیم از SVG برای ایجاد انتقال‌های صفحه قانع‌کننده استفاده کنیم. روی منوی “همبرگر” کلیک کنید یا اسکرول کنید تا جلوه قطره ای را آزاد کنید. انگار صفحه نمایش درست جلوی چشمانمان آب می شود. و مطمئناً توجه کاربر را به خود جلب می کند.
تغییر شکل صفحه قلم SVG توسط Pixelbuilders را ببینید
عناصر رابط کاربری مایع توسط آرون ایکر
عناصر ساده مانند دکمه های رادیویی و چک باکس ها نیز از SVG بهره می برند. این قطعه دارای عناصر فرم معمولی است که با انیمیشن های شیک پوشیده شده اند. این یک ظاهر بسیار صیقلی اضافه می کند که مایل ها جلوتر از حالت پیش فرض است.
عناصر Pen Liquid UI توسط Aaron Iker را ببینید
SVG Flowers صفحه ورود به سیستم توسط مگ وین
لازم نیست SVG محور یک عنصر باشد. همچنین می تواند در نقش تزئینی شکوفا شود. در اینجا، یک شکل واحد از طریق CSS تکرار و استایل دهی می شود. هر تنوع باعث ایجاد عمق و زیبایی می شود.
صفحه ورود به سیستم Pen SVG Flowers توسط مگ وین را ببینید
گرادیان تطبیقی SVG توسط آندروس گیرادو
این قطعه از افکت های فیلتر SVG برای ایجاد یک گرادیان نویز استفاده می کند. امواج متحرک در سراسر درگاه دید کشیده می شوند. ممکن است یک افزودنی منظم به قسمت پایین صفحه باشد.
شیب تطبیقی Pen SVG توسط Andros Guiradó را ببینید
چند پیاده سازی از SVG در این قطعه وجود دارد. اما تمرکز اصلی ما پس زمینه منحنی است. این یک عنصر کلیدی در ارائه است. متن و ویدئوی اضافه شده با هم ترکیب می شوند تا جلوه ای خیره کننده ایجاد کنند.
Pen Blend-Mode Sticky Nav &Hero اثر Jalin Burton را ببینید
کیت درام متحرک SVG توسط جاش
بیایید این مجموعه را با صدای بلند به پایان برسانیم. کیت درام دستی ندارید؟ شما همیشه می توانید این مجموعه مجازی را بازی کنید. SVG برای تقویت گرافیک استفاده می شود. در همین حال، برخی از صداهای نقطه ای آنها را زنده می کند. ما می رویم، رینگو!
کیت درام متحرک Pen SVG (Play Me!) توسط جاش را ببینید
اضافه کردن شکل به طرح شما
SVG به یکی از اجزای اصلی طراحی وب تبدیل شده است. فرمت دارای مزایای زیادی است. و ما می توانیم از آن برای ایجاد افکت هایی استفاده کنیم که قبلاً به هک نیاز داشتند.
SVG یکی از قدرتمندترین ابزارهایی است که ما داریم. دنیایی از امکانات را برای طراحی، حرکت و تعامل اضافه می کند. چه چیزی را دوست نداشته باشیم؟
مجموعه CodePen ما را برای نمونه های بیشتری از اشکال SVG بررسی کنید. ممکن است مورد استفاده مناسبی برای پروژه بعدی خود بیابید.
بالا
]
منبع: https://speckyboy.com/svg-shape-usage-web-design/