Hoa văn SVG là gì?

Hoa văn vector có thể lặp lại sử dụng phần tử SVG . Có thể dùng làm nền hoặc tô màu.

Khác gì so với hoa văn CSS?

Hoa văn SVG có thể biểu diễn các hình dạng phức tạp hơn và duy trì chất lượng khi phóng to.

Có thể dùng làm nền không?

Có, đặt SVG dưới dạng data URI trong background-image hoặc tham chiếu trực tiếp từ CSS.

Có ảnh hưởng đến hiệu suất không?

Hoa văn SVG dựa trên vector và nhẹ, hiển thị hiệu quả hơn hình ảnh raster.

Dữ liệu của tôi có an toàn không?

Có, tất cả quá trình xử lý được thực hiện trên trình duyệt của bạn.

Tạo Hoa Văn SVG

Tạo hoa văn ô lát SVG có thể lặp lại. Tùy chỉnh loại hoa văn, màu sắc và kích thước, sau đó xuất mã.

Hoa Văn

Kích Thước: 40px

Khoảng Cách: 0px

Góc Xoay: 0°

Màu Sắc

#6366f1

Màu Nền

#ffffff

Xem Trước

Mã SVG

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="custom-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" fill="#ffffff" />
      <circle cx="20" cy="20" r="7" fill="#6366f1" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#custom-pattern)" />
</svg>

Chia sẻ công cụ