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พร้อม

พรีเซ็ต

ก

ส

พื้นหลัง#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>

Data URI

รายละเอียดทางเทคนิค

เครื่องสร้าง SVG Placeholder ทำงานอย่างไร

เครื่องมือนี้ทำอะไร

เครื่องสร้าง SVG Placeholder สร้างภาพตัวแทนแบบเวกเตอร์ที่มีน้ำหนักเบา พร้อมกำหนดขนาด สีพื้นหลัง ข้อความซ้อนทับ และการตั้งค่าฟอนต์ได้ โดยส่งออกมาร์กอัป SVG โดยตรงและเป็น Base64 data URI ที่พร้อมฝังใน HTML หรือ CSS เนื่องจาก SVG ไม่ขึ้นกับความละเอียดและโดยทั่วไปมีขนาดต่ำกว่า 1KB ตัวแทนเหล่านี้จึงโหลดได้ทันทีโดยไม่ต้องมีคำขอเครือข่าย

กรณีการใช้งานทั่วไปของนักพัฒนา

นักพัฒนา Frontend ใช้ SVG placeholder ระหว่างการทำต้นแบบเพื่อจองพื้นที่เลย์เอาต์ก่อนที่รูปจริงจะพร้อม ช่วยหลีกเลี่ยง cumulative layout shift (CLS) นอกจากนี้ยังมีประโยชน์ใน design system สำหรับรูปโปรไฟล์สำรอง (avatar fallback), โครงร่างตัวอย่างภาพขนาดย่อ (thumbnail skeleton) และคอนเทนเนอร์รูปภาพแบบ responsive นักพัฒนาอีเมลฝัง data URI placeholder ในเทมเพลต HTML ในกรณีที่ไคลเอนต์อีเมลอาจบล็อกการโหลดรูปภาพภายนอก

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

ผลลัพธ์เป็นเอกสาร SVG 1.1 มาตรฐานที่มีสี่เหลี่ยมทึบและองค์ประกอบข้อความที่จัดกึ่งกลาง เวอร์ชัน data URI จะเข้ารหัส SVG นี้เป็นสตริง Base64 โดยมีคำนำหน้า 'data:image/svg+xml;base64,' เพื่อใช้โดยตรงในแอตทริบิวต์ img src, คุณสมบัติ CSS background-image หรือ HTML แบบอินไลน์ มิติระบุเป็นพิกเซล แต่ SVG จะสเกลให้พอดีกับขนาดคอนเทนเนอร์ใดก็ได้โดยไม่แตกเป็นพิกเซล เพราะเป็นฟอร์แมตเวกเตอร์

ข้อผิดพลาดที่พบบ่อยและกรณีขอบ

Data URI จะไม่ถูกแคชโดยเบราว์เซอร์แยกจากเอกสารที่ฝังอยู่ ดังนั้นการใช้ placeholder เดียวกันในหลายหน้า จะเพิ่มขนาดการรับส่งข้อมูลรวมเมื่อเทียบกับไฟล์ภายนอกไฟล์เดียวที่ถูกแคชไว้ ป้ายข้อความที่ยาวมากอาจล้นออกนอก SVG viewBox หากมิติมีขนาดเล็ก ไคลเอนต์อีเมลรุ่นเก่าบางตัวไม่รองรับ SVG data URI และจะย้อนกลับไปแสดงเป็นไอคอนรูปภาพเสียหาย ส่วนหัว Content Security Policy (CSP) อาจบล็อก data URI แบบ inline หากไม่ได้รวม 'data:' ไว้ใน img-src

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้เครื่องมือในเบราว์เซอร์นี้เพื่อสร้างภาพ placeholder แบบใช้ครั้งเดียวได้อย่างรวดเร็วระหว่างทำ wireframing หรือ prototyping โดยไม่ต้องเพิ่ม dependency ในขั้นตอน build สำหรับการสร้าง placeholder แบบไดนามิกในโปรดักชัน (เช่น fallback สำหรับรูปภาพที่ผู้ใช้อัปโหลด) ให้ใช้การทำเทมเพลต SVG ฝั่งเซิร์ฟเวอร์หรือบริการเฉพาะทางอย่าง plaiceholder ที่ผสานเข้ากับ pipeline การปรับแต่งรูปภาพของคุณ และสามารถสร้าง blurred low-quality image placeholders (LQIP) จากรูปภาพจริงได้