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

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

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

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

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

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

فرمت SVG چیست؟

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

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

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

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

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

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

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

قبل از اینکه به بررسی نحوه استفاده از SVG در وردپرس بپردازیم، ببینیم فایل‌های SVG در وردپرس چگونه کار می‌کنند.

فایل‌های SVG چگونه کار می‌کنند؟

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

به عنوان مثال، یک دایره ساده SVG را مشابه شکل زیر در نظر بگیرید:

وقتی فایل این دایره را در یک ویرایشگر متن باز کنید، کد XML زیر ظاهر می‌شود:

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

برای ترسیم دایره، کد XML شکل را با تگ <circle>، موقعیت آن را با اتربیوت‌های cx و cy، شعاع را با اتربیوت r و رنگ دایره را با تگ <style> مشخص می‌کند. کد رنگ هگزادسیمال f4795b# برای این سایه خاص نارنجی است.

هنگامی‌که یک فایل SVG مانند فایل بالا ارائه می‌شود، مرورگر وب این اطلاعات XML را می‌گیرد؛ پردازش می‌کند و به عنوان تصویر برداری روی صفحه نمایش می‌دهد. همه مرورگرهای مدرن، SVG‌ها را رندر می‌کنند.

همچنین متوجه خواهید شد که این فایل XML به زبان انگلیسی نوشته شده است. SVG‌ها اساساً فایل‌های متنی هستند که باعث می‌شود توسط انسان قابل خواندن باشند. این ویژگی برنامه‌نویسان را قادر می‌سازد تا مستقیماً فایل‌های XML را ویرایش کنند. به عنوان مثال می‌توان از fill برای تغییر رنگ دایره استفاده کرد.

مزایای استفاده از SVG در سایت‌های وردپرس و غیروردپرس

کد XML باعث می‌شود فایل‌های SVG برای اپلیکیشن‌های وب و وب‌سایت‌ها بسیار قدرتمند و کاربردی باشد. برخی مزایای استفاده از فایل SVG عبارت است از:

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

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

سازگاری: فرمت فایل SVG توسط کنسرسیوم شبکه جهانی وب به عنوان یک قالب استاندارد برای گرافیک‌های وب طراحی شده است و برای کار با سایر تبدیل‌های وب مانند HTML ،CSS و JavaScript طراحی شده است. تصاویر SVG با اسکریپت‌ها قابل کنترل هستند. به این ترتیب برای رنج وسیعی از امکانات نمایش پویا، از انیمیشن‌ها و چارت‌های پویا گرفته تا تصاویر رسپانسیو برای موبایل کار می‌کند. این سطح کنترل با قالب‌های JPEG و PNG امکان پذیر نیست. به همین دلیل است که استفاده از SVG در وردپرس گزینه بسیار مناسبی است.

دسترسی و بهینه سازی برای موتور جستجو: فایل‌های SVG ، فایل‌های متنی هستند و این خود مزایای زیادی نسبت به فرمت‌های رستر دارد. اول اینکه برنامه نویسان می‌توانند به کد XML نگاه کرده و به سرعت آن را درک کنند.

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

در آخر، فایلهای SVG توسط موتورهای جستجو مانند گوگل قابل ایندکس شدن هستند. اگر می‌خواهید اینفوگرافیک متن دار یا SVG ‌های دیگر شامل متن کلمات کلیدی در تصویر را در صفحه خود قرار دهید، می‌تواند به شما در رتبه بندی صفحه و بهبود سئو سایت کمک کند. PNG و JPEG از این نظر به متاداده و متن alt محدود می‌شوند.

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

این ویژگی برای وب سایت‌ها خوب است زیرا فایل‌های کوچکتر در مرورگرها سریعتر بارگیری می‌شوند، بنابراین SVG‌ها می‌توانند عملکرد کلی صفحه را افزایش دهند.

با این حال، این بدان معنی نیست که شما باید تمام تصاویر را به SVG تبدیل کنید. حال بیایید ببینیم که وب سایت‌ها در کجا تمایل به استفاده از SVG دارند و مکان استفاده از SVG در سایت های وردپرس کجاست.

فایل‌های SVG در کجا استفاده می‌شوند؟

بسیاری از وب سایت‌ها از فرمت‌هایی مانند PNG و JPEG تقریباً به جای هم استفاده می‌کنند. اما SVG‌ها چند منظوره نیستند. اگر سعی کنید یک عکس پیچیده را با استفاده از بردار دوباره ایجاد کنید، معمولاً با فایل‌های SVG عظیم و غیرقابل استفاده مواجه خواهید شد.

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

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

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

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

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

ساخت تصویر SVG

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

• Adobe Illustrator, Photoshop, Animate, and InDesign
• Microsoft Visio
• Inkscape
• GIMP

اگر شما و بازدید کنندگان سایت از مرورگرهایی استفاده می‌کنید که از فایل‌های SVG  پشتیبانی می‌کنند (و اکثر مرورگرها این پشتیبانی را دارند)، می‌توانید المان را ببینند. متحرک سازی SVG‌ها البته پیچیده تر است زیرا به استفاده از CSS نیاز دارد.

آموزش استفاده از SVG در وردپرس

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

• به صورت دستی
• با استفاده از افزونه

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

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

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

بهترین افزونه‌های SVG وردپرس عبارتند از:

SVG Support

SVG Support همانطور که از نامش پیداست، پشتیبانی SVG را ارائه می دهد. این افزونه به شما امکان می دهد با استفاده از یک تگ ساده IMG کد کامل فایل SVG خود را جاسازی کنید.

همچنین با افزودن کلاس “style-svg” به عناصر IMG، هر المان IMG حاوی کلاس “style-svg” را با کد SVG کامل شما به صورت پویا جایگزین می کند و آن را به صورت درون خطی ارائه می دهد. هدف اصلی این کار اجازه دادن به حالت دهی و متحرک سازی عناصر SVG شماست. گزینه‌های استایل دهی هنگام استفاده از تگ‌های جاسازی، شی یا img محدود می شوند.

برای کسب اطلاعات بیشتر درباره این افزونه و نحوه استفاده از آن، مقاله آموزش افزونه SVG Support را مطالعه کنید.

Safe SVG

Safe SVG  بهترین راه برای اجازه بارگذاری تصاویر SVG در وردپرس است. این افزونه علاوه بر اجازه بارگذاری SVG، این امکان را به شما می‌دهد که از سالم بودن تصاویر مطمئن شده و مانع از آسیب پذیری‌های SVG / XML که بر سایت شما تأثیر می‌گذارند، شوید.

همچنین به شما امکان می‌دهد پیش نمایشی از SVG‌های آپلود شده خود را در کتابخانه رسانه در همه نماها مشاهده کنید.

WP SVG Icons

WP SVG Icons یک افزونه است که به شما امکان می‌دهد آیکون‌های SVG را در کتابخانه رسانه خود بارگذاری کنید.

البته به صورت دستی هم می‌توانید قابلیت اضافه کردن تصاویر SVG را در سایت وردپرس خود ایجاد کنید.

جمع بندی

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.