What is an SVG placeholder image?

An SVG placeholder is a lightweight, scalable vector image used during development or design to represent a final image that hasn't been created yet. Because SVG is text-based, placeholders are tiny in file size and render crisp at any resolution.

How do I use the SVG data URI in HTML?

Paste the data URI directly into the src attribute of an img tag: . This embeds the image inline without any external HTTP request, making it ideal for mockups, emails, and rapid prototyping.

What presets are available?

The tool includes common presets: 16:9 (1280x720), 4:3 (800x600), 1:1 square (400x400), Banner (728x90), OG Image (1200x630), and Twitter Card (1200x675). You can also enter any custom width and height.

Can I customise the text and colours?

Yes. You can set any background colour, text colour, and custom label text. If you leave the text blank, the tool defaults to showing the image dimensions (e.g. 400x300).

SVG प्लेसहोल्डर जनरेटर

281 Bतयार

प्रीसेट

BG#cccccc

मजकूर#333333

लेबल

पूर्वावलोकन

SVG मार्कअप

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect fill="#cccccc" width="400" height="300"/><text fill="#333333" font-family="sans-serif" font-size="50" text-anchor="middle" dominant-baseline="central" x="200" y="150">400×300</text></svg>

डेटा URI

तांत्रिक तपशील

SVG प्लेसहोल्डर जनरेटर कसा कार्य करतो

हे टूल काय करते

SVG प्लेसहोल्डर जनरेटर कस्टम परिमाणे, पार्श्वभूमी रंग, टेक्स्ट ओव्हरले, आणि फॉन्ट सेटिंग्जसह हलकी व्हेक्टर प्लेसहोल्डर प्रतिमा तयार करतो. तो SVG मार्कअप थेट तसेच HTML किंवा CSS मध्ये एम्बेड करण्यासाठी तयार Base64 data URI म्हणून आउटपुट करतो. SVG रिझोल्यूशन-स्वतंत्र आणि साधारणपणे 1KB पेक्षा कमी असल्यामुळे, हे प्लेसहोल्डर्स नेटवर्क रिक्वेस्ट्सशिवाय त्वरित लोड होतात.

डेव्हलपरसाठी सामान्य वापर प्रकरणे

फ्रंटएंड डेव्हलपर्स प्रोटोटायपिंगदरम्यान वास्तविक प्रतिमा उपलब्ध होण्यापूर्वी लेआउट स्पेस राखून ठेवण्यासाठी SVG प्लेसहोल्डर्स वापरतात, ज्यामुळे cumulative layout shift (CLS) टाळता येतो. ते डिझाइन सिस्टीम्समध्ये अवतार फॉलबॅक्स, थंबनेल स्केलेटन, आणि रेस्पॉन्सिव्ह इमेज कंटेनर्ससाठी उपयुक्त आहेत. ईमेल डेव्हलपर्स HTML टेम्पलेट्समध्ये data URI प्लेसहोल्डर्स एम्बेड करतात, जिथे ईमेल क्लायंट्सकडून बाह्य प्रतिमा लोडिंग ब्लॉक होऊ शकते.

डेटा फॉरमॅट्स, प्रकार किंवा व्हेरिएंट्स

आउटपुट एक मानक SVG 1.1 दस्तऐवज आहे, ज्यात भरलेला आयत आणि मध्यभागी असलेला टेक्स्ट एलिमेंट असतो. data URI व्हेरिएंट हा SVG Base64 स्ट्रिंग म्हणून एन्कोड करतो, ज्याच्या सुरुवातीला 'data:image/svg+xml;base64,' असते, जे img src अॅट्रिब्यूट्स, CSS background-image प्रॉपर्टीज, किंवा inline HTML मध्ये थेट वापरासाठी योग्य आहे. परिमाणे पिक्सेलमध्ये निर्दिष्ट केली जातात, पण SVG कोणत्याही कंटेनर आकारात पिक्सेलेशनशिवाय स्केल होते कारण तो व्हेक्टर फॉरमॅट आहे.

सामान्य चुका आणि एज केसेस

डेटा URI ब्राउझरद्वारे ते ज्या दस्तऐवजात एम्बेड केलेले असतात त्यापासून स्वतंत्रपणे कॅश केले जात नाहीत, त्यामुळे अनेक पानांवर एकच प्लेसहोल्डर वापरल्यास एकाच कॅश केलेल्या बाह्य फाइलच्या तुलनेत एकूण ट्रान्सफर आकार वाढतो. परिमाणे लहान असल्यास अतिशय लांब मजकूर लेबले SVG viewBox च्या बाहेर जाऊ शकतात. काही जुने ईमेल क्लायंट SVG डेटा URI ला समर्थन देत नाहीत आणि त्याऐवजी तुटलेल्या प्रतिमेच्या आयकॉनवर परत जातात. Content Security Policy (CSP) हेडर्स img-src मध्ये 'data:' समाविष्ट नसल्यास इनलाइन डेटा URI ब्लॉक करू शकतात.

कोडच्या तुलनेत हे टूल कधी वापरावे

बिल्ड डिपेंडन्सीज न जोडता वायरफ्रेमिंग किंवा प्रोटोटायपिंगदरम्यान पटकन एकदाच वापरायच्या प्लेसहोल्डर प्रतिमा तयार करण्यासाठी हे ब्राउझर टूल वापरा. प्रॉडक्शनमध्ये डायनॅमिक प्लेसहोल्डर जनरेशनसाठी (उदा., वापरकर्त्याने अपलोड केलेल्या प्रतिमांसाठी फॉलबॅक), सर्व्हर-साइड SVG टेम्प्लेटिंग किंवा तुमच्या इमेज ऑप्टिमायझेशन पाइपलाइनसोबत इंटिग्रेट होणाऱ्या आणि प्रत्यक्ष प्रतिमांमधून ब्लर केलेले लो-क्वालिटी इमेज प्लेसहोल्डर्स (LQIP) तयार करू शकणाऱ्या plaiceholder सारख्या समर्पित सेवांचा वापर करा.