Codificador de URL SVG

¿Qué es SVG?

SVG son las siglas de Scalable Vector Graphics (gráficos vectoriales escalables). Se utiliza para definir gráficos vectoriales para la Web en formato XML. Cada elemento y atributo de los archivos SVG puede animarse.

• Wikipedia - SVG

¿Cómo usar SVG en CSS?

Para usar código SVG directamente en CSS, deberás codificarlo antes de utilizarlo. Puedes usar esta herramienta SVG URL Encoder o la función de JavaScript encodeURIComponent(). Un URI de datos SVG codificado puede emplearse con las propiedades CSS background-image, border-image y mask mediante la función url(). Ejemplo: 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ómo cambiar el color de un SVG en CSS?

Para cambiar el color de un SVG, puedes combinar las propiedades CSS mask y background-color. El ejemplo siguiente cambiará el color de un SVG a azul. Ejemplo: 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;

¿Qué es una URL?

Una URL (Uniform Resource Locator) es la dirección de un recurso único en internet. Es uno de los mecanismos clave que utilizan los navegadores para obtener recursos como páginas HTML, documentos CSS, imágenes, etcétera.

• MDN - What is a URL?

¿Cómo codificar una URL?

Para codificar una URL puedes usar la función encodeURIComponent(), que codifica un URI reemplazando cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter. En comparación con encodeURI(), esta función codifica más caracteres, incluidos los que forman parte de la sintaxis URI.

• MDN - encodeURIComponent()

¿Cómo decodificar una URL?

Para decodificar una URL puedes usar la función decodeURIComponent(), que decodifica el URI tratando cada secuencia de escape con la forma %XX como una unidad de código UTF-8 (un byte). En UTF-8, el número de bits 1 iniciales en el primer byte, que puede ser 0 (para caracteres ASCII de 1 byte), 2, 3 o 4, indica el número de bytes del carácter.

• MDN - decodeURIComponent()