Trình tạo họa tiết SVG

Trình tạo họa tiết SVG là gì?

Trình tạo họa tiết SVG là một công cụ miễn phí chạy trong trình duyệt dành cho nhà thiết kế web và lập trình viên front-end cần một nền nhẹ, có thể lặp lại mà không cần mở trình chỉnh sửa đồ họa. Bạn chọn một họa tiết từ menu thả xuống (chấm, lưới, sọc, đường chéo, bàn cờ), đặt màu tiền cảnh cho các hình và màu nền cho ô lát, rồi dùng các ô nhập số tỷ lệ và độ dày để điều khiển kích thước ô lát và độ dày nét. Kết quả là một ô lát duy nhất được vẽ dưới dạng SVG sắc nét, được thiết kế để lặp lại liền mạch, nên kích thước tệp luôn rất nhỏ và họa tiết co giãn mà không bị mờ. Dùng nút chuyển Định dạng để chuyển đổi đầu ra có thể sao chép giữa mã SVG thô và quy tắc CSS background-image, sau đó sao chép nó hoặc tải tệp .svg để dùng cho trang web, thẻ, mục hero và bản dựng giao diện.

Cách sử dụng Trình tạo họa tiết SVG

1. Chọn một họa tiết từ menu thả xuống: Chấm, Lưới, Sọc, Đường chéo hoặc Bàn cờ.
2. Nhập hoặc chọn màu tiền cảnh cho các hình và màu nền cho ô lát.
3. Đặt các ô nhập số Tỷ lệ (kích thước ô lát tính bằng pixel) và Độ dày (bán kính chấm hoặc độ dày đường).
4. Mở Cài đặt và dùng nút chuyển Định dạng để chuyển đầu ra giữa SVG và CSS.
5. Quan sát bản xem trước trực tiếp lát họa tiết, rồi sao chép SVG hoặc CSS, hoặc nhấp Tải xuống để lưu tệp .svg.

Ví dụ

Câu hỏi thường gặp

Tôi có thể tạo những họa tiết nào?

Năm họa tiết có thể lát: chấm, lưới, sọc, đường chéo và bàn cờ. Mỗi loại được vẽ dưới dạng một ô lát SVG nhỏ lặp lại liền mạch, nên luôn sắc nét ở mọi kích thước và giữ tệp rất nhỏ.

Tỷ lệ và Độ dày điều khiển những gì?

Tỷ lệ là kích thước của một ô lát tính bằng pixel, quy định khoảng cách giữa các hình lặp lại. Độ dày là bán kính chấm hoặc độ dày đường bên trong ô lát. Độ dày được tự động giới hạn tương đối so với tỷ lệ để họa tiết không bao giờ lấp đầy quá mức ô lát.

Sự khác biệt giữa đầu ra SVG và CSS là gì?

SVG cung cấp mã thô cho một tệp .svg độc lập hoặc dùng inline. CSS cung cấp một quy tắc background-image dùng data URI cộng với background-repeat: repeat, sẵn sàng dán vào bảng định kiểu. Dùng nút chuyển Định dạng trong Cài đặt để chuyển đổi giữa hai loại.

Tôi có thể chọn màu trực quan thay vì gõ HEX không?

Có. Nhấp vào ô màu bên cạnh trường tiền cảnh hoặc nền để mở bộ chọn màu mặc định của trình duyệt, hoặc gõ trực tiếp một giá trị HEX như #4f86f7. Bản xem trước và đầu ra cập nhật khi bạn thay đổi.

Màu sắc hoặc tệp của tôi có được tải lên đâu đó không?

Không. Họa tiết được dựng hoàn toàn trong trình duyệt của bạn dưới dạng chuỗi SVG, và bản tải xuống được tạo cục bộ dưới dạng Blob. Không có màu sắc, mã hay tệp nào từng được gửi đến máy chủ, nên công cụ hoạt động ngoại tuyến và giữ kín công việc của bạn.