مبانی استفاده از SVG در وردپرس | افزونه‌ های تصاویر SVG

یکی از مشکلاتی که هنگام طراحی سایت با وردپرس با آن روبرو می‌شوید، تصاویر هستند. تصاویر وب سایت شما باید در تمام دستگاه‌ها شامل موبایل، تبلت و دسکتاپ، عالی به نظر برسند. بنابراین اگر فرمتی وجود داشته باشد که باعث شود تصاویر، بدون توجه به اندازه آنها، همیشه عالی نمایش داده شوند و از کیفیت آنها در هیچ صفحه نمایشی کاسته نشود، کار شما بسیار راحت می‌شد. خبر خوب این است که این فرمت وجود دارد و نام آن SVG است و با استفاده از SVG در وردپرس شما میتوانید تصاویر را به بهترین شکل ممکن در سایت خود نشان دهید.

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

در این مقاله، ابتدا در مورد فرمت SVG توضیح داده سپس مزایای آن و اینکه در کدام تصاویر باید از SVG استفاده کنید را بررسی می کنیم. در انتها افزونه های لازم برای استفاده از SVG در وردپرس را معرفی خواهیم کرد.

مبانی استفاده از SVG در وردپرس

فرمت SVG چیست؟

SVG، مخفف Scalable Vector Graphic، یک نوع فایل گرافیکی استاندارد است که برای ارائه تصاویر دو بعدی در اینترنت استفاده می‌شود.

فرمت SVG بر خلاف دیگر فرمت‌های محبوب فایل‌های تصویری، تصاویر را به عنوان بردار ذخیره می‌کند. اما گرافیک برداری دقیقاً چیست؟

رستر (Raster) در مقابل وکتور (Vector)

امروزه چندین فرمت فایل تصویری در وب وجود دارد که می‌توان آنها را به دو دسته تقسیم کرد: گرافیک رستری و گرافیک برداری.

شما احتمالاً با فرمت‌های رایج PNG و JPEG آشنا هستید. این‌ فرمت‌ها قالب‌های گرافیکی شطرنجی هستند؛ به این معنی که اطلاعات تصویر را در شبکه ای از مربع‌های رنگی ذخیره می‌کنند که به آنها bitmap گفته می‌شود. مربع‌های موجود در بیت‌مپ با هم ترکیب می‌شوند و یک تصویر منسجم را تشکیل می‌دهند، دقیقاً مانند پیکسل‌های صفحه کامپیوتر.

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

قالب‌های گرافیکی برداری -مانند SVG و PDF- متفاوت عمل می‌کنند. این فرمت‌ها تصاویر را به صورت مجموعه ای از نقاط و خطوط بین نقاط ذخیره می‌کنند. فرمول‌های ریاضی نحوه قرارگیری و شکل این نقاط و خطوط را تعیین می‌کنند و هنگام تغییر مقیاس تصویر مانند زوم کردن آن، روابط فضایی آنها را حفظ می‌کنند. بنابراین با زوم‌کردن، کیفیت تصویر کاهش پیدا نمی‌کند. فایل‌های گرافیک برداری اطلاعات رنگ را هم ذخیره می‌کنند و حتی می‌توانند متن را نمایش دهند.

روش آپلود svg در وردپرس

افزونه SVG Support با بیش از 600 هزار نصب فعال از بهترین افزونه‌ها برای آپلود SVG در وردپرس می‌باشد، با کمک این افزونه به راحتی می‌توانید فایل‌های SVG را در برگه‌ها و نوشته‌های سایت وردپرسی خود بارگذاری کنید و مانند هر تصویر دیگری بدون مشکل از آن‌ها استفاده کنید. این افزونه کاربردی را می‌توانید به صورت رایگان از انتهای همین مقاله یا از مخزن وردپرس دریافت نمایید.

پس از نصب و فعالسازی افزونه، گزینه جدیدی به نام SVG Support به منوی “تنظیمات” پیشخوان وردپرس شما افزوده خواهد شد که از طریق آن میتوانید تغییرات لازم را اعمال کنید.

• Restrict to Administrators?: با فعال کردن این گزینه فقط مدیران سایت قادر خواهند بود فایل­‌های SVG را آپلود کنند. به دلایل امنیتی بهتر است این گزینه را فعال و دسترسی بارگذاری فایل­‌های SVG به مدیران سایت محدود نمایید.
• Load frontend CSS?: این گزینه یک قطعه کد کوچک است که در برخی موارد به نمایش SVGها درfrontend کمک می­‌کند.
• Enable Advanced Mode?: این گزینه حالت پیشرفته افزونه را فعال می­‌کند، در صورتی که می­‌خواهید از امکانات پیشرفته­‌تری مانند فایل‌­های CSS متحرک استفاده کنید این گزینه را فعال کنید در غیر اینصورت آن را بدون تغییر بگذارید.

پس از اعمال تغییرات بر روی دکمه Save Changes کلیک کنید.

اکنون می‌توانید از SVG مانند سایر فرمت‌ها به راحتی در پست‌ها و نوشته‌های خود استفاده کنید.

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

در این مقاله به بررسی و نحوه آموزش آپلود SVG در وردپرس به دو روش استفاده از افزونه و کد پرداختیم، در صورتی که تمایل دارید این فرمت کاربردی را در سایت خود آپلود کنید توصیه   می‌کنیم مطالعه این مقاله را از دست ندهید. امیدواریم مطالعه این مقاله در آپلود SVG در وردپرس به شما کمک کند. شما می‌توانید سوالات و نظرات خود را از بخش دیدگاه‌ها با ما مطرح کنید؛ همچنین اگر محتوای امروز همیار وردپرس برایتان مفید بود، خوشحال می‌شویم آن را با دوستان خود در شبکه‌های اجتماعی به اشتراک بگذارید.