تبدیل SVG به پس‌زمینه CSS

کد SVG را پیست کنید تا پس از بهینه‌سازی و encode صحیح، به‌صورت background-image با data URI آماده‌ی استفاده در CSS شود.

برای سازگاری بهتر با CSS، کاراکترهای خاص (نقل‌قول، #، فاصله و غیره) به‌جای Base64 با URL-encoding ساده جایگزین می‌شوند که حجم کمتری تولید می‌کند.

ابزار تبدیل SVG به پس‌زمینه CSS، کد SVG را به data URI آماده‌ی استفاده در CSS تبدیل می‌کند. بدون فایل جدا، آیکون را در استایل بگذارید.

کد SVG را پیست کنید تا پس از بهینه‌سازی و encode صحیح، به‌صورت مقدار background-image با data URI آماده شود.

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

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

سوالات متداول

data URI چیست؟

data URI روشی است که محتوای یک فایل را مستقیم داخل کد جای می‌دهد تا نیازی به بارگذاری فایل جداگانه نباشد.

چرا SVG را در CSS بگذارم؟

با این کار یک درخواست شبکه کمتر می‌شود و آیکون‌های کوچک سریع‌تر بارگذاری می‌شوند.

آیا این روش برای SVGهای بزرگ هم خوب است؟

برای آیکون‌ها و الگوهای کوچک مناسب است؛ برای فایل‌های بزرگ بهتر است به‌صورت فایل جداگانه استفاده شوند.

ابزارهای مرتبط

ساخت گرادیان CSSگرادیان خطی یا شعاعی با چند رنگ بسازید و کد CSS آن را کپی کنید.
ساخت سایه CSSبا اسلایدر آفست، بلور، گسترش و رنگ، سایه‌ی دلخواه بسازید و کد CSS آن را کپی کنید.
ساخت افکت شیشه‌ای CSSافکت Glassmorphism (شیشه‌ای مات) با کنترل بلور، شفافیت و حاشیه بسازید.
انتخاب و تبدیل رنگیک ابزار کامل رنگ در چند بخش: انتخاب رنگ و گرفتن کد HEX/RGB/HSL/RGBA، تبدیل بین فرمت‌های رنگ (HEX، RGB، HSL، HSV، CMYK و نام CSS)، و برداشتن رنگ از روی هر پیکسل یک تصویر.
ساخت پالت رنگیاز یک رنگ پایه، پالت‌های مکمل، مشابه، سه‌تایی، چهارتایی و تک‌رنگ بسازید و به‌صورت CSS خروجی بگیرید.
بررسی کنتراست رنگنسبت کنتراست دو رنگ را بر اساس استاندارد WCAG بسنجید و نتیجه‌ی AA/AAA را ببینید.