Mockup wireframe cần "ảnh ở đây" placeholder. Test layout responsive với placeholder kích thước khác nhau. Storybook hoặc component lib stub cần dữ liệu giả.

Tạo Placeholder Image

Tạo placeholder image SVG inline với bất kỳ kích thước nào với văn bản và màu tùy chỉnh. Xuất ra dưới dạng data URI hoặc SVG có thể tải về.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

Tạo bởi JXXR1 · ♥ Tài trợ · ☕ Mời tôi một ly cà phê

Công cụ này để làm gì?

Mockup và wireframe cần placeholder image — không phải nội dung thực, chỉ là khối với kích thước đúng. Tool này tạo SVG inline ở bất kỳ kích thước nào với text và màu tùy chỉnh — copy dưới dạng data URI để dùng inline trong CSS/HTML, hoặc tải file SVG để chèn vào tài liệu.

Khi nào nên dùng

Mockup wireframe cần "ảnh ở đây" placeholder.
Test layout responsive với placeholder kích thước khác nhau.
Storybook hoặc component lib stub cần dữ liệu giả.

Lưu ý thường gặp

SVG có thể inline. Vì SVG là XML text, bạn có thể nhúng nó trực tiếp vào HTML — không cần tag <img>. Tốt cho icon hoặc decoration.
Đừng ship placeholder. Khi build production, replace placeholder image bằng asset thực hoặc lazy-load.
SVG hỗ trợ alpha và gradient. Đối với placeholder phức tạp hơn (gradient, pattern), SVG vẫn nhỏ hơn PNG.