Softonic

Bộ tạo điểm chấm SVG

Bước 1 / 3
Tiếp theo

Các mẫu điểm là thành phần thiết yếu và ít chi tiết trong nền web hiện đại – hãy nghĩ đến lưới điểm tinh tế phía sau trang Notion, các chấm bi trên mục chính hay kết cấu giống hạt trên một thẻ. Bộ tạo này xây dựng một tệp SVG duy nhất dựa trên định nghĩa nội tuyến <pattern>, giúp tệp luôn nhỏ gọn (thường dưới 500 byte) và hiển thị đều đặn ở mọi kích thước. Bạn có thể tự điều chỉnh diện tích khung vẽ, khoảng cách giữa các điểm, bán kính, màu điểm và nền.

Cách tạo họa tiết chấm

  1. 1

    Cài đặt khung vẽ

    Chiều rộng và chiều cao tính bằng điểm ảnh. Đối với nền trong CSS, kích thước có thể được giữ nhỏ (ví dụ: 800×600) và được sắp xếp thành các ô nhỏ.

  2. 2

    Chọn khoảng cách

    Khoảng cách giữa các tâm của các điểm liền kề: khoảng 20–40px trông gọn gàng; khoảng 10px lại gây cảm giác rối mắt.

  3. 3

    Thiết lập bán kính điểm

    1–3px cho kết cấu tinh tế; 4–8px cho các chấm bi được bố trí chủ đích.

  4. 4

    Chọn màu sắc

    Lấp đầy điểm (phần nền trước) và nền màn hình. Thiết lập nền thành `transparent` để tạo mẫu chồng lớp chính xác.

  5. 5

    Sao chép file SVG

    Dán vào đoạn HTML của bạn hoặc sử dụng với mã `background-image: url("data:image/svg+xml,...")` trong CSS.

Cách định nghĩa mẫu

Máy phát điện tạo ra phần tử <pattern> bên trong <defs> và lấp đầy toàn bộ khung hiển thị của <rect> bằng phần tử fill="url(#dots)".

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" cố định kích thước ô thành đơn vị điểm ảnh, do đó việc phóng đại file SVG gốc sẽ không làm méo các điểm.

Bảng hướng dẫn điều chỉnh mẫu

Diện mạo Khoảng cách Bán kính Độ tương phản
Thì thầm (khó quan sát rõ) 30–40 1–1,5 Độ mờ 5–10%
Nền tinh tế 25–30 2 Độ mờ 15–20%
Hình mẫu chấm tròn chân thực 20 2–3 Màu đầy đủ
Các chấm được bố trí chủ đích 40–60 8–15 Màu đầy đủ
Hiệu ứng bán sắc 10 1 Lấp đầy theo gradient

Sử dụng nó làm nền trong CSS

Mã hóa SVG thành một địa chỉ URL dữ liệu và áp dụng nó lên bất kỳ phần tử nào:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Việc sắp xếp các ô hình ảnh trong tệp SVG bằng CSS nhanh hơn nhiều so với việc sử dụng tệp PNG, trình duyệt sẽ chuyển đổi dữ liệu thành dạng raster ở kích thước hiển thị cuối cùng, nhờ đó hình ảnh luôn giữ độ sắc nét trên mọi thiết bị hiển thị (1x, 2x, 3x).

Khi các điểm ảnh hưởng đến khả năng đọc

Mô hình chấm đặt ngay sau phần văn bản chính có thể tạo hiệu ứng moiré lấp lánh trên các dòng chữ nhỏ. Nếu bạn buộc phải đặt văn bản phía trên, hãy áp dụng một trong hai phương án sau:

  • Tăng khoảng cách lên trên 40px để các chấm nằm giữa các dòng, hoặc
  • Giảm độ mờ của mẫu xuống dưới 10%, hoặc
  • Đặt văn bản vào một tấm thẻ liền khối đặt phía trên mẫu.

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

Thiết lập màu nền thành transparent; lúc này, các điểm sẽ là lớp tô duy nhất. Đặt tệp SVG lên trên bất kỳ màu sắc hoặc hình ảnh nào bạn muốn hiển thị bên trong.

Không phải với bộ tạo này – nó chỉ tạo ra một lưới vuông. Để sử dụng bố cục lục giác, bạn cần một ô mẫu có chiều cao bằng √3 lần chiều rộng, và mỗi ô chứa hai hình tròn được lệch nhau một nửa vị trí so với nhau. Hãy cân nhắc sử dụng công cụ xây dựng đường trong SVG hoặc một bộ tạo hình lục giác chuyên dụng.

Tập tin SVG bản thân nó luôn có hình ảnh rõ nét ở mọi kích thước; tuy nhiên, nếu bạn chuyển đổi nó sang định dạng raster với độ phân giải thấp hơn kích thước của từng ô mẫu thì hiện tượng aliasing sẽ xảy ra. Hãy xuất tệp với độ phân giải bằng 2 hoặc 3 lần kích thước hiển thị mong muốn.

Thay thế giá trị fill="#hex" trong vòng tròn bằng fill="url(#gradient-id)" và thêm định nghĩa của <linearGradient> bên trong cùng giá trị <defs>. Mỗi điểm sẽ hiển thị với độ dốc màu này – điều này có thể tốn nhiều tài nguyên nếu khung hình chứa hàng nghìn điểm.

Trình chỉnh sửa tiêu chuẩn gửi vùng vẽ, khoảng cách, bán kính và màu đến máy chủ để hiển thị bản xem trước. Trong luồng có hướng dẫn, các cài đặt này cũng xuất hiện trong URL trang. Đừng nhập thông tin nhạy cảm; công cụ không lưu dự án mẫu để dùng lại.

Công cụ liên quan

Bộ chọn màu Material Design

Duyệt bảng màu Material Design. Sao chép bất kỳ sắc độ nào (từ 50 đến A700) dưới dạng HEX, RGB hoặc HSL chỉ với một thao tác chạm.

Trình tạo giấy kẻ ngang

Tạo giấy kẻ ngang in được miễn phí. Chọn kẻ college, rộng hoặc hẹp, đặt khoảng cách dòng theo mm, khổ giấy và một đường lề, rồi in hoặc tải xuống tệp SVG.

Trình tạo giấy kẻ ô

Tạo giấy kẻ ô để in trực tuyến: chọn lưới ô vuông hoặc chấm, đặt khoảng cách theo mm, chọn A4 hoặc Letter và màu nét tùy chỉnh, rồi in hoặc tải xuống tệp SVG sắc nét.

Công cụ tạo mẫu thêu chữ thập

Chuyển JPEG, PNG hoặc WebP thành sơ đồ thêu chữ thập để in với 10–150 mũi, 2–40 màu tùy chỉnh, ký hiệu, số đếm chính xác và kích thước vải.

Trình thay đổi kích thước ảnh hàng loạt

Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.

Trình chuyển đổi ảnh hàng loạt

Chuyển đổi cục bộ tối đa 20 ảnh mà trình duyệt đọc được sang JPG, PNG hoặc WebP, rồi tải từng tệp hoặc một tệp ZIP.

Công cụ này có phiên bản bằng các ngôn ngữ khác