‏رنگ دادن به SVG از بیرون با CSS

نویسندهٔ این مقاله، که قبلاً سراغ SVG sprites هم رفته بود، از یه بن‌بست قدیمی شروع می‌کنه. یه SVG رو اگه inline بذاری یا با use از فایل بیرونی بکشی، currentcolor و پراپرتی‌های ارثی مثل fill از صفحه بهش می‌رسن. ولی همون گرافیک رو که با img یا background-image بذاری، یه سند جداست با استایل‌های خودش و هیچی از CSS صفحه‌ت بهش نمی‌رسه. فایرفاکس سال‌ها یه راه غیراستاندارد به اسم -moz-context-properties داشت که هیچ‌جای دیگه کار نمی‌کرد.

راه‌حل تازه دو طرف داره. سمت SVG هر جا رنگ می‌نوشتی، env() با یه اسم و یه مقدار پیش‌فرض می‌نویسی، مثل fill="env(--color, #c1f07c)". سمت صفحه هم با پراپرتی link-parameters و تابع param() مقدارو می‌فرستی:

img {
	link-parameters: param(--color, #ff8052);
}

تو param() آرگومان دوم مقداریه که می‌فرستی، ولی تو env() آرگومان دوم مقدار پیش‌فرضه. این پراپرتی ارثی نیست، پس باید دقیقاً روی همون المنتی بذاریش که تصویرو نگه داشته؛ گذاشتنش روی wrapper هیچ کاری نمی‌کنه.

چون هر env() تو فایل یه پیش‌فرض داره، همون SVG تو مرورگری که این قابلیتو نداره با رنگ‌های اصلی خودش رندر می‌شه. یعنی progressive enhancement اینجا مجانیه: نه @supports لازم داری نه استایل‌شیت جداگانه، فقط باید موقع خروجی گرفتن رنگ‌های پیش‌فرض درست انتخاب کنی. نویسنده برای نمایشش پرترهٔ معروف Marilyn از اندی وارهول رو به SVG تبدیل کرده: چهار path، چهار رنگ تخت، دقیقاً مثل چهار پلیت چاپ سیلک.

جالب‌ترین بخش اینجاست: همون یه فایل ۵۰ کیلوبایتی با یک درخواست شبکه، نُه بار تو صفحه صدا زده می‌شه و هر بار پالت متفاوتی می‌گیره. اسپک صراحتاً می‌گه مرورگر باید هر کدومو درست بکشه ولی مجازه سند زیرین رو به اشتراک بذاره. هیچ روش موجودی این رو نمی‌ده: symbol فقط از راه یه placeholder inline کار می‌کنه، و fragment و stack مجبورت می‌کنن هر حالت رنگی رو از قبل تو فایل بپزی.

ولی هنوز کامل نیست. حتی تو نایتلی فقط بخشی از اسپک پیاده شده؛ خود پراپرتی رو background-image هم جواب می‌ده، ولی پاس دادن پارامتر توی مودیفایر url() و توی فرگمنت آدرس هنوز کار نمی‌کنه. شورتهندهای param(color, …) و param(accent-color, …) هم نیومدن و به گفتهٔ نویسنده همینا بزرگ‌ترین کمبودن، چون قرار بود currentcolor رو به img برسونن. جمع‌بندی خودش هم صریحه: فعلاً سراغش نرو، یک موتور و نصف اسپک بیشتر نیست.

نکات کلیدی:

• سمت SVG با env() پارامتر تعریف می‌شه و سمت صفحه با پراپرتی link-parameters و تابع param() مقدار می‌ره تو
• فایرفاکس نایتلی از نسخهٔ ۱۵۳ پیاده‌سازی آزمایشی داره و فلگ layout.css.link-parameters.enabled پیش‌فرض روشنه
• سافاری تکنولوژی پریویو ۲۵۳ هم فلگ «CSS Linked Parameters» رو داره، ولی پیش‌فرض خاموشه
• هر env() مقدار پیش‌فرض داره، پس فایل تو مرورگر بدون پشتیبانی سالم رندر می‌شه و @supports لازم نیست
• دموی نویسنده نُه پوستر وارهول رو با یک فایل ۵۰ کیلوبایتی و یک درخواست شبکه می‌سازه
• پارامترها فقط رنگ نیستن: ضخامت stroke، opacity و transform هم پاس می‌شن