Codificador de URL SVG

O que é SVG?

SVG significa Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). É usado para definir gráficos vetoriais para a Web no formato XML. Cada elemento e atributo nos arquivos SVG pode ser animado.

• Wikipedia - SVG

Como usar SVG em CSS?

Para usar código SVG diretamente em CSS, você precisará codificá-lo antes. Use esta ferramenta SVG URL Encoder ou a função JavaScript encodeURIComponent(). Um URI de dados SVG codificado pode ser usado com as propriedades CSS background-image, border-image e mask por meio da função url(). Exemplo: 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");

Como alterar a cor de um SVG em CSS?

Para alterar a cor de um SVG, você pode combinar as propriedades CSS mask e background-color. O exemplo abaixo mudará a cor de um SVG para azul. Exemplo: 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;

O que é uma URL?

Uma URL (Uniform Resource Locator) é o endereço de um recurso único na internet. É um dos principais mecanismos usados pelos navegadores para recuperar recursos, como páginas HTML, documentos CSS, imagens e assim por diante.

• MDN - What is a URL?

Como codificar uma URL?

Para codificar uma URL, você pode usar a função encodeURIComponent(), que codifica um URI substituindo cada ocorrência de certos caracteres por uma, duas, três ou quatro sequências de escape que representam a codificação UTF-8 do caractere. Comparado ao encodeURI(), esta função codifica mais caracteres, incluindo os que fazem parte da sintaxe URI.

• MDN - encodeURIComponent()

Como decodificar uma URL?

Para decodificar uma URL, você pode usar a função decodeURIComponent(), que decodifica o URI tratando cada sequência de escape na forma %XX como uma unidade de código UTF-8 (um byte). Em UTF-8, o número de bits 1 iniciais no primeiro byte, que pode ser 0 (para caracteres ASCII de 1 byte), 2, 3 ou 4, indica o número de bytes no caractere.

• MDN - decodeURIComponent()