امروز در این آموزش قصد داریم در مورد بالا بردن کیفیت آیکون ها از طریق تصاویر svg به وسیله ی افزونه WP SVG Icons واستون یه چیزایی بگیم که واستون مفید باشه

 

 

 

قبل از اینکه در مورد افزونه بگیم میخواهیم یه توضیحاتب رو در مورد تصاویر svg بگیم که بیش تر با این تصاویر آشنا بشید

svg چییست ؟؟؟
واژه SVG مخفف Scalable Vector Graphics به معنای «تصاویر برداری مقایس‌پذیر» است.

ساختار این تصاویر بر چه اساسی می باشد ؟ براساس قالب بندی XML است و تصاویر و اشکال موجود در آن‌ها با استفاده از محاسبات ریاضی توسط رایانه روی صفحه‌نمایش رسم می‌شود.

توضیح svg به زبان ساده تر
تصاویر SVG چون بر مبنای عدد و نسبت هستند، به پیکسل‌ها وابستگی‌ای ندارند و در هر مقیاسی بدون افت کیفیت نمایش داده می‌شوند. تصاویر توسط کنسرسیوم جهانی وب (W3C) به صورت یک استاندارد پذیرفته شده‌اند و هم اکنون حدود ۸۵٪ از مرورگرهای موجود از آن‌ها پشتیبانی می‌کنند.

این تصاویر همچنین امکان استفاده از انیمیشن را در ساختار خود دارند. با توجه به اینکه تصاویر با ساختار XML تولید می‌شوند، توسط جاواسکریپت و دیگر زبان‌های برنامه‌نویسی که امکان پردازش XML و DOM را دارند، می‌شود آن‌ها را به سادگی تغییر داد. یکی دیگر از مزیت‌های استفاده از این تصاویر اینست که با توجه به اینکه این تصاویر بر اساس خطوط و اشکال هندسی رسم می‌شوند، نتیجه حاصل ازین تصاویر فاقد مشکل تاری نیم پیکسلی است.

به فرمت svg آشنا شدید حالا بریم سراغ افزونه
بعد از اینکه افزونه را نصب کردید آن را فعال کنید در قسمت داشبورد وردپرس شما یک گزینه افزوده می شود به اسم WP SVG Icons افزوده می شود

افزونه افزونه WP SVG Icons شامل چند قسمته

1. Default Icon set : آیکون های ثابتی در این افزونه وجود دارد که در این قسمت قابل نمایش و می توان به روی آن کلیک shortcode آن را کپی و هر جایی که میخواهد قابل نمایش باشد کپی کنید
2. Custom Icon Set : در این قسمت شما می توانید آیکون اضافه کنید به قسمت Default
3. Settings : تنظیمات موجود را در این قسمت می توانید انجام دهید از جمله نمایش این ایکون در داخل چه تگی قرار گیرد که ثابت آن تگ i می باشد
4. Upgrade : خرید نسخه پولی این افزونه

در قسمت نوشته ها نیز مانند تصویر زیر یک گزینه افزوده می شود به اسم Add Icon به روی آن کلیک کنید و آیکون مد نظر خود را کلیک و خودش اتوماتیک در بین نوشته شما قرار میگیرد

در این مقاله قصد داریم گرافیک وردپرس خودمون رو از طریق تصاویری از طریق تصاویر با پسوند svg بالا ببریم

 

 

 svg چییست ؟؟؟

واژه SVG مخفف Scalable Vector Graphics به معنای «تصاویر برداری مقایس‌پذیر» است.

ساختار این تصاویر بر چه اساسی می باشد ؟ براساس قالب بندی XML است و تصاویر و اشکال موجود در آن‌ها با استفاده از محاسبات ریاضی توسط رایانه روی صفحه‌نمایش رسم می‌شود.

توضیح svg به زبان ساده تر

تصاویر SVG چون بر مبنای عدد و نسبت هستند، به پیکسل‌ها وابستگی‌ای ندارند و در هر مقیاسی بدون افت کیفیت نمایش داده می‌شوند. تصاویر توسط کنسرسیوم جهانی وب (W3C) به صورت یک استاندارد پذیرفته شده‌اند و هم اکنون حدود ۸۵٪ از مرورگرهای موجود از آن‌ها پشتیبانی می‌کنند.

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

این تصاویر همچنین امکان استفاده از انیمیشن را در ساختار خود دارند. با توجه به اینکه تصاویر با ساختار XML تولید می‌شوند، توسط جاواسکریپت و دیگر زبان‌های برنامه‌نویسی که امکان پردازش XML و DOM را دارند، می‌شود آن‌ها را به سادگی تغییر داد. یکی دیگر از مزیت‌های استفاده از این تصاویر اینست که با توجه به اینکه این تصاویر بر اساس خطوط و cهندسی رسم می‌شوند، نتیجه حاصل ازین تصاویر فاقد مشکل تاری نیم پیکسلی است.

خب توضیحاتی زیادی رو در موردش دادیم حالا ما می خواهیم این امکان رو فراهم کنیم که در وردپرس شما از این تصاویر استفاده کنید با استفاده از افزونه  این قابلیت رو افزونه (Scalable Vector Graphics (SVG به وردپرس شما می افزاید

کار کردن با افزونه (Scalable Vector Graphics (SVG

از قسمت افزدون افزونه آن را اضافه بعد فعال سازی فرمایید دیگر قسمت رسانه وردپرس شما از svg پشتیبانی می کند

فیلم آموزشی افزونه (Scalable Vector Graphics (SVG