Công cụ tạo placeholder SVG trực tuyến miễn phí cho thiết kế web
Features
- Kích thước tuỳ chỉnh: Hỗ trợ kích thước từ 50px đến 2000px với độ chính xác cao, phù hợp thiết kế responsive và mockup.
- Màu sắc linh hoạt: Chọn màu nền và màu chữ bằng bộ chọn màu, mã HEX hoặc RGB để đồng bộ với thương hiệu.
- Văn bản tùy biến: Thêm chú thích theo ý muốn với cỡ chữ điều chỉnh (8-100px) để phân biệt mục đích placeholder.
- Định dạng vector: Sinh mã SVG thuần, phóng to vô hạn không vỡ nét, tối ưu cho màn hình retina và thiết kế responsive.
Usage Guide
- Thiết lập kích thước: Nhập chiều rộng và chiều cao placeholder theo pixel (50-2000px).
- Chọn màu sắc: Chọn màu nền và màu chữ bằng bộ chọn màu để phù hợp bố cục.
- Tùy chỉnh văn bản: Nhập văn bản và điều chỉnh cỡ chữ để ghi chú rõ ràng mục đích placeholder.
- Tạo và xuất: Nhấn Tạo để xem trước, sau đó sao chép mã SVG hoặc tải tệp .svg để sử dụng ngay.
Technical Details
Đặc tả SVG
SVG (Scalable Vector Graphics) là ngôn ngữ đánh dấu dựa trên XML do W3C định nghĩa để mô tả đồ họa vector 2D. Sử dụng biểu thức toán học để vẽ hình, đường và văn bản nên độc lập độ phân giải, hỗ trợ CSS và JavaScript.
Cấu trúc placeholder
Mã SVG tạo ra gồm phần tử gốc <svg> với viewBox, một <rect> làm nền và <text> căn giữa. Các thuộc tính fill, font-family, font-Kích thước, text-anchor đảm bảo tương thích trình duyệt và dễ chỉnh sửa.
Tình huống sử dụng
Placeholder SVG hữu ích trong wireframe, prototype, phát triển front-end, trạng thái chờ tải, kiểm tra responsive, thư viện component và mockup tài liệu. Kích thước nhỏ (<1KB) rất phù hợp ứng dụng đề cao hiệu năng.
Frequently Asked Questions
- SVG placeholder là gì và tại sao tôi nên sử dụng?
- SVG placeholder là đồ họa vector nhẹ được sử dụng làm bộ chứa nội dung tạm thời trong thiết kế web. Khác với hình ảnh raster (PNG, JPG), SVG placeholder dựa trên XML, mở rộng vô hạn mà không mất chất lượng, có kích thước tệp tối thiểu (thường < 1KB), và có thể tùy chỉnh bằng CSS. Chúng hoàn hảo cho wireframe, nguyên mẫu, trạng thái tải, và kiểm tra thiết kế responsive.
- Tôi có thể đặt kích thước nào?
- Bạn có thể đặt bất kỳ kích thước nào từ 50px đến 2000px cho cả chiều rộng và chiều cao. Công cụ cung cấp kiểm soát pixel chính xác cho thiết kế web responsive và mockup. SVG placeholder mở rộng hoàn hảo đến bất kỳ kích thước nào trong khi duy trì tỷ lệ khung hình và chất lượng.
- Làm thế nào để tôi sử dụng SVG được tạo trong dự án của mình?
- Bạn có thể: sao chép mã SVG và dán trực tiếp vào HTML, tải xuống dưới dạng tệp .svg và tham chiếu với <img src="placeholder.svg">, sử dụng inline trong CSS làm hình nền, hoặc nhúng vào các thành phần React/Vue. SVG được tạo là mã tiêu chuẩn thuần túy tương thích với tất cả các trình duyệt hiện đại.
- Tôi có thể tùy chỉnh màu sắc và văn bản không?
- Có, bạn có thể tùy chỉnh: màu nền (sử dụng bộ chọn màu, mã hex hoặc giá trị RGB), màu văn bản, kích thước phông chữ (phạm vi 8-100px), và văn bản hiển thị (nhãn tùy chỉnh để xác định mục đích của placeholder). Tất cả các tùy chọn tùy chỉnh có sẵn trong giao diện công cụ.
- Lợi ích so với placeholder hình ảnh là gì?
- SVG placeholder cung cấp: khả năng mở rộng vô hạn mà không mất chất lượng, kích thước tệp cực nhỏ (thường < 500 byte), không có yêu cầu HTTP khi inline, có thể tùy chỉnh bằng CSS cho chủ đề động, có thể truy cập với nhãn ARIA phù hợp, thân thiện với công cụ tìm kiếm, và hoàn hảo cho các ứng dụng web responsive và progressive hiện đại. Chúng tải ngay lập tức và hoạt động offline.
Related Documentation
- W3C SVG Specification - Đặc tả SVG 1.1 và 2.0 chính thức từ W3C
- MDN - Hướng dẫn SVG - Hướng dẫn toàn diện cách tạo và thao tác đồ họa SVG
- Tham khảo phần tử SVG - Danh mục đầy đủ phần tử, thuộc tính và thuộc tính mở rộng của SVG
- Hướng dẫn tối ưu SVG - Thực hành tối ưu tệp SVG để cải thiện hiệu năng web
- Can I Use - Hỗ trợ SVG - Thông tin tương thích trình duyệt với các tính năng SVG