تبدیل SVG به CSS و Base64

تبدیل SVG به Base64 و Data URI یعنی چه؟

Data URI روشی است برای اینکه به‌جای آدرس فایل، خود محتوای تصویر را داخل CSS یا HTML بنویسی. وقتی یک آیکن SVG کوچک را به data URI تبدیل می‌کنی، مرورگر برای نمایش آن درخواست جداگانه‌ای به سرور نمی‌فرستد و آیکن همراه فایل CSS بارگذاری می‌شود. این کار برای آیکن‌های فرم، فلش‌ها، تیک چک‌باکس، الگوهای پس‌زمینه و جداکننده‌های تزئینی خیلی رایج است.

SVG را می‌شود به دو شکل داخل data URI گذاشت: URL encode که کاراکترهای خاص را رمزگذاری می‌کند و متن SVG خوانا می‌ماند، و Base64 که کل فایل را به رشته‌ای از حروف و اعداد تبدیل می‌کند. این ابزار هر دو را می‌سازد.

چطور از این ابزار استفاده کنم؟

1. کد SVG را از فیگما (Copy as SVG)، ایلاستریتور یا فایل آیکن کپی کن و در کادر ورودی بچسبان، یا فایل SVG را روی کادر رها کن.
2. روش کدگذاری را انتخاب کن؛ برای بیشتر کارها URL encode بهتر است.
3. خروجی مورد نیازت را کپی کن: background-image برای تصویر ثابت، mask-image برای آیکنی که رنگش با CSS عوض می‌شود.

SVG در background-image

ساده‌ترین روش استفاده از SVG در CSS این است که آن را پس‌زمینه‌ی یک عنصر کنی:

.select {
  background-image: url("data:image/svg+xml,%3Csvg ...%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
}

محدودیت این روش رنگ است: SVG داخل background مثل یک عکس رفتار می‌کند و currentColor یا متغیرهای CSS را نمی‌شناسد. اگر آیکن باید در حالت hover یا حالت تاریک رنگ عوض کند، برای هر رنگ یک نسخه‌ی جدا لازم داری؛ یا بهتر، از mask استفاده کن.

SVG با mask-image؛ آیکنی که رنگش با CSS عوض می‌شود

در روش mask، شکل آیکن از SVG گرفته می‌شود و رنگ آن از background-color خود عنصر. یعنی آیکن مثل یک فونت‌آیکن رفتار می‌کند و با currentColor، hover و تم تاریک هماهنگ می‌شود:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,...") center / contain no-repeat;
  mask: url("data:image/svg+xml,...") center / contain no-repeat;
}

.btn:hover .icon { color: #d4ff3a; }

این روش برای آیکن‌های تک‌رنگ عالی است. برای آیکن‌های چندرنگ از background-image یا خود تگ svg استفاده کن.

Base64 یا URL encode؛ کدام حجم کمتری دارد؟

نکته‌ی مهم در URL encode این است که SVG باید داخل url("...") با گیومه‌ی دوتایی قرار بگیرد و گیومه‌های داخل SVG تکی باشند. این ابزار این کار و رمزگذاری کاراکترهایی مثل # و < را خودش انجام می‌دهد؛ جاافتادن همین # در رنگ‌ها رایج‌ترین دلیل نمایش داده نشدن SVG در CSS است.

قبل از تبدیل، SVG را سبک کن

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

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