Trình tạo placeholder SVG

Cách Trình tạo Placeholder SVG Hoạt động

Công cụ làm gì

Trình tạo Placeholder SVG tạo các ảnh placeholder dạng vector nhẹ với kích thước tùy chỉnh, màu nền, lớp phủ văn bản và thiết lập phông chữ. Công cụ xuất trực tiếp markup SVG và cả data URI Base64 sẵn sàng để nhúng vào HTML hoặc CSS. Vì SVG độc lập với độ phân giải và thường dưới 1KB, các placeholder này tải gần như tức thì mà không cần yêu cầu mạng.

Các trường hợp sử dụng phổ biến cho lập trình viên

Lập trình viên frontend dùng placeholder SVG trong giai đoạn tạo mẫu để giữ chỗ bố cục trước khi có ảnh thật, tránh dịch chuyển bố cục tích lũy (CLS). Chúng hữu ích trong design system cho fallback avatar, skeleton thumbnail và các container ảnh responsive. Lập trình viên email nhúng placeholder dạng data URI vào template HTML trong trường hợp việc tải ảnh bên ngoài có thể bị chặn bởi các email client.

Định dạng dữ liệu, kiểu hoặc biến thể

Đầu ra là một tài liệu SVG 1.1 tiêu chuẩn chứa một hình chữ nhật được tô màu và một phần tử văn bản căn giữa. Biến thể data URI mã hóa SVG này thành chuỗi Base64 với tiền tố 'data:image/svg+xml;base64,' để dùng trực tiếp trong thuộc tính img src, thuộc tính CSS background-image hoặc HTML inline. Kích thước được chỉ định theo pixel nhưng SVG có thể co giãn theo mọi kích thước container mà không bị vỡ hình vì đây là định dạng vector.

Các lỗi thường gặp và trường hợp biên

Data URI không được trình duyệt cache độc lập với tài liệu mà chúng được nhúng vào, vì vậy việc dùng cùng một placeholder trên nhiều trang sẽ làm tăng tổng dung lượng truyền tải so với một tệp bên ngoài duy nhất đã được cache. Nhãn văn bản quá dài có thể tràn khỏi viewBox của SVG nếu kích thước nhỏ. Một số ứng dụng email cũ không hỗ trợ SVG data URI, nên sẽ rơi về biểu tượng hình ảnh bị lỗi. Header Content Security Policy (CSP) có thể chặn data URI inline nếu 'data:' không được đưa vào img-src.

Khi nào nên dùng công cụ này thay vì viết mã

Dùng công cụ trên trình duyệt này để nhanh chóng tạo các ảnh placeholder dùng một lần trong quá trình wireframing hoặc prototyping mà không cần thêm phụ thuộc cho bước build. Để tạo placeholder động trong môi trường production (ví dụ: ảnh dự phòng cho ảnh do người dùng tải lên), hãy dùng templating SVG phía server hoặc các dịch vụ chuyên dụng như plaiceholder, vốn tích hợp với pipeline tối ưu hóa hình ảnh của bạn và có thể tạo placeholder ảnh mờ chất lượng thấp (LQIP) từ ảnh thực.