آموزش ایجاد نمادهای وب با SVG

مقدمه Introduction

• خوش آمدی Welcome

• قبل از تماشای این دوره چه باید دانست What to know before watching this course

1. پرونده برای SVG 1. The Case For SVG

• تفاوت بین فونت های SVG و آیکون Difference between SVG and icon fonts

• آنچه ما در این دوره پوشش خواهیم داد What we'll cover in this course

2. ایجاد و بهینه سازی نمادهای SVG 2. Create and Optimize SVG Icons

• نمادهای SVG موجود را از کجا بدست آورید Where to get existing SVG icons

• ایجاد آیکون های خود را Creating your own icons

• SVG را با SVGOMG و SVGO بهینه کنید Optimize SVG with SVGOMG and SVGO

3. SVG های اختصاصی را اضافه کنید 3. Add Individual SVGs

• مروری بر روشها Overview of the methods

• SVG را به عنوان یک تصویر معمولی اضافه کنید Add SVG as a regular image

• سازگاری به عقب با SVGeezy اضافه کنید Add backwards compatibility with SVGeezy

• SVG را به عنوان یک عنصر درون خطی اضافه کنید Add SVG as an inline element

• سازگاری به عقب و بیشتر با SVGInjector اضافه کنید Add backwards compatibility and more with SVGInjector

• SVG را به عنوان تصویر پس زمینه اضافه کنید Add SVG as a background image

• تصاویر پس زمینه SVG را به عقب سازگار کنید Make SVG background images backward compatible

• کلمه ای در مورد قابلیت دسترسی SVG A word on SVG accessibility

4. Sprites SVG خارجی و Inline 4. External and Inline SVG Sprites

• مرور کلی روش Overview of the method

• یک Sprite SVG دستی ایجاد کنید Create a manual SVG sprite

• SVG ها را از اسپلیت درون خطی نمایش دهید Display SVGs from an inline sprite

• با SVGO و spritesh یک Sprite SVG بهینه ایجاد کنید Create an optimized SVG sprite with SVGO and spritesh

• SVG ها را از یک Sprite خارجی نمایش دهید Display SVGs from an external sprite

• مشکلات پشتیبانی مرورگر پچ Patch browser support issues

5. فرایند SVG خود را با Grunticon خودکار کنید 5. Automate Your SVG Process with Grunticon

• مروری بر این روش Overview of this method

• با Grunticon نمادهای مرورگر متقابل ایجاد کنید Generate cross-browser icons with Grunticon

• نمادهای Grunticon SVG را در اسناد HTML نمایش دهید Display Grunticon SVG icons in HTML documents

• نمادهای Grunticon SVG را در اسناد HTML نمایش دهید Display Grunticon SVG icons in HTML documents

• با استفاده از Grunticon نمادهای مرورگر متقاطع را در خط فرمان ایجاد کنید Generate cross-browser icons in the command line using Grunticon

6. SVG در مضامین وردپرس 6. SVG in WordPress Themes

• SVG درون خطی را با SVGInjector اضافه کنید Add an inline SVG with SVGInjector

• با Grunticon یک منوی رسانه ای اجتماعی سفارشی ایجاد کنید Create a custom social media menu with Grunticon

نتیجه Conclusion

• متشکرم Thank you