CanDoYa
VI

SVG Pattern Generator miễn phí

Chạy hoàn toàn trên trình duyệt của bạn - không tải lên, không cần đăng ký.

Họa tiết
Kiểu
Tiền cảnh
Nền
Chia sẻ công cụ này

SVG pattern generator dùng để làm gì?

SVG pattern generator ghép các hình khối như chấm tròn, đường kẻ, lưới ô vuông và đường zigzag thành một nền lặp lại liền mạch. Bạn chỉ cần chọn hình dạng, màu sắc, kích thước ô lặp và độ dày đường nét, công cụ sẽ xuất ra một file SVG rất nhẹ, luôn sắc nét ở mọi độ phân giải, kèm đoạn CSS dán được ngay. Mọi thứ được tạo ngay trong trình duyệt, không có gì được tải lên đâu cả.

Cách dùng

  1. 1Chọn một họa tiết. Chọn hình dạng từ các mẫu có sẵn: chấm tròn, vòng tròn, lưới ô vuông, đường chéo, gạch chéo lồng nhau, dấu cộng, zigzag và nhiều kiểu khác.
  2. 2Chỉnh màu sắc và hình dạng. Chọn màu tiền cảnh và nền (hoặc để nền trong suốt), rồi kéo các thanh trượt kích thước, độ dày và độ mờ trong khi bản xem trước cập nhật ngay lập tức.
  3. 3Sao chép hoặc tải xuống. Chuyển qua lại giữa tab CSS và SVG, sao chép đoạn mã, hoặc tải file .svg độc lập về để dùng ở bất kỳ đâu.

Dành cho ai

Công cụ này dựng họa tiết bằng mã SVG thuần, nên kết quả luôn sắc nét dù phóng to đến đâu hay màn hình có mật độ điểm ảnh cao thế nào, và thường chỉ nặng vài trăm byte, nhẹ hơn nhiều so với một ảnh PNG cùng hiệu ứng. Sao chép CSS để dán thẳng một background-image lặp lại vào file style, hoặc sao chép file SVG để dùng như một tài nguyên độc lập. Họa tiết được vẽ hoàn toàn trên thiết bị của bạn và không gửi đi đâu, nên vẫn hoạt động khi mất mạng sau khi trang đã tải xong.

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

SVG pattern generator này có miễn phí không?

Có, hoàn toàn miễn phí, không cần đăng ký và không giới hạn số lần dùng. Mọi họa tiết đều được tạo ngay trong trình duyệt, nên bạn muốn tạo và sao chép bao nhiêu cũng được, kể cả khi mất mạng sau khi trang đã tải xong.

Các họa tiết có thực sự liền mạch không?

Có. Mỗi hình được vẽ sao cho cạnh của nó khớp chính xác với ô lặp bên cạnh, và họa tiết lặp lại theo một lưới cố định. Cả background-image trong CSS lẫn phần tử <pattern> trong SVG đều ghép các ô sát nhau mà không để lộ đường nối.

Nên dùng CSS hay SVG?

Dùng CSS để dán thẳng một nền lặp vào file style - nhanh nhất cho website. Tải file SVG khi cần một file độc lập, chẳng hạn dùng làm tài nguyên hình ảnh, đưa vào công cụ thiết kế, hoặc chèn trực tiếp vào HTML.

Vì sao nên dùng họa tiết SVG thay vì PNG?

SVG là vector nên luôn sắc nét dù phóng to đến đâu hay màn hình có mật độ điểm ảnh cao thế nào, không bao giờ bị vỡ hạt. Một ô lặp SVG hình học thường chỉ nặng vài trăm byte, nhẹ hơn nhiều so với PNG tương đương, và bạn có thể đổi màu bất cứ lúc nào mà không cần xuất lại.

Có thể làm nền trong suốt không?

Có. Tích chọn Trong suốt thì phần nền sẽ bị bỏ đi, chỉ còn lại các hình ở tiền cảnh, nhờ đó bạn có thể đặt họa tiết chồng lên một màu, hình ảnh hoặc gradient đã có sẵn.

Thiết kế của tôi có bị tải lên đâu không?

Không. Toàn bộ họa tiết được dựng cục bộ ngay trong trình duyệt bằng mã SVG thuần và không gửi đi đâu cả, nên màu sắc và các thiết lập của bạn vẫn ở riêng trên thiết bị.