Nền và hoa văn SVG miễn phí | SVG Backgrounds

• Cung cấp 48 mẫu nền và hoa văn SVG nhẹ, người dùng chỉ cần sao chép và dán để áp dụng vào dự án web
• Mỗi thiết kế có thể tự do chỉnh sửa màu sắc, kích thước, chế độ hòa trộn và một số mẫu hỗ trợ hiệu ứng động như xoay, di chuyển
• Tất cả đồ họa đều là thiết kế độc quyền của SVGBackgrounds.com, có thể dùng cho dự án cá nhân và thương mại
• Tuy nhiên, không được đưa vào sản phẩm cạnh tranh và bắt buộc ghi nguồn (Attribution)
• Đây là tài nguyên miễn phí giúp nhà thiết kế web và lập trình viên dễ dàng tạo nền phù hợp với thương hiệu

---

Tổng quan về nền và hoa văn SVG miễn phí

• SVGBackgrounds.com cung cấp bộ nền và hoa văn SVG có thể dùng miễn phí
  • Người dùng có thể điều chỉnh màu sắc, chế độ hòa trộn, kích thước ngay trên trang để tạo nền tùy chỉnh
  • Một số thiết kế bao gồm các chức năng biến đổi trực quan như thu phóng, xoay, di chuyển
• Mỗi nền là thiết kế nguyên bản của SVGBackgrounds.com, có thể áp dụng trực tiếp vào website hoặc giao diện ứng dụng
• Các đồ họa được cung cấp có thể tải xuống ở định dạng mã CSS inline, SVG, PNG

Cách sử dụng

• Người dùng có thể xem cách áp dụng thông qua trang demo hướng dẫn vị trí chèn mã CSS
• Có thể tích hợp nền dễ dàng bằng cách sao chép và dán (Copy and Paste)
• Trang web cung cấp nhiều tùy chọn điều chỉnh như bảng màu, tỷ lệ, chế độ hòa trộn

Giấy phép và điều kiện sử dụng

• Khi sử dụng đồ họa, người dùng phải đồng ý với thỏa thuận cấp phép của SVGBackgrounds.com
  • Có thể dùng cho cả dự án cá nhân và thương mại
  • Không được đưa vào sản phẩm cạnh tranh hoặc bán lại
  • Khi dùng miễn phí, bắt buộc ghi nguồn (Attribution)
• Người đăng ký trả phí có thể nhận được quyền lợi sử dụng không giới hạn và miễn ghi nguồn

Nhà sáng tạo và cộng đồng

• Trang web do Matt vận hành và phát hành tài nguyên miễn phí lẫn trả phí mới mỗi tháng
  • Người dùng có thể đăng ký email để nhận thông báo về nền mới nhất và các bản cập nhật
• Nhà sáng tạo đề xuất nhiều cách ghi nhận công lao như liên kết HTML, chia sẻ mạng xã hội, ủng hộ (Buy me a coffee)

Tài nguyên và công cụ bổ sung

• Ngoài nền, SVGBackgrounds.com còn cung cấp nhiều thành phần đồ họa khác như biểu tượng SVG, minh họa, nút bấm, con trỏ, công cụ chia hình (Shape Divider)
• Với các công cụ như bộ chuyển đổi SVG sang CSS và Shape Divider Generator, nhà phát triển có thể tự chuyển đổi hoặc tạo SVG
• Thông qua các bản phát hành mới nhất và blog, trang web liên tục công bố các bộ thiết kế mới và cập nhật sản phẩm

[GN⁺]

Ý kiến trên Hacker News

• Những hình nền này thật sự rất đẹp. Tuy vậy, mình muốn có thêm <textarea> hiển thị CSS thay vì nút “bấm để sao chép”
  Một số trình duyệt hoặc người dùng chặn quyền truy cập clipboard vì lý do bảo mật, nên khi tính năng sao chép không hoạt động thì không có cách thay thế

  • Góp ý hay đấy. Trước đây tôi từng làm như vậy, và có lẽ không khó để quay lại cách đó hoặc thêm nút hiển thị mã

• Mình đặc biệt thích họa tiết mái nhà màu cam. Nhưng trên Firefox thì một phần không hiển thị đúng — các xoáy màu xanh dương và xanh lá lần lượt chỉ được render thành một hình vuông và một hình lục giác
  Ngoài ra mình cũng tò mò làm sao để dùng những hình nền kiểu này mà không làm phân tán nội dung. Các hoa văn quá chi tiết thường dễ gây rối mắt

  • Cách phổ biến là đặt hình nền cho toàn bộ tài liệu rồi phủ lên trên một overlay có điều chỉnh độ mờ để hiển thị phần nội dung chính. Trên PC toàn màn hình thì khá hợp, nhưng trên di động khó dành đủ không gian để thể hiện hình nền
  • Tôi vừa kiểm tra trên Firefox thì nó có hoạt động, nhưng phải di chuyển thanh trượt phía trên thì hiệu ứng mới lộ ra. Tôi nghĩ đảo ngược hướng hiệu ứng có thể sẽ tốt hơn nên sẽ xem lại
  • Vấn đề “hình vuông xanh dương và lục giác xanh lá” sẽ được giải quyết nếu di chuyển thanh trượt

• Mình thích giao diện chuyển đổi nền và bảng điều chỉnh tham số. Trước đây tôi từng thử nghiệm các pattern sinh thủ tục bằng SVG/canvas/webgl, nhìn cái này lại khiến tôi muốn đóng gói lại cách biểu đạt đó

  • Cảm ơn bạn. Tôi đã thiết kế UI để thao tác đồ họa nhiều lần, và phiên bản này được trau chuốt đặc biệt nhiều. Vì cố gắng hiển thị hình nền rộng nhất có thể nên phát sinh một số ràng buộc, nhưng chính điều đó lại mở ra những lựa chọn sáng tạo. Tôi khá hài lòng với kết quả

• Thông báo “bạn có quyền truy cập nền” đang chiếm 1/3 màn hình trên di động và không có cách đóng lại. Mình thắc mắc tại sao lại vậy

  • Nó chỉ hiện “Bạn có quyền truy cập. Hãy tận hưởng!” nhưng khi tìm hiểu thì có vẻ kiểu quyền truy cập này thường trị giá khoảng 120 USD mỗi năm
  • Góp ý rất hay. Vì cấu trúc hiện tại là khi bấm vào thumbnail thì nút xem trước sẽ đổi thành UI thao tác nền, nên tôi đang nghĩ đến việc thiết kế lại phần này

• Cảm giác hơi lạ khi rê chuột vào thì phần mình muốn xem lại bị làm mờ hoặc bị che đi

  • Tôi đi theo hướng đó vì chỉ cần một cú nhấp là có thể xem toàn bộ, và ở trạng thái hover thì cũng không có nhiều nội dung xem trước để bổ sung. Mục đích chính của hover là làm rõ rằng có thể tương tác được

• Không có cái nào bắt chước hiệu ứng <blink /> cả. Tôi yêu cầu hoàn tiền (đùa thôi)

• Khi bật plugin Dark Reader thì phần xem trước không hoạt động

• Mình đặc biệt thích pattern tam giác. Không biết có lấy cảm hứng từ Rule 30 không

  • Tôi mới nghe về Rule 30 lần đầu. May là link dẫn đến Wikipedia, và khái niệm này khá thú vị, là một ý tưởng giàu cảm hứng. Cảm ơn bạn đã chia sẻ

• Khoảng một năm trước, khi làm lại portfolio, tôi đã tìm thấy trang này và dùng một hình nền cho phần header. Thật sự cảm ơn

  • Rất vui vì nó hữu ích với bạn. Nếu giúp được thì thật tốt

• Những hình nền này thật sự rất đẹp. Mình muốn thử dùng cho game solitaire của mình
  Tuy vậy, trên di động nếu xem trước rồi cuộn thì hình ảnh biến mất, phải tải lại mới hiện lại. Và sẽ hay hơn nếu mỗi pattern có tên riêng

  • Lạ thật. Mình sẽ rất cảm kích nếu bạn gửi thông tin thiết bị hoặc trình duyệt qua form liên hệ. Nhân tiện, mỗi hình nền đều có tên, nhưng trên di động chúng bị ẩn đi vì không gian màn hình quá hẹp