Aprende a convertir un nodo SVG renderizado en el navegador a su representación base64 con JavaScript.

Aunque por lo general, no deberíamos confiar en este tipo de lógica para las cosas de producción, porque siempre hay una mejor alternativa para evitar que hagas esto, a veces esto no depende de ti sino de cosas de terceros. Ya sea que esté eliminando contenido de la web o creando un script de automatización que modifique alguna imagen vectorizada, conocer este simple truco de cómo convertir un nodo SVG renderizado en el navegador a una imagen en formato base64 no le perjudicará.

Considere el siguiente ejemplo de un elemento SVG renderizado en el DOM del navegador, este elemento tiene una identificación que lo hace parte del dom, a saber  mySvgElement:

<svg id="mySvgElement" xmlns="http://www.w3.org/2000/svg" height="179.2" width="179.2">
	<g>
		<path transform="scale(0.1,-0.1) translate(0,-1536)" d="M1536 224v704q0 40 -28 68t-68 28h-704q-40 0 -68 28t-28 68v64q0 40 -28 68t-68 28h-320q-40 0 -68 -28t-28 -68v-960q0 -40 28 -68t68 -28h1216q40 0 68 28t28 68zM1664 928v-704q0 -92 -66 -158t-158 -66h-1216q-92 0 -158 66t-66 158v960q0 92 66 158t158 66h320 q92 0 158 -66t66 -158v-32h672q92 0 158 -66t66 -158z" style="&#10;    fill: #03a9f4;&#10;"/>
	</g>
</svg>

Representado en el navegador, mostrará una imagen como esta:

Icono de carpeta SVG

Para convertir este elemento a su representación base64, simplemente necesitaríamos el elemento DOM y la ayuda de la clase XMLSerializer. La interfaz XMLSerializer proporciona el método serializeToString () para construir una cadena XML que representa un árbol DOM. En nuestro caso, con el elemento mencionado simplemente haríamos:

// 1. Mantenga una referencia DOM al elemento SVG
var SVGDomElement = document.getElementById("mySvgElement");

// 2. Serializar elemento en SVG simple
var serializedSVG = new XMLSerializer().serializeToString(SVGDomElement);

// 3. convertir svg a base64
var base64Data = window.btoa(serializedSVG);
// La cadena generada será algo como:
// PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdm.........

// Si desea mostrarlo en el navegador a través de URL:
console.log("data:image/svg+xml;base64," + result);

Tenga en cuenta que la cadena serializada generada por XMLSerializer devolverá el SVG simple, por lo que codificado en base64, obtendríamos los datos simples de base64:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTc5LjIiIHdpZHRoPSIxNzkuMiI+Cgk8Zz4KCQk8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAuMSwtMC4xKSB0cmFuc2xhdGUoMCwtMTUzNikiIGQ9Ik0xNTM2IDIyNHY3MDRxMCA0MCAtMjggNjh0LTY4IDI4aC03MDRxLTQwIDAgLTY4IDI4dC0yOCA2OHY2NHEwIDQwIC0yOCA2OHQtNjggMjhoLTMyMHEtNDAgMCAtNjggLTI4dC0yOCAtNjh2LTk2MHEwIC00MCAyOCAtNjh0NjggLTI4aDEyMTZxNDAgMCA2OCAyOHQyOCA2OHpNMTY2NCA5Mjh2LTcwNHEwIC05MiAtNjYgLTE1OHQtMTU4IC02NmgtMTIxNnEtOTIgMCAtMTU4IDY2dC02NiAxNTh2OTYwcTAgOTIgNjYgMTU4dDE1OCA2NmgzMjAgcTkyIDAgMTU4IC02NnQ2NiAtMTU4di0zMmg2NzJxOTIgMCAxNTggLTY2dDY2IC0xNTh6IiBzdHlsZT0iJiMxMDsgICAgZmlsbDogIzAzYTlmNDsmIzEwOyIvPgoJPC9nPgo8L3N2Zz4=

Si desea mostrarlo en el navegador usando la representación de URL de datos, deberá agregar como prefijo a los datos generados "data: image / svg + xml; base64,":

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTc5LjIiIHdpZHRoPSIxNzkuMiI+Cgk8Zz4KCQk8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAuMSwtMC4xKSB0cmFuc2xhdGUoMCwtMTUzNikiIGQ9Ik0xNTM2IDIyNHY3MDRxMCA0MCAtMjggNjh0LTY4IDI4aC03MDRxLTQwIDAgLTY4IDI4dC0yOCA2OHY2NHEwIDQwIC0yOCA2OHQtNjggMjhoLTMyMHEtNDAgMCAtNjggLTI4dC0yOCAtNjh2LTk2MHEwIC00MCAyOCAtNjh0NjggLTI4aDEyMTZxNDAgMCA2OCAyOHQyOCA2OHpNMTY2NCA5Mjh2LTcwNHEwIC05MiAtNjYgLTE1OHQtMTU4IC02NmgtMTIxNnEtOTIgMCAtMTU4IDY2dC02NiAxNTh2OTYwcTAgOTIgNjYgMTU4dDE1OCA2NmgzMjAgcTkyIDAgMTU4IC02NnQ2NiAtMTU4di0zMmg2NzJxOTIgMCAxNTggLTY2dDY2IC0xNTh6IiBzdHlsZT0iJiMxMDsgICAgZmlsbDogIzAzYTlmNDsmIzEwOyIvPgoJPC9nPgo8L3N2Zz4=

Que debería producir ahora:

Folder Icon SVG

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores