فارسی

تولید تصویر جایگزین SVG

تولید تصاویر SVG برای استفاده به عنوان placeholder.
#cccccc
#333333
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 350" width="600" height="350">
  <rect width="600" height="350" fill="#cccccc"></rect>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="26px" fill="#333333">600x350</text>   
</svg>
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzUwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM1MCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIzNTAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4MzUwPC90ZXh0PiAgIAo8L3N2Zz4=
Image

SVG Placeholder Generator — تصویر جایگزین

در طراحی سایت و اپلیکیشن، قبل از آماده شدن تصاویر واقعی معمولاً به placeholder نیاز دارید تا اندازه و چیدمان صفحه مشخص شود. این ابزار تصویر SVG با ابعاد، رنگ و متن دلخواه تولید می‌کند. چون SVG برداری و سبک است، برای mockup، prototype، تست layout و استفاده موقت در HTML/CSS بسیار مناسب است.

کاربردهای رایج

  • پر کردن جای تصاویر هنگام طراحی قالب
  • ساخت placeholder سبک برای نمونه‌سازی سریع
  • تست چیدمان تصاویر در صفحه
  • استفاده به‌صورت Data URI بدون فایل جداگانه

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

چرا SVG برای placeholder بهتر است؟

SVG برداری است و در هر اندازه‌ای بدون pixelation و با حجم بسیار کم نمایش داده می‌شود.

چطور از placeholder در HTML استفاده کنم؟

می‌توانید URL یا Data URI تولیدشده را مستقیم در src تگ img قرار دهید.

آیا می‌توانم متن دلخواه اضافه کنم؟

بله، متن نمایشی روی تصویر کاملاً قابل تنظیم است.

تفاوت SVG و PNG placeholder چیست؟

SVG برداری و سبک است، اما PNG پیکسلی است و در بزرگ‌نمایی کیفیت از دست می‌دهد.

راهنمای استفاده

عرض، ارتفاع، رنگ و متن placeholder را تنظیم کنید و خروجی SVG یا Data URI را در طرح، HTML یا CSS خود استفاده کنید. قبل از انتشار، placeholder را با تصویر واقعی جایگزین کنید.