Bộ mã hóa URL SVG

SVG là gì?

SVG là viết tắt của Scalable Vector Graphics (Đồ họa vectơ có thể mở rộng). SVG được dùng để định nghĩa đồ họa dạng vectơ cho Web theo định dạng XML. Mọi phần tử và thuộc tính trong file SVG đều có thể được tạo hiệu ứng động.

• Wikipedia - SVG

Cách sử dụng SVG trong CSS?

Để dùng mã SVG trực tiếp trong CSS, bạn cần mã hóa SVG trước. Bạn có thể dùng công cụ SVG URL Encoder này hoặc hàm JavaScript encodeURIComponent(). Một URI dữ liệu SVG đã mã hóa có thể được dùng với các thuộc tính CSS background-image, border-image và mask qua hàm url(). Ví dụ: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

Cách thay đổi màu SVG trong CSS?

Để thay đổi màu của SVG, bạn có thể kết hợp hai thuộc tính CSS là mask và background-color. Ví dụ dưới đây sẽ đổi màu SVG thành màu xanh lam. Ví dụ: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL là gì?

URL (Uniform Resource Locator) là địa chỉ của một tài nguyên duy nhất trên internet. Đây là một trong những cơ chế chính mà trình duyệt dùng để tải về các tài nguyên như trang HTML, tài liệu CSS, hình ảnh, v.v.

• MDN - What is a URL?

Cách mã hóa URL?

Để mã hóa URL, bạn có thể dùng hàm encodeURIComponent(), vốn mã hóa URI bằng cách thay thế từng ký tự đặc biệt bằng một, hai, ba hoặc bốn chuỗi thoát đại diện cho mã hóa UTF-8 của ký tự đó. So với encodeURI(), hàm này mã hóa nhiều ký tự hơn, bao gồm cả những ký tự là một phần của cú pháp URI.

• MDN - encodeURIComponent()

Cách giải mã URL?

Để giải mã URL, bạn có thể dùng hàm decodeURIComponent(), vốn giải mã URI bằng cách xử lý mỗi chuỗi thoát dạng %XX như một đơn vị mã UTF-8 (một byte). Trong UTF-8, số bit 1 đầu tiên ở byte đầu tiên—có thể là 0 (với ký tự ASCII 1 byte), 2, 3 hoặc 4—cho biết số byte trong ký tự đó.

• MDN - decodeURIComponent()