مولد جاینگهدار SVG
پیشنمایش
نشانهگذاری SVG
URI داده
جزئیات فنی
مولد جاینگهدار SVG چگونه کار میکند
این ابزار چه کاری انجام میدهد
مولد جاینگهدار SVG تصاویر جاینگهدارِ برداریِ سبک با ابعاد سفارشی، رنگهای پسزمینه، متن روی تصویر و تنظیمات فونت ایجاد میکند. خروجی را هم بهصورت مستقیم به شکل مارکاپ SVG و هم بهصورت data URI با Base64 آماده برای جاسازی در HTML یا CSS ارائه میدهد. چون SVG مستقل از رزولوشن است و معمولاً کمتر از 1KB حجم دارد، این جاینگهدارها بدون درخواست شبکه فوراً بارگذاری میشوند.
موارد استفادهٔ رایج برای توسعهدهندگان
توسعهدهندگان فرانتاند هنگام نمونهسازی از جاینگهدارهای SVG استفاده میکنند تا پیش از آماده شدن تصاویر واقعی، فضای چیدمان را رزرو کنند و از جابهجایی تجمعی چیدمان (CLS) جلوگیری شود. اینها در سیستمهای طراحی برای جایگزین آواتار، اسکلتبندی بندانگشتیها و کانتینرهای تصویر واکنشگرا مفید هستند. توسعهدهندگان ایمیل جاینگهدارهای data URI را در قالبهای HTML جاسازی میکنند، جایی که ممکن است بارگذاری تصویر خارجی توسط کلاینتهای ایمیل مسدود شود.
قالبها، نوعها یا گونههای داده
خروجی یک سند استاندارد SVG 1.1 است که شامل یک مستطیلِ پرشده و یک عنصر متنِ وسطچین میشود. گونه data URI این SVG را بهصورت یک رشته Base64 با پیشوند 'data:image/svg+xml;base64,' کُدگذاری میکند تا مستقیماً در ویژگیهای img src، ویژگیهای CSS background-image یا HTML درونخطی استفاده شود. ابعاد بر حسب پیکسل مشخص میشوند، اما SVG بدون پیکسلیشدن به هر اندازه کانتینر مقیاس میشود چون یک قالب برداری است.
دامهای رایج و حالتهای لبهای
URIهای داده بهصورت مستقل از سندی که در آن جاسازی شدهاند توسط مرورگرها کش نمیشوند؛ بنابراین استفاده از یک placeholder یکسان در صفحات متعدد، در مقایسه با یک فایل خارجیِ واحد که کش میشود، اندازهٔ کل انتقال را افزایش میدهد. برچسبهای متنیِ بسیار طولانی ممکن است اگر ابعاد کوچک باشند از viewBoxِ SVG بیرون بزنند. برخی کلاینتهای ایمیل قدیمی از URIهای دادهٔ SVG پشتیبانی نمیکنند و به آیکون تصویر خراب برمیگردند. هدرهای سیاست امنیت محتوا (CSP) ممکن است URIهای دادهٔ درونخطی را مسدود کنند اگر 'data:' در img-src گنجانده نشده باشد.
چه زمانی از این ابزار استفاده کنیم در برابر کُد
از این ابزار مرورگر استفاده کنید تا هنگام وایرفریم یا نمونهسازی اولیه، بدون افزودن وابستگیهای بیلد، بهسرعت تصاویر placeholder تکبارمصرف تولید کنید. برای تولید پویای placeholder در محیط پروداکشن (مثلاً fallback برای تصاویر آپلودشده توسط کاربر)، از قالبسازی SVG در سمت سرور یا سرویسهای اختصاصی مانند plaiceholder استفاده کنید که با پایپلاین بهینهسازی تصویر شما یکپارچه میشوند و میتوانند placeholderهای تصویرِ محو و کمکیفیت (LQIP) را از تصاویر واقعی تولید کنند.