آپلود تصاویر SVG در وردپرس با افزونه Safe SVG

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

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

SVG چیه و چه فرقی با JPG و PNG داره

SVG مخفف Scalable Vector Graphics و به معنی «گرافیک برداری مقیاس‌پذیر» هست. تصویر برداری به‌جای اینکه از تعداد زیادی نقطه رنگی ساخته بشه، شکل‌ها رو با خط، منحنی و مختصات نگه می‌داره. برای همین با بزرگ‌کردن تصویر، لبه‌ها تار یا دندانه‌دار نمی‌شن.

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

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

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

چرا وردپرس اجازه آپلود SVG رو نمی‌ده

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

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

فقط اضافه‌کردن پسوند .svg به فرمت‌های مجاز، فایل رو امن نمی‌کنه. فایل باید هم‌زمان با آپلود پاک‌سازی بشه. پاک‌سازی یا Sanitization یعنی بخش‌ها و دستورهای مشکوک پیش از ذخیره فایل کنار گذاشته بشن. Safe SVG هم امکان آپلود رو فعال می‌کنه و هم این پاک‌سازی رو انجام می‌ده.

قبل از آپلود SVG در وردپرس چه چیزهایی لازم دارید

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

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

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

آموزش آپلود SVG در وردپرس با افزونه Safe SVG

۱. نصب و فعال‌کردن افزونه Safe SVG

از پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید و عبارت Safe SVG رو توی کادر جست‌وجو بنویسید. افزونه‌ای رو که دقیقاً همین اسم رو داره پیدا کنید. بعد روی «هم‌اکنون نصب نمایید» بزنید و وقتی نصب تموم شد، گزینه «فعال نمایید» رو انتخاب کنید.

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

۲. بررسی تنظیمات و دسترسی آپلود SVG

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

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

۳. آپلود فایل SVG در کتابخانه رسانه

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

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

۴. قراردادن تصویر SVG داخل نوشته یا برگه

نوشته یا برگه موردنظرتون رو توی ویرایشگر باز کنید. روی علامت افزودن بلوک بزنید و بلوک «تصویر» رو انتخاب کنید. بعد وارد «کتابخانه رسانه» بشید، فایل SVG رو بردارید و اون رو داخل صفحه بذارید.

برای تصویر یه متن جایگزین مناسب بنویسید. متن جایگزین یا Alt Text یه توضیح کوتاه درباره مفهوم تصویره و به کسی که تصویر رو نمی‌بینه کمک می‌کنه موضوعش رو بفهمه. برای لوگو معمولاً نوشتن نام دقیق برند کافیه. ولی اگه تصویر فقط جنبه تزئینی داره و اطلاعاتی منتقل نمی‌کنه، بهتره متن جایگزینش خالی بمونه.

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

رفع خطاهای رایج آپلود SVG در وردپرس

خطای مجازنبودن نوع فایل

اگه هنوز خطای مجازنبودن نوع فایل رو می‌بینید، به «افزونه‌ها ← افزونه‌های نصب‌شده» برید و مطمئن بشید Safe SVG فعاله. بعد نام و پسوند فایل رو بررسی کنید. تغییر دستی پسوند یه فایل به .svg اون رو به SVG واقعی تبدیل نمی‌کنه. راهنمای رفع خطای مجازنبودن نوع پرونده در وردپرس علت‌های عمومی این پیام رو هم براتون توضیح می‌ده.

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

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

نمایش ناقص یا خراب فایل SVG

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

کارنکردن آپلود بعد از فعال‌کردن افزونه

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

چطور امنیت فایل‌های SVG رو بیشتر کنید

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

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

چطور فایل SVG رو برای سرعت و نمایش بهتر آماده کنید

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

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

فایل باید ناحیه نمایش درستی داشته باشه. این ناحیه معمولاً با ویژگی viewBox مشخص می‌شه و به مرورگر می‌گه کدوم قسمت طرح رو نشون بده. اگه بخشی از تصویر بریده شده یا دور اون فضای خالی زیادی می‌بینید، تنظیمات صفحه و ناحیه خروجی رو توی نرم‌افزار طراحی بررسی کنید.

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

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

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

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

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

جمع‌بندی

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

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

سؤالات متداول درباره آپلود SVG در وردپرس

تیم تولید محتوا

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