حتماً برای شما هم پیش آمده که یک آیکون جذاب را با فرمت SVG دانلود کردهاید و قصد دارید در طراحی سایت خودتان استفاده کنید اما وقتی آن را در المنتور آپلود میکنید با یک مشکل عجیب روبرو میشوید. هرچقدر رنگ را از تب استایل تغییر میدهید هیچ اتفاقی نمیافتد و آیکون با همان رنگ اصلی خودش نمایش داده میشود که این موضوع میتواند حسابی کلافهکننده باشد چون کل هارمونی طراحی شما را به هم میریزد. در این مقاله میخواهیم یک بار برای همیشه پرونده تغییر رنگ SVG در المنتور را ببندیم و تمام روشهای موجود از تنظیمات ساده گرفته تا کدهای CSS حرفهای را بررسی کنیم تا بتوانید کنترل کامل روی آیکونهای سایتتان داشته باشید.
✅ چرا رنگ فایلهای SVG در المنتور عوض نمیشود؟
📋 قبل از اینکه سراغ راه حل برویم باید بدانیم ریشه مشکل کجاست تا بتوانیم اصولی آن را حل کنیم. فایلهای SVG در واقع کدهای XML هستند و برخلاف عکسهای PNG یا JPG ماهیت متنی دارند. وقتی شما یک فایل SVG را در نرمافزارهایی مثل ایلاستریتور خروجی میگیرید ممکن است رنگها به صورت “Inline Style” یا استایلهای درونخطی داخل کد فایل ذخیره شده باشند. این یعنی خودِ فایل دستور دارد که “همیشه به رنگ مشکی باش” و به همین خاطر تنظیمات المنتور نمیتواند روی آن اولویت پیدا کند و رنگ را تغییر دهد. حالا که دلیل را فهمیدیم بیایید سراغ روشهای حل این چالش برویم که از سادهترین روش شروع میشود و به فنیترین روش میرسد.
✅ روش اول : استفاده از ویجت آیکون به جای ویجت تصویر
📋 بسیاری از کاربران تازه کار اشتباه کوچکی میکنند و فایل SVG را داخل ویجت “تصویر” یا Image آپلود میکنند. ویجت تصویر المنتور به صورت پیشفرض دسترسی لازم برای تغییر ویژگی fill یا همان رنگ داخلی فایلهای برداری را ندارد و فایل را مثل یک عکس معمولی رفتار میکند. بهترین کار این است که از ویجت اختصاصی “آیکون” استفاده کنید و فایل خود را در آنجا بارگذاری نمایید. وقتی فایل SVG در ویجت آیکون قرار میگیرد المنتور کلاسهای لازم برای تغییر رنگ را به آن اضافه میکند و شما میتوانید به راحتی از تب استایل رنگ دلخواهتان را اعمال کنید مگر اینکه فایل شما مشکل ساختاری داشته باشد که در روشهای بعدی آن را حل میکنیم.
✅ روش دوم : تغییر رنگ SVG با کد CSS (راه حل حرفهای)
📋 اگر روش بالا جواب نداد یا مجبور بودید از ویجت تصویر استفاده کنید نگران نباشید چون CSS همیشه راه نجاتی برای ما دارد. برای این کار کافیست به بخش “پیشرفته” یا Advanced ویجت بروید و در قسمت “CSS سفارشی” کدهای زیر را قرار دهید. این روش زمانی عالی است که میخواهید رنگ آیکون در حالت هاور تغییر کند یا افکتهای خاصی داشته باشد.
📍 کد CSS برای تغییر رنگ (Fill)
📋 برای تغییر رنگ بدنه اصلی آیکون باید ویژگی fill یا در برخی موارد stroke را هدف قرار دهیم. کد زیر را امتحان کنید:
selector svg path {
fill: #FF0000 !important;
}
در کد بالا ما به مرورگر میگوییم که رنگ مسیرهای (path) داخل فایل SVG این ویجت را به رنگ قرمز (یا هر کد رنگی که شما بگذارید) تغییر دهد. استفاده از !important باعث میشود تا اولویت این دستور از استایلهای پیشفرض خود فایل بالاتر باشد و رنگ اعمال شود.
📍استفاده از ویژگی CSS Filter (یک ترفند کاربردی)
📋 گاهی اوقات فایل SVG به قدری پیچیده است که تغییر fill کار نمیکند و در این شرایط ویژگی فیلتر معجزه میکند. اگر از ویجت تصویر استفاده میکنید کد زیر میتواند کل رنگ تصویر را تغییر دهد:
selector img {
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}
البته پیدا کردن کد رنگ دقیق با این روش کمی سخت است و نیاز به آزمون و خطا دارد اما برای تبدیل آیکونهای سیاه به سفید یا تغییر رنگ کلی بسیار کارآمد است و هیچ نیازی به دستکاری فایل اصلی ندارد.
✅ روش سوم: ویرایش کد فایل SVG (اصولیترین و تمیزترین روش)
📋 این روش مورد علاقه طراحان حرفهای است چون مشکل را از ریشه حل میکند و بعد از آن میتوانید بدون هیچ کد اضافی و فقط با تنظیمات المنتور رنگ را تغییر دهید. برای این کار نیازی به نرمافزارهای گرافیکی سنگین ندارید و فقط کافیست فایل SVG خود را با یک ویرایشگر متن مثل Notepad باز کنید.
وقتی فایل را باز کردید با انبوهی از کدها مواجه میشوید که نباید شما را بترساند. بگردید و ویژگی fill="..." را پیدا کنید. ممکن است داخل این ویژگی یک کد رنگ مثل #000000 نوشته شده باشد.
📍 تکنیک جادویی CurrentColor
📋حالا آن کد رنگ را پاک کنید و به جای آن عبارت currentColor را بنویسید. یعنی کد شما باید به شکل fill="currentColor" در بیاید و سپس فایل را ذخیره کنید. وقتی این فایل را در المنتور آپلود کنید آیکون شما رنگ متن والد خودش را میگیرد و به راحتی با هر تغییر رنگی در پنل المنتور هماهنگ میشود. حتی اگر ویژگی fill را کلاً حذف کنید هم معمولاً المنتور میتواند کنترل رنگ را به دست بگیرد.
✅ نکات تکمیلی برای بهینهسازی SVG در وردپرس
📋 استفاده از SVG علاوه بر کیفیت بالا حجم بسیار کمی هم دارد که برای سئو عالی است اما باید مراقب مسائل امنیتی هم باشید. وردپرس به صورت پیشفرض اجازه آپلود SVG را نمیدهد و باید این قابلیت را در المنتور فعال کنید.
🔸 مسیر زیر را طی کنید:
المنتور > تنظیمات > پیشرفته > فعالسازی بارگذاری فایلهای فیلتر نشده
با فعال کردن این گزینه میتوانید بدون نصب افزونه اضافی فایلهای SVG خود را آپلود کنید و با روشهایی که در بالا گفتیم رنگ آنها را مطابق سلیقه خود تغییر دهید و یک سایت یکپارچه و زیبا داشته باشید.
✅ نتیجهگیری
📋 تغییر رنگ SVG در المنتور شاید در نگاه اول یک چالش فنی به نظر برسد اما همانطور که دیدیم با دانستن چند ترفند ساده کاملاً قابل حل است. اگر فایل شما استاندارد باشد با همان تنظیمات ویجت کارتان راه میافتد و اگر نه با یک قطعه کد CSS یا ویرایش سورس فایل میتوانید کنترل کامل را در دست بگیرید. پیشنهاد میکنم همیشه قبل از آپلود فایلهای SVG نگاهی به کد آن بیندازید و استایلهای مزاحم را حذف کنید تا در پروسه طراحی سرعت بیشتری داشته باشید.
✅ سوالات متداول (FAQ)
🔴 چرا با وجود کد CSS رنگ آیکون تغییر نمیکند؟
➖ احتمالاً در فایل SVG شما به جای path از rect یا circle استفاده شده است و یا رنگ در ویژگی stroke تعریف شده است. باید کد CSS را متناسب با ساختار فایل تغییر دهید یا از !important استفاده کنید.
🔴 آیا استفاده از CSS Filter سرعت سایت را کم میکند؟
➖ خیر تاثیر این ویژگی روی سرعت سایت بسیار ناچیز و قابل چشمپوشی است اما پردازش آن در مرورگر کاربر انجام میشود و هیچ بار اضافی روی سرور شما ندارد.
🔴 بهترین روش برای تغییر رنگ لوگوها در هدر سایت چیست؟
➖ اگر لوگوی شما SVG است بهترین روش استفاده از تکنیک currentColor در فایل اصلی است تا وقتی رنگ منو در اسکرول یا حالت موبایل تغییر میکند لوگو هم خودکار هماهنگ شود.
