Công cụ tạo họa tiết SVG là gì?
Công cụ tạo họa tiết SVG là công cụ tạo nền lặp từ các hình vector theo những thông số được chọn trước. Thay vì vẽ từng chấm hoặc từng đường trên toàn bộ vùng nền, công cụ mô tả một ô mẫu rồi lặp ô đó theo chiều ngang và chiều dọc. Cách này phù hợp với nhu cầu tạo nền trang web, nền khối nội dung hoặc bề mặt trang trí có nhịp hình học đều đặn.
SVG Pattern Generator có sáu mẫu có sẵn: chấm bi, sọc dọc, sọc chéo, caro, dấu thập và gợn sóng. Người dùng có thể thay đổi màu nền, màu họa tiết, cạnh ô lặp và thông số độ dày hoặc cỡ nét. Bản xem trước được tạo lại khi những lựa chọn này thay đổi, giúp quan sát tác động của từng thông số.
Kết quả có thể lấy dưới dạng khai báo CSS hình nền, nội dung SVG để sao chép, tệp SVG tải xuống hoặc tệp PNG tải xuống (512 / 1024 / 2048 px). Đây là các cách nhận cùng một thiết kế hiện tại, không phải ba chế độ tạo hình khác nhau.
Công cụ này là bộ tạo nền theo tham số, không phải trình vẽ vector tổng quát. Mã không thể hiện khả năng kéo từng hình, dựng mẫu từ lời nhắc hay sinh ảnh bằng AI. Kiến thức chung về tính chất vector của SVG cũng không đồng nghĩa công cụ có thể xuất mọi định dạng ảnh hoặc mọi kích thước theo yêu cầu.
Các thuật ngữ cần hiểu khi tạo nền SVG
SVG
SVG là định dạng đồ họa mô tả hình bằng tọa độ, đường cong và các phần tử vector thay vì lưu toàn bộ hình thành một lưới điểm ảnh. Với công cụ này, những mô tả đó tạo nên chấm, dải sọc, ô caro hoặc nét sóng. SVG thường giữ đường nét rõ khi được hiển thị ở nhiều kích thước, nhưng đây là tính chất chung của định dạng. Không nên hiểu rằng công cụ vì thế có sẵn chức năng xuất PNG, đặt kích thước ảnh tùy ý hoặc bảo đảm hiển thị giống nhau trong mọi ứng dụng.
Ô lặp
Ô lặp là vùng mẫu cơ sở được nhân theo hai chiều để phủ một vùng lớn hơn. Ở đây, ô luôn là hình vuông và cạnh ô được xác định bằng Scale. Cần phân biệt ba đại lượng: cạnh ô, khoảng trống giữa các hình và kích thước toàn bộ vùng nền. Ví dụ, ô chấm bi rộng 40 px không có nghĩa khoảng trống giữa hai chấm là 40 px, vì chấm cũng chiếm diện tích. Nó cũng không có nghĩa ảnh đầu ra chỉ rộng 40 px.
Fill và stroke
Fill là phần màu tô bên trong một hình, còn stroke là nét chạy theo đường hoặc biên hình. Chấm bi, sọc, caro và dấu thập trong công cụ được dựng bằng hình tô màu; gợn sóng dùng nét của đường cong. Sự khác biệt này giải thích vì sao cùng một thanh điều chỉnh nhưng tác động không đồng nhất. Với chấm bi, giá trị cỡ nét trở thành bán kính; với sóng, nó là bề rộng nét. Không nên coi mọi mẫu đều có một đường viền được tăng độ dày.
Data URL
Data URL là cách đặt nội dung tài nguyên trực tiếp trong một chuỗi URL, thay vì tham chiếu đến tệp ảnh riêng. Kết quả CSS của công cụ chứa toàn bộ SVG theo cách này. Một số ký tự được đổi sang dạng mã hóa URL để không gây nhầm lẫn với cú pháp bao quanh. Đây là mã hóa biểu diễn, không phải mã hóa bảo mật: nội dung hình không trở thành bí mật. Data URL cũng không phải địa chỉ tải ảnh từ một máy chủ bên ngoài.
Đường cong Bézier
Đường cong Bézier được xác định bằng điểm đầu, điểm cuối và các điểm điều khiển định hướng độ uốn. Mẫu gợn sóng dùng một đường cong Bézier bậc ba, với các điểm được tính theo cạnh ô lặp. Khi thay Scale, khung hình học của đường cong thay đổi theo; khi thay độ dày, bề rộng nét thay đổi. Điểm dễ nhầm là các điểm điều khiển không nhất thiết nằm trên đường cong, và công cụ không cung cấp thao tác kéo chỉnh riêng từng điểm này.
Đầu vào tùy chỉnh và các dạng kết quả
Thông số có thể thay đổi
Các đầu vào của công cụ tập trung vào mẫu, màu sắc và hình học của ô lặp. Bảng dưới đây thể hiện phạm vi có thể xác nhận từ giao diện và logic tạo hình của công cụ.
| Đầu vào | Phạm vi hoặc lựa chọn | Mặc định |
|---|---|---|
| Loại họa tiết | Chấm bi, sọc dọc, sọc chéo, caro, dấu thập, gợn sóng | Chấm bi |
| Màu nền | Chọn bằng ô màu hoặc nhập mã HEX; có chế độ Trong suốt | Gần trắng, #faf9f6 |
| Màu họa tiết | Chọn bằng ô màu hoặc nhập mã HEX | Xanh nhạt, #8fb8ed |
| Scale | 10–100 px, xác định cạnh ô vuông | 40 px |
| Độ dày / Cỡ nét | 1–50 px, tác động tùy mẫu; tự giới hạn ở cạnh ô | 8 px |
| Độ đậm của họa tiết | 10–100%, trong mục Tùy chọn nâng cao | 100% |
| Cỡ ảnh PNG khi tải | 512 / 1024 / 2048 px, trong mục Tùy chọn nâng cao | 1024 px |
Scale không đặt chiều rộng hoặc chiều cao tổng thể của ảnh. Thông số độ dày là bán kính đối với chấm bi, bề rộng dải đối với sọc, độ dày thanh đối với dấu thập và bề rộng nét đối với sóng. Riêng caro không sử dụng thông số này. Độ dày được giới hạn ở cạnh ô: nếu kéo quá Scale, công cụ tự dùng đúng cạnh ô và hiển thị ghi chú giới hạn (riêng caro vốn không dùng độ dày nên không bị ảnh hưởng).
Hiểu đúng kết quả CSS và SVG
Bản xem trước sử dụng SVG làm hình nền CSS. Kết quả CSS để sao chép chỉ là một khai báo background-image chứa dữ liệu SVG, không phải bộ định dạng hoàn chỉnh cho một khối trang. Kích thước phần tử, khoảng đệm và bố cục vẫn do ngữ cảnh sử dụng quyết định.
Nội dung SVG sao chép được bổ sung ngắt dòng tại một số vị trí; tệp SVG tải xuống chứa bản mô tả hình hiện tại. Cả hai giữ cùng hình học và màu sắc. Tệp SVG tải xuống đặt chiều rộng và chiều cao 512 px kèm viewBox 0 0 512 512, nên vùng hiển thị đã xác định rõ. Vì vậy, cần kiểm tra cách ứng dụng tiếp nhận xác định vùng hiển thị, thay vì coi cạnh ô lặp là kích thước của cả tệp.
Quy tắc tạo và lặp sáu loại họa tiết
Chấm bi, sọc dọc và sọc chéo
Nguyên lý chung là tạo một ô vuông rồi dùng ô đó phủ lên một lớp màu nền. Chấm bi đặt tâm ở chính giữa ô: tọa độ theo mỗi chiều bằng một nửa cạnh ô. Giá trị độ dày được dùng làm bán kính, nên đường kính chấm bằng hai lần giá trị này. Khi bán kính tăng mà cạnh ô giữ nguyên, phần nền trống giữa các chấm giảm.
Sọc dọc dùng một hình chữ nhật nằm ở mép trái ô, rộng bằng độ dày và cao bằng cạnh ô. Khi lặp, hình tạo các dải dọc theo chu kỳ ngang của ô. Sọc chéo cũng bắt đầu từ hình chữ nhật, nhưng chiều cao bằng hai lần cạnh ô và được xoay 45° quanh gốc tọa độ. Công cụ không có điều chỉnh góc riêng. Cách dựng này không đủ căn cứ để hứa rằng dải chéo luôn nối liền hoàn hảo qua mọi ranh giới ô.
Caro và dấu thập
Caro gồm hai hình vuông màu họa tiết ở góc trên trái và góc dưới phải. Mỗi hình có cạnh bằng nửa cạnh ô lặp; hai phần còn lại để lộ màu nền. Công thức này không dùng độ dày, nên thay cỡ nét không làm đổi mẫu.
Dấu thập ghép một thanh ngang và một thanh dọc. Cả hai chạy hết chiều dài ô, có bề dày theo lựa chọn và được căn giữa theo chiều còn lại. Vì thanh chạm tới mép ô, việc lặp có thể tạo cảm giác một hệ lưới nối nhau, thay vì nhiều dấu cộng nhỏ đứng riêng.
Gợn sóng và cách tạo kết quả CSS
Sóng đi từ giữa cạnh trái đến giữa cạnh phải. Hai điểm điều khiển nằm ở vị trí một phần tư cạnh ô phía trên và ba phần tư cạnh ô phía dưới. Đường không có phần tô, dùng nét màu họa tiết với đầu nét bo tròn.
Giá trị thanh trượt được đọc thành số nguyên, nhưng các phép chia hình học vẫn có thể tạo tọa độ thập phân; không có bước làm tròn thêm. Sau khi dựng hình, công cụ thu gọn khoảng trắng trong SVG rồi mã hóa ký tự để đưa vào data URL của CSS. Việc này thay cách biểu diễn chuỗi, không thêm hiệu ứng hay bảo vệ nội dung hình.
Ví dụ đọc thông số và dự đoán kết quả
Cùng thông số nhưng chấm bi và sọc khác nhau
Các tình huống dưới đây là ví dụ giả định tính theo công thức trong mã. Đơn vị px được hiểu trong hệ tọa độ dùng cho nền; cách hiển thị sau khi áp dụng thêm biến đổi hoặc nhập vào phần mềm khác cần kiểm tra riêng.
Giả sử chọn chấm bi, Scale 40 px và cỡ nét 8 px, giữ hai màu mặc định. Tâm chấm nằm tại 40 ÷ 2 = 20 px ở cả hai chiều. Bán kính là 8 px nên đường kính bằng 16 px. Hai tâm kề nhau theo hàng hoặc cột cách nhau 40 px; khoảng trống giữa hai biên chấm là 40 − 16 = 24 px. Đây không phải khoảng cách đo theo đường chéo.
Nếu chuyển sang sọc dọc với cùng thông số, dải màu rộng 8 px và chu kỳ vẫn là 40 px. Phần nền giữa hai dải liên tiếp rộng 40 − 8 = 32 px. Sự khác biệt cho thấy nhãn cỡ nét không thể được diễn giải thành cùng một kích thước hình ở mọi mẫu.
Caro không đổi khi tăng độ dày
Giả sử chọn caro với Scale 41 px và giữ nguyên màu sắc. Mỗi hình vuông màu có cạnh 41 ÷ 2 = 20,5 px. Một hình nằm ở góc trên trái, hình kia ở góc dưới phải của ô. Tọa độ và kích thước nửa đơn vị được giữ nguyên, không bị làm tròn thành 20 hoặc 21 px.
So sánh độ dày 1 px với 50 px sẽ cho cùng hình học caro, bởi thông số này không xuất hiện trong quy tắc dựng mẫu. Muốn thay nhịp caro, cần thay cạnh ô; muốn thay cảm giác thị giác, có thể đổi hai màu.
Dấu thập tạo cấu trúc lưới khi lặp
Giả sử Scale là 40 px và độ dày là 8 px. Vị trí căn giữa mỗi thanh được tính bằng (40 − 8) ÷ 2 = 16 px. Thanh ngang cao 8 px, dài 40 px; thanh dọc rộng 8 px, cao 40 px. Hai thanh giao nhau ở tâm và vươn đến mép ô. Khi lặp, chúng tiếp nối thành cấu trúc giống lưới, không phải các dấu cộng có khoảng nền bao quanh từng dấu.
Ứng dụng họa tiết SVG trong thiết kế nền
Chọn nền theo mục đích sử dụng
Nền lặp có thể dùng cho khối giới thiệu, phần mở đầu trang, thiệp hoặc một vùng trang trí trong bố cục. Đây là những gợi ý ứng dụng thiết kế, không phải chức năng tích hợp với hệ thống xuất bản hay phần mềm làm thiệp. Chấm bi tạo nhịp điểm, sọc tạo hướng thị giác, còn caro hoặc dấu thập tạo cấu trúc hình học rõ hơn.
Khi muốn phủ một vùng rộng mà vẫn giữ nhịp đều, ô lặp giúp mô tả thiết kế mà không cần bố trí thủ công từng hình. Tuy nhiên, không nên kết luận SVG luôn nhẹ hơn mọi loại ảnh; kích thước tài nguyên còn phụ thuộc độ phức tạp và cách biểu diễn.
Khai báo CSS phù hợp khi đặt nền cho phần tử trang web. Tệp SVG riêng phù hợp khi cần giữ họa tiết thành tài nguyên để đưa vào quy trình thiết kế. Nếu sử dụng ngoài trình duyệt, nên kiểm tra kích thước vùng hiển thị và cách lặp trước khi hoàn thiện sản phẩm.
Giữ nội dung dễ đọc trên nền có họa tiết
Về nguyên tắc thiết kế chung, nền có chữ phía trên nên giữ độ tương phản giữa họa tiết và màu nền vừa phải, tránh cạnh tranh với nội dung chính. Ô nhỏ và nét lớn có thể tạo cảm giác dày đặc; ô lớn và nét nhỏ thường để lại nhiều khoảng thở hơn. Đây là định hướng quan sát, không phải quy tắc đảm bảo khả năng đọc.
Hãy đánh giá nền cùng tiêu đề, đoạn văn và nút trong bố cục thực tế. Công cụ cho thay hai màu và hình học, nhưng không có chức năng kiểm tra độ tương phản tự động được xác nhận từ mã.
Nên dùng nền SVG lặp hay hình trang trí đơn lẻ?
Nền lặp phù hợp khi muốn tạo một bề mặt có nhịp đều, phủ liên tục trên một vùng. Hình trang trí đơn lẻ thường đóng vai trò điểm nhấn tại một vị trí, chẳng hạn bên cạnh tiêu đề hoặc phía sau một khối minh họa. Một hình đơn lẻ không mặc nhiên lặp theo hai chiều, còn nền lặp không nhất thiết tạo được điểm nhấn có hướng nhìn riêng.
Việc lựa chọn nên dựa trên vai trò của hình trong bố cục. Nếu cần chất liệu nền ổn định khi vùng nội dung dài ra, họa tiết lặp thường phù hợp hơn. Nếu cần dẫn mắt tới một vị trí cụ thể, có thể cân nhắc hướng trang trí khác, chẳng hạn công cụ tạo hình Blob SVG. Đây là một hướng tham khảo, không có nghĩa hai công cụ tự tích hợp với nhau.
Về cách nhận kết quả, CSS chứa data URL gắn dữ liệu hình trực tiếp trong khai báo nền. Tệp SVG riêng giữ tài nguyên độc lập để quản lý và sử dụng trong ngữ cảnh khác. Hai cách này khác nhau về tổ chức tài nguyên, không làm thay đổi bản chất vector của thiết kế.
Không có phương án tối ưu cho mọi trường hợp. Cần cân nhắc bố cục, cách quản lý tài nguyên và môi trường hiển thị. Việc chọn nền lặp hay hình đơn lẻ là quyết định thiết kế; việc chọn CSS hay tệp riêng là quyết định sử dụng đầu ra.
Giới hạn và lưu ý trước khi dùng kết quả
Giới hạn của mẫu và thông số
Công cụ chỉ có sáu mẫu đã nêu. Không có tạo hình bằng AI, mẫu lục giác riêng, chỉnh điểm tự do hoặc xuất JPEG. Vì vậy, các nhu cầu này không nên được suy ra từ tên công cụ hay từ những đặc tính chung của SVG.
Độ dày được giới hạn ở cạnh ô nên hình không còn tràn ô lặp vì kéo quá tay; tuy vậy, khi độ dày gần bằng cạnh ô, hình vẫn có thể trở nên quá đặc và che phần lớn màu nền. Tăng cỡ nét không phải lúc nào cũng tạo một phiên bản tương tự nhưng đậm hơn. Riêng sọc chéo và sóng, cần quan sát chỗ tiếp giáp giữa các ô; chưa có căn cứ bảo đảm độ liền mạch thị giác ở mọi tổ hợp thông số.
Khả năng hiển thị, sao chép và thông tin chưa xác minh
Sao chép ưu tiên Clipboard API; nếu trình duyệt từ chối, công cụ thử cách sao chép dự phòng và luôn hiển thị dòng trạng thái, đồng thời mục “Mã CSS và SVG” cho phép sao chép thủ công. Tệp SVG tải xuống đã có kích thước 512 px và viewBox nên ít phụ thuộc cách ứng dụng tiếp nhận xác định vùng hiển thị, nhưng vẫn nên kiểm tra ở môi trường đích.
Các nhận định hình học trong bài được suy ra từ mã, không phải kết quả kiểm thử trên từng trình duyệt hoặc phần mềm. Dữ liệu hiện có cũng chưa xác nhận chính sách lưu trữ, hoạt động của các thành phần khác trên trang, giấy phép thương mại hay hiệu năng đã đo. Không thể kết luận toàn bộ trang không truyền hoặc không lưu dữ liệu chỉ từ phần logic tạo họa tiết của công cụ.
Câu hỏi thường gặp
Vì sao kéo độ dày nhưng họa tiết caro không thay đổi?
Vì mẫu caro được dựng chỉ từ cạnh ô lặp và màu sắc, không dùng thông số độ dày. Hai hình vuông màu luôn có cạnh bằng một nửa cạnh ô và nằm ở hai góc chéo nhau. Do đó, giữ Scale cùng hai màu rồi kéo độ dày sẽ không đổi hình học. Đây là hành vi phù hợp với quy tắc tạo mẫu, không đủ để kết luận công cụ bị lỗi. Nếu muốn caro lớn hoặc nhỏ hơn, thông số liên quan là Scale.
Chấm bi đặt cỡ nét 8 px có đường kính bao nhiêu?
Đường kính là 16 px trong hệ tọa độ tạo nền, vì giá trị 8 px được dùng làm bán kính chứ không phải đường kính. Kích thước này không phụ thuộc cạnh ô, nhưng khoảng nền giữa các chấm phụ thuộc cả hai thông số. Chẳng hạn, với Scale 40 px, khoảng trống theo hàng hoặc cột là 24 px. Nếu có biến đổi kích thước trong ngữ cảnh hiển thị khác, kích thước quan sát có thể thay đổi; con số 16 px ở đây được suy ra từ hình học SVG.
Scale 40 px có nghĩa là tệp SVG chỉ rộng 40 px không?
Không. Scale 40 px xác định cạnh của ô mẫu, tức chu kỳ lặp ngang và dọc, chứ không đặt kích thước tổng thể cho tệp. SVG đầu ra dùng chiều rộng và chiều cao 100%, nên vùng được phủ còn phụ thuộc cách nó được hiển thị. Một vùng nền lớn có thể chứa nhiều ô 40 px; vùng nhỏ có thể chỉ thấy một phần mẫu. Cần phân biệt chu kỳ họa tiết với kích thước phần tử trang hoặc vùng ảnh mà ứng dụng tiếp nhận tạo ra.
Có thể tạo nền trong suốt bằng công cụ này không?
Có. Chọn “Trong suốt” ở mục “Nền”: công cụ bỏ lớp tô màu nền khỏi SVG và PNG, chỉ giữ họa tiết, đồng thời khung xem trước hiển thị nền caro để phân biệt vùng trong suốt. Lưu ý: chọn màu trắng hay màu giống trang không tương đương với nền trong suốt, vì phần màu đó vẫn là thành phần của hình.
Công cụ có xuất trực tiếp PNG hoặc JPEG không?
Có xuất PNG trực tiếp, chưa có JPEG. Các đầu ra được xác nhận là khai báo CSS chứa SVG, nội dung SVG sao chép, tệp SVG tải xuống và tệp PNG tải xuống với ba cỡ 512, 1024 hoặc 2048 px (mặc định 1024 px). JPEG vẫn chưa có: nếu cần JPEG, hãy chuyển đổi từ tệp PNG hoặc SVG bằng công cụ khác.
Vì sao thao tác sao chép CSS hoặc SVG có thể không thành công?
Thao tác sao chép phụ thuộc hỗ trợ Clipboard API và quyền truy cập bảng nhớ tạm trong trình duyệt. Những điều kiện của môi trường sử dụng có thể khiến yêu cầu không được chấp nhận, nhưng dữ liệu hiện có không đủ để chẩn đoán chắc chắn một trường hợp cụ thể. Công cụ hiển thị dòng trạng thái sau mỗi lần bấm sao chép; nếu Clipboard API bị từ chối, công cụ thử cách sao chép dự phòng, và mục “Mã CSS và SVG” luôn cho phép sao chép thủ công. Vì vậy, nếu không thấy thông báo thành công, hãy sao chép từ mục đó thay vì kết luận họa tiết sai; đồng thời vẫn cần kiểm tra quyền bảng nhớ tạm của môi trường đang dùng.
Vì sao tệp SVG có thể hiển thị khác bản xem trước khi mở trong ứng dụng khác?
Vì bản xem trước và ứng dụng tiếp nhận có thể xác định vùng hiển thị theo những cách khác nhau. Tệp tải xuống đã có kích thước 512 px và viewBox 0 0 512 512, trong khi bản xem trước đặt SVG vào một vùng nền của trang. Đây là các yếu tố cần kiểm tra, không phải nguyên nhân chắc chắn của mọi khác biệt. Mức hỗ trợ SVG và cách ứng dụng nhập tài nguyên cũng chưa được xác minh. Nên đối chiếu kích thước, màu và ranh giới ô lặp trong môi trường sử dụng cuối cùng.
