مارکآپ SVG را بهصورت یک data URI با رمزگذاری URL یا base64 رمزگذاری کنید، با خطوط آمادهچسباندن CSS background-image و <img>. مینیفای اختیاری.
— خروجی اینجا نمایش داده میشود —
— خروجی اینجا نمایش داده میشود —
— خروجی اینجا نمایش داده میشود —
درباره این ابزار
مارکآپ خام SVG را بچسبانید و یک data URI بگیرید که میتوانید مستقیماً در CSS یا HTML رها کنید. دو رمزگذاری تولید میکند و همهچیز در مرورگر شما ساخته میشود، پس چیزی آپلود نمیشود.
خروجی رمزگذاریشده با URL نقلقولهای دوتایی را با نقلقولهای تکی جایگزین میکند، encodeURIComponent را اجرا میکند، سپس چند کاراکتر امن (فاصله، دونقطه، اسلش، مساوی) را بازمیگرداند تا فشرده و برای انسان خوانا بماند. خروجی base64 آن SVG را با UTF-8 رمزگذاری میکند و از طریق btoa میگذراند، و data:image/svg+xml;base64,… میدهد. یک مقایسه بایتی نشان میدهد کدام رمزگذاری کوچکتر است؛ برای اکثر آیکونها فرم رمزگذاریشده با URL برنده است.
مینیفای را فعال کنید تا پیش از رمزگذاری، کامنتها حذف و فاصلههای سفید میان تگها جمع شوند. خط background-image را برای CSS یا خط <img src> را برای HTML کپی کنید. توجه کنید که نقلقولهای داخل SVG به نقلقولهای تکی نرمالسازی میشوند تا data URI بتواند بهسلامت درون نقلقولهای دوتایی پیچیده شود.
پرسشهای پرتکرار
رمزگذاریشده با URL یا base64 — کدام را استفاده کنم؟
رمزگذاریشده با URL معمولاً کوچکتر است و خوانا میماند، که به اشکالزدایی کمک میکند. base64 مبهمتر اما بهطور جهانی پذیرفتهشده است؛ مقایسه اندازه اینجا میگوید کدام کوچکتر است.
چرا نقلقولهای دوتایی من به نقلقولهای تکی تغییر کردند؟
نقلقولهای صفتها به نقلقولهای تکی تبدیل میشوند تا کل data URI بتواند بدون escape درون url("…") یا src="…" با نقلقول دوتایی بنشیند. هر دو در SVG معتبرند.
آیا مینیفای ظاهر SVG را تغییر میدهد؟
نه. فقط کامنتها را حذف میکند و فاصلههای سفید میان و درون تگها را جمع میکند؛ بردار رندرشده یکسان است، فقط کوچکتر.
آیا SVG من بهجایی آپلود میشود؟
نه. رمزگذاری کاملاً در مرورگر شما با encodeURIComponent و btoa اجرا میشود؛ مارکآپ هرگز دستگاه شما را ترک نمیکند.