تا ۲۰۰ تصویر در هر کار پردازش کنید — تنظیمات خود را یک بار انتخاب کنید، همه را اجرا کنید.
از درخواستهای HTTP اضافی برای هر آیکون کوچک که سرعت وبسایت شما را کاهش میدهد خسته شدهاید؟ مبدل SVG به Data URI ما راهحل شماست. این ابزار به شما امکان میدهد تصاویر SVG را مستقیماً در HTML یا CSS خود جاسازی کنید و نیاز به درخواست فایلهای جداگانه را از بین ببرید و به تسریع رندر صفحه کمک کنید. با تبدیل کد SVG شما به یک data URI فشرده با رمزگذاری base64، میتوانید داراییهای خود را سادهسازی کرده و عملکرد کلی سایت را در عرض چند ثانیه بهبود بخشید.
نحوه عملکرد مبدل SVG به Data URI ما
فرآیند بسیار ساده است. کافی است کد کامل SVG خود را - که با <svg> شروع و با </svg> خاتمه مییابد - در جعبه ورودی بچسبانید و روی دکمه تبدیل کلیک کنید. ابزار ما فوراً کد را در مرورگر شما پردازش کرده و آن را به یک رشته base64 رمزگذاری میکند. سپس این رشته را در قالب صحیح برای استفاده مستقیم قرار میدهد و قطعههایی را در اختیار شما قرار میدهد که آماده کپی شدن در ویژگی background-image CSS یا ویژگی src تگ <img> HTML هستند. هیچ راهاندازی پیچیدهای وجود ندارد؛ این یک عملیات ساده کپی و پیست است.
چه زمانی از SVG Data URI استفاده کنیم
جاسازی SVGها به عنوان data URI برای آیکونها و گرافیکهای کوچک و سادهای که به طور مکرر در سراسر سایت شما استفاده میشوند، مانند لوگوها، نقاط گلوله یا عناصر رابط کاربری، ایدهآل است. مزیت اصلی کاهش درخواستهای سرور است که میتواند سرعت بارگذاری سایت شما را به ویژه در دستگاههای تلفن همراه به طور قابل توجهی افزایش دهد. با این حال، این روش برای SVGهای بزرگ یا بسیار پیچیده مناسب نیست. زیرا رمزگذاری base64 اندازه فایل را حدود 33٪ افزایش میدهد و جاسازی یک SVG بزرگ میتواند فایل CSS یا HTML شما را حجیم کرده و مزایای عملکرد را خنثی کند. برای کارهای برداری پیچیدهتر، مجموعه کامل ابزارهای برداری SVG ما را بررسی کنید.
نکاتی برای بهترین نتایج
برای بهرهگیری حداکثری از این تکنیک، همیشه SVG خود را قبل از تبدیل بهینه کنید. یک فایل SVG کوچکتر و تمیزتر منجر به یک data URI کوتاهتر و کارآمدتر میشود. ما به شدت توصیه میکنیم ابتدا کد خود را از طریق ابزار بهینهساز SVG ما اجرا کنید تا دادههای غیرضروری حذف و اندازه آن به حداقل برسد. همچنین به خاطر داشته باشید که پس از جاسازی یک SVG به عنوان data URI، نمیتوانید بخشهای داخلی آن را با CSS خارجی استایل دهید. از این نظر مانند PNG یا JPEG عمل میکند. برای گرافیکهایی که نیاز به استایلدهی پویا دارند، پیوند به یک فایل .svg خارجی همچنان رویکرد بهتری است. الهام و گرافیکهای آماده استفاده را در فهرست SVG ما پیدا کنید.
سوالات متداول
SVG data URI چیست؟
SVG data URI یک رشته متنی است که یک تصویر SVG را نشان میدهد و در قالب base64 رمزگذاری شده است. این امکان را به شما میدهد که تصویر را مستقیماً در HTML یا CSS جاسازی کنید بدون نیاز به یک فایل جداگانه.
آیا بهتر است SVG را جاسازی کنیم یا از تگ <img> استفاده کنیم؟
جاسازی SVG به عنوان یک URI داده برای آیکونهای کوچک بهتر است تا درخواستهای HTTP کاهش یابد و بارگذاری اولیه صفحه بهبود یابد. برای SVGهای بزرگ و پیچیده، استفاده از یک تگ <img> استاندارد که به یک فایل .svg لینک میدهد، برای ذخیرهسازی در حافظه نهان بهتر است.
چگونه از SVG base64 در CSS استفاده کنم؟
میتوانید از SVG کدگذاریشده با base64 در CSS با تنظیم آن به عنوان مقدار ویژگی `background-image` استفاده کنید. فرمت آن به صورت `url('data:image/svg+xml;base64,...')` است که به جای نقطهها، رشته کدگذاریشده شما قرار میگیرد.
چرا URI داده SVG من اینقدر طولانی است؟
رمزگذاری Base64 اندازه فایل اصلی را تقریباً 33٪ افزایش میدهد. برای به دست آوردن URI داده کوتاهتر، ابتدا باید کد SVG خود را برای حذف کاراکترها و نظرات غیرضروری کوچکسازی کنید.
آیا میتوانم یک SVG جاسازی شده به عنوان data URI را استایل دهم؟
خیر، شما نمیتوانید مسیرهای داخلی یک SVG data URI را با استفاده از CSS خارجی از صفحه وب خود استایل دهید. در این زمینه، مرورگر آن را مانند یک تصویر شطرنجی ثابت مانند PNG در نظر میگیرد.
آیا URIهای داده SVG برای سئو مضر هستند؟
خیر، ذاتاً برای سئو مضر نیستند. وقتی به درستی برای آیکونهای کوچک استفاده شوند، میتوانند سرعت صفحه را بهبود بخشند که یک عامل رتبهبندی مثبت است. از استفاده از آنها برای تصاویر بزرگ که میتوانند تجزیه HTML/CSS شما را کند کنند، خودداری کنید.
تفاوت بین SVGهای base64 و URL-encoded چیست؟
هر دو روشی برای جاسازی SVGها هستند. Base64 یک طرح رمزگذاری دودویی به متن است که برای هر دادهای مناسب است، در حالی که URL-encoding (یا percent-encoding) تضمین میکند که XML SVG برای استفاده درون یک رشته URL ایمن باشد.
آیا این ابزار دادههای SVG من را ذخیره میکند؟
خیر، ابزار ما کاملاً در مرورگر شما کار میکند. کد SVG شما هرگز به سرورهای ما آپلود نمیشود و حریم خصوصی دادههای شما تضمین میشود.
درباره تبدیل SVG به Data URI در CSS
تبدیل SVG به Data URI در CSS یک ابزار آنلاین رایگان از Wallpapers.com است که کاملاً در مرورگر شما اجرا میشود — بدون نصب، بدون واترمارک، بدون ثبتنام ایمیلی برای اولین تلاش.
کد SVG را به یک data URI با رمزگذاری base64 برای جاسازی در CSS/HTML تبدیل کنید.
نحوه استفاده تبدیل SVG به Data URI در CSS
- عکس خود را به منطقه بارگذاری بکشید (تکی یا دستهای — کلید Bulk را در بالا فعال کنید).
- هر تنظیماتی که ابزار ارائه میدهد انتخاب کنید (اندازه، فرمت، کیفیت).
- روی Run کلیک کنید. نتیجه به طور خودکار دانلود میشود — نیازی به ذخیره دستی نیست.
زمان استفاده از آن
موارد استفاده رایج عبارتاند از:
آمادهسازی تصاویر برای آپلود وب، فهرست محصولات فروشگاهی، پلتفرمهای شبکههای اجتماعی با محدودیت فرمت، و تبدیل فایلها از یک دستگاه یا برنامه به دیگری.
رایگان در برابر پریمیوم
هر بازدیدکننده یک اجرای آزمایشی رایگان دریافت میکند؛ کاربران رایگان واردشده سهمیه روزانه بالاتری دارند. مشترک شوید
پریمیوم
برای اجرای نامحدود، پردازش دستهای تا ۲۰۰ تصویر در هر کار، صف اولویت، و مرور بدون تبلیغات.
ابزارهای مرتبط
به دنبال چیز کمی متفاوت هستید؟
مبدل SVG به PNG
,
تبدیل SVG به JPG
یا
مبدل SVG به WebP
— یا همه را مرور کنید
SVG / برداری ابزارها.
