یکی از مشکلاتی که هنگام طراحی سایت با وردپرس با آن روبرو می‌شوید، تصاویر هستند. تصاویر وب سایت شما باید در تمام دستگاه‌ها شامل موبایل، تبلت و دسکتاپ، عالی به نظر برسند. بنابراین اگر فرمتی وجود داشته باشد که باعث شود تصاویر، بدون توجه به اندازه آنها، همیشه عالی نمایش داده شوند و از کیفیت آنها در هیچ صفحه نمایشی کاسته نشود، کار شما بسیار راحت می‌شد. خبر خوب این است که این فرمت وجود دارد و نام آن 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 شکل را با تگ ، موقعیت آن را با اتربیوت‌های cx و cy، شعاع را با اتربیوت r و رنگ دایره را با تگ