رنگآمیزی آیکون SVG
فایلهای SVG برخلاف PNG و JPG یک تصویر برداری هستند و رنگ هر بخش آنها داخل خود فایل بهصورت متنی ذخیره میشود. به همین دلیل اپادیتور میتواند رنگ این فایلها را هنگام نمایش تغییر دهد، بدون اینکه لازم باشد فایل را دوباره بسازید یا آپلود کنید.
با این قابلیت میتوانید:
- یک آیکون را در چند جای اپ با رنگهای متفاوت استفاده کنید، بدون ساخت چند نسخه از فایل
- رنگ آیکون را به تم اپ وصل کنید تا در تم روشن و تاریک خودش تغییر کند
- رنگ آیکون را به یک متغیر رنگ وصل کنید و در زمان اجرا آن را عوض کنید
این تنظیم فقط برای فایلهای SVG نمایش داده میشود. اگر تصویر انتخابی PNG، JPG یا هر فرمت دیگری باشد، دکمه رنگآمیزی اصلاً ظاهر نمیشود.
کجا در دسترس است؟
رنگآمیزی SVG در این بخشها اضافه شده است:
| محل | عنوان تنظیم |
|---|---|
| ویجت عکس | رنگآمیزی SVG |
| آیکون ویجت دکمه | رنگآمیزی SVG |
| آیکون پخش و توقف پخشکننده صوت | رنگآمیزی آیکون |
| آیکون دکمه علاقهمندی | رنگآمیزی آیکون اضافهشده / رنگآمیزی آیکون حذفشده |
| آیکون علاقهمندی در نوار ابزار | رنگآمیزی آیکون اضافهشده / رنگآمیزی آیکون حذفشده |
| لوگوی سربرگ منو | رنگآمیزی لوگو |
| آیکون آیتم منو | رنگآمیزی آیکون |
بعضی کنترلها برای دو حالت خود دو آیکون دارند و رفتار رنگآمیزی در آنها یکسان نیست:
- پخشکننده صوت: آیکون پخش و توقف یک تنظیم مشترک دارند. تفاوت این دو حالت با شکل آیکون بیان میشود، نه با رنگ، پس معمولاً باید همرنگ بمانند.
- علاقهمندی (هم در نوار ابزار و هم در ویجت دکمه): هر حالت تنظیم رنگ جداگانه دارد؛ رنگآمیزی آیکون اضافهشده و رنگآمیزی آیکون حذفشده. این دو آیکون معمولاً عمداً همرنگ نیستند؛ مثل ستاره توپر کهربایی برای حالت افزودهشده و ستاره توخالی خاکستری برای حالت حذفشده.
اگر قبلاً برای آیکونهای علاقهمندی یک رنگآمیزی مشترک تنظیم کرده بودید، همان تنظیم بهصورت خودکار برای هر دو حالت کپی میشود و چیزی از دست نمیرود. بعد از آن میتوانید رنگ هر حالت را جداگانه تغییر دهید.
حالتهای رنگآمیزی
با زدن دکمه تنظیم رنگها پنجرهای باز میشود که در سمت راست آن پیشنمایش زنده تصویر و در سمت دیگر حالتهای رنگآمیزی قرار دارد.
| حالت | چه میکند | چه زمانی مناسب است |
|---|---|---|
| بدون تغییر | تصویر با رنگهای خودش نمایش داده میشود | حالت پیشفرض |
| یکرنگ کردن کل تصویر | همه تصویر با یک رنگ بازسازی میشود | آیکونهای تکرنگ |
| رنگپذیر (currentColor) | فقط بخشهای علامتگذاریشده رنگ میگیرند | فایلهایی که برای رنگپذیری ساخته شدهاند |
| انتخاب رنگ برای هر بخش | برای هر رنگ فایل جداگانه رنگ تازه انتخاب میکنید | آیکونها و تصویرهای چندرنگ |
پنجره تنظیمات فقط حالتهایی را نشان میدهد که روی همان فایل معنا دارند. اگر حالتی را نمیبینید، یعنی روی این تصویر کاری انجام نمیدهد.
یکرنگ کردن کل تصویر
کل تصویر با یک رنگ بازسازی میشود؛ یعنی هر چیزی که در فایل کشیده شده، شکل خودش را نگه میدارد اما رنگش یکی میشود.
- برای آیکونهای تکرنگ بهترین گزینه است.
- اگر تصویر چندرنگ باشد، همه رنگها یکی میشوند و تصویر به یک شکل تخت تبدیل میشود.
- این حالت همیشه در دسترس است، حتی برای فایلهایی که محتوای آنها قابل خواندن نیست.
رنگپذیر (currentColor)
بعضی فایلهای SVG را سازندهشان طوری میسازد که بخشهایی از آنها با currentColor علامتگذاری شده باشد؛ یعنی «این بخش رنگ خودش را از بیرون بگیرد».
در این حالت فقط همان بخشها رنگ میگیرند و بقیه رنگهای فایل دستنخورده میمانند.
پنجره تنظیمات خودش فایل را بررسی میکند و کنار این گزینه نتیجه را نشان میدهد:
- ✓ این فایل پشتیبانی میکند — فایل بخش
currentColorدارد و این حالت کار میکند. - ⚠ این فایل currentColor ندارد — انتخاب این حالت هیچ تغییری در تصویر ایجاد نمیکند.
انتخاب رنگ برای هر بخش
اپادیتور رنگهای بهکاررفته در فایل را فهرست میکند و برای هر رنگ یک انتخابگر رنگ جداگانه نمایش میدهد.
- برای هر رنگ میتوانید یک رنگ تازه انتخاب کنید.
- رنگهایی که برایشان رنگی انتخاب نکنید، بدون تغییر میمانند.
- این حالت فقط وقتی نمایش داده میشود که فایل حداقل دو رنگ داشته باشد؛ برای فایل تکرنگ، «یکرنگ کردن» همان کار را سادهتر انجام میدهد.
اگر فایل فقط یک رنگ داشته باشد، پنجره بدون فهرست حالتها باز میشود و مستقیم یک انتخابگر رنگ نشان میدهد. خالی گذاشتن آن یعنی رنگآمیزی خاموش است.
اتصال رنگ به تم و متغیر
رنگی که در این پنجره انتخاب میکنید یک رنگ معمولی اپادیتور است. یعنی علاوه بر رنگ ثابت، میتوانید:
- یکی از رنگهای تم را انتخاب کنید تا آیکون در تم روشن و تاریک رنگ متناسب بگیرد
- یک متغیر رنگ را انتخاب کنید تا رنگ آیکون در زمان اجرای اپ قابل تغییر باشد
در هر دو حالت، تصویر بهصورت خودکار بهروز میشود:
- با تغییر تم اپ رنگ آیکون بلافاصله عوض میشود.
- با تغییر مقدار متغیر رنگ (مثلاً با عملکرد تغییر رنگ متغیر) رنگ آیکون بدون باز و بسته کردن صفحه تغییر میکند.
اگر یک آیکون تکرنگ دارید و میخواهید همهجا با رنگ اصلی اپ هماهنگ باشد، حالت «یکرنگ کردن کل تصویر» را انتخاب کنید و رنگ را روی رنگ اصلی تم بگذارید. با این کار تغییر رنگ برند در تم، آیکون را هم با خودش میبرد.
تصویر از لینک آنلاین یا متغیر
منبع تصویر در ویجت عکس میتواند فایل آپلودشده، لینک آنلاین یا متغیر باشد. رفتار رنگآمیزی در این سه حالت یکسان نیست:
| منبع تصویر | حالتهای قابل استفاده |
|---|---|
| فایل آپلودشده در پنل | هر سه حالت |
لینک آنلاین به فایل svg | هر سه حالت، در صورتی که فایل قابل خواندن باشد |
| آدرس تصویر از یک متغیر | فقط «یکرنگ کردن کل تصویر» |
دلیلش این است که برای دو حالت currentColor و «انتخاب رنگ برای هر بخش»، پنل باید محتوای فایل را بخواند تا بداند چه رنگهایی در آن هست. وقتی آدرس تصویر در زمان اجرا از یک متغیر میآید، پنل از قبل نمیداند کدام فایل نمایش داده میشود.
حالت «یکرنگ کردن کل تصویر» به خواندن فایل نیاز ندارد و روی هر تصویر SVG کار میکند.
نکات مهم
- تنظیم رنگآمیزی روی خود ویجت ذخیره میشود، نه روی فایل. اگر یک فایل SVG را در چند ویجت استفاده کنید، هر کدام میتوانند رنگآمیزی جداگانه داشته باشند.
- تغییر تصویر یک ویجت، رنگآمیزی قبلی را به تصویر تازه تعمیم نمیدهد؛ بعد از تعویض تصویر، تنظیم رنگ را دوباره بررسی کنید.
- پنجره تنظیمات تا وقتی ذخیره نزنید چیزی را تغییر نمیدهد؛ با «انصراف» ویجت دستنخورده میماند.
- کنار دکمه «تنظیم رنگها» خلاصه وضعیت فعلی نمایش داده میشود؛ مثل «بدون تغییر»، نمونه رنگ بههمراه نام حالت، یا «۳ رنگ تنظیم شده».
- رنگآمیزی روی حجم فایل یا سرعت اپ اثر محسوسی ندارد و تصویر اصلی تغییر نمیکند.