ایجاد آیکون های وب با SVG

مدرس Morten Rand-Hendriksen

انتشار 2016/08/04

مدت زمان 1h 44m

سطح متوسط

فایل تمرینی دارد

آموزش Creating Web Icons with SVG

مشاهده خبرنامه Morten's LinkedIn به عنوان طراحان و توسعه دهندگان وب، ما می خواهیم گرافیک واضح به نظر برسد، اما برای عملکرد باید اندازه فایل را پایین نگه داریم. چگونه بهترین های هر دو دنیا را بدست می آورید؟ تقریباً تنها یک راه برای رفتن وجود دارد: SVG.\n\n چالش SVG ها این است که آنها مانند فایل های گرافیکی دیگر نیستند: آنها به جای شبکه ای از پیکسل ها، دستورالعمل های کدی هستند که توسط مرورگر در لحظه تفسیر می شوند. این امر چالش‌های منحصربه‌فردی و فرصت‌های منحصربه‌فردی را در هنگام اجرا ایجاد می‌کند. در این دوره، روش‌های مختلفی برای استقرار آیکون‌های SVG در صفحات وب را یاد خواهید گرفت که هر کدام موارد استفاده، مزایا و معایب خاص خود را دارند. Morten Rand-Hendriksen نحوه درج تصاویر SVG، افزودن SVG به عنوان عناصر درون خطی و SVG sprites از طریق خط فرمان و خودکارسازی SVG ها با Grunticon را نشان می دهد. به‌علاوه، نکاتی را در مورد سازگاری و دسترسی به گرافیک‌های خود و استفاده از نمادهای SVG در وردپرس دریافت کنید.

Cascading Style Sheets (CSS) Front-end Development HTML Scalable Vector Graphics (SVG) Web Graphics XML

Introduction

Welcome ()

What to know before watching this course ()

1. The Case For SVG

Difference between SVG and icon fonts ()

What we'll cover in this course ()

2. Create and Optimize SVG Icons

Where to get existing SVG icons ()

Creating your own icons ()

Optimize SVG with SVGOMG and SVGO ()

3. Add Individual SVGs

Overview of the methods ()

Add SVG as a regular image ()

Add backwards compatibility with SVGeezy ()

Add SVG as an inline element ()

Add backwards compatibility and more with SVGInjector ()

Add SVG as a background image ()

Make SVG background images backward compatible ()

A word on SVG accessibility ()

4. External and Inline SVG Sprites

Overview of the method ()

Create a manual SVG sprite ()

Display SVGs from an inline sprite ()

Create an optimized SVG sprite with SVGO and spritesh ()

Display SVGs from an external sprite ()

Patch browser support issues ()

5. Automate Your SVG Process with Grunticon

Overview of this method ()

Generate cross-browser icons with Grunticon ()

Display Grunticon SVG icons in HTML documents ()

Generate cross-browser icons in the command line using Grunticon ()

Display Grunticon SVG icons in HTML documents ()

6. SVG in WordPress Themes

Add an inline SVG with SVGInjector ()

Create a custom social media menu with Grunticon ()

Conclusion

Thank you ()

Ex_Files_Web_Icons_SVG.zip (3.2 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.