Cómo insertar contenido en formato SVG desde Javascript, por medio de código. Diversos medios de insertar imágenes SVG de manera dinámica con Javascript.
SVG es un formato estupendo para usar en las páginas web, ya que el contenido es vectorial y por ello no se deforma cuando se amplían o se reducen sus dimensiones de los gráficos. Desde Javascript podemos manipular el DOM para añadir dinámicamente contenido SVG a la página en el lugar donde lo necesitemos, lo que nos puede ayudar a crear interfaces de usuario que se generan en tiempo de ejecución, en las que incorporar gráficos vectoriales de elevada calidad.
En este artículo no vamos a hablar mucho del formato vectorial en sí, sino como usarlo desde Javascript, mediante diversos enfoques. Si quieres más información sobre este formato consulta la página de SVG.
Para aprender a insertar contenido SVG desde Javascripttenemos distintos enfoques.
Cómo podrías obtener el SVG
Para insertar un SVG en una página web mediante JavaScript, primero debes tener la imagen en sí. Esta imagen la podrías adquirir de dos formas:
- Porque tienes un archivo SVG (un archivo de texto con extensión
.svg). - Porque tienes el código de SVG
En realidad estas dos formas son muy similares, porque los archivos SVG lo que contienen es el código SVG que se necesita para pintar los gráficos. Por ello, lo cierto es que podríamos usar por un mecanismo u otro indistintamente, según nos interese.
A partir de situación u otra puede cambiar un poco el código con el que vamos a generar dinámicamente el contenido svg. La diferencia fundamental es tener la imagen en un archivo aparte o hacer un svg inline. Sobre las ventajas de una u otra posiblidad iremos hablando en el artículo. Pero si tienes un archivo .svg necesitarás el "asset" en una carpeta de tu proyecto. Si tienes el código del SVH lo podrías insertar "inline", lo que te ahorraría tener un archivo extra en tu proyecto.
En este artículo vamos a ver cómo insertar el SVG de ambas maneras.
1. Insertar un SVG desde un archivo:
Este es el caso que podría ser más sencillo, ya que simplemente crearemos dinámicamente un elemento imagen (<img>) con el src dirigido al archivo donde tienes el SVG que deseas insertar.
Supongamos que tienes un archivo llamado mi_grafica.svg. En ese caso podrías usar la etiqueta <img> para insertarlo:
<img src="mi_grafica.svg">
El asunto es que queremos que esta imagen se genere dinámicamente mediante Javascript, en cuyo caso lo podemos conseguir con este código:
let img = document.createElement("img");
img.src = "ruta/del/archivo/mi_grafica.svg";
img.alt = "Descripción de la imagen si la deseas indicar…";
document.body.appendChild(img);
El código anterior insertará el SVG al final del body del documento, pero nosotros podemos insertarlo en cualquier lugar. Para cambiar 'body' por cualquier otro elemento en el que quieras insertarlo puedes acceder al elemento que quieras e insertarlo allí:
document.getElementById('elboton').appendChild(img);
Ejemplo completo de inserción de un SVG desde un archivo con Javascript
Te dejamos el código completo de una página que hace este trabajo de insertar un SVG mediante Javascript, usando un archivo aparte .svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colocar svg en un botón dinámicamente</title>
<style>
#elboton {
display: flex;
align-items: center;
border: none;
padding: 0.75rem 1.3rem;
background-color: aquamarine;
border-radius: 2rem;
font-size: 1.125rem;
text-transform: uppercase;
}
</style>
</head>
<body>
<button id="elboton">Seguir</button>
<script>
let img = document.createElement("img");
img.src = "images/flecha.svg";
img.style = "margin-right: 0.6rem; width: 24px; height: 24px;"
document.getElementById('elboton').prepend(img);
</script>
</body>
</html>
Hay dos comentarios que querría hacer:
- En este caso he usado
prepend()en vez deappendChild(). La diferencia es queprependinserta al principio del contenido del elemento mientras queappendChildinserta al final del elemento. - Este ejemplo no me gusta del todo porque podrías simplemente insertar ese svg mediante CSS, por ejemplo como un fondo para el botón. Podría realmente ser necesario hacer esto con Javascript si se requiere un dinamismo mayor, como por ejemplo que el svg a insertar dependa del estado de la página, pudiendo cambiar ese estado con el tiempo, o que el SVG dependa de lo que haya escrito dentro del botón. Podría también ocurrir que este botón lo necesites generar dinámicamente también dentro de una interfaz, en tiempo de ejecución, por cualquier motivo. En fin, que si no es necesario usar Javascript para añadir dinamismo no veo muy práctico el ejemplo anterior.
2. Insertar código SVG inline con Javascript:
Ahora queremos ver un segundo mecanismo que podría ser útil cuando tienes el código SVG y lo quieres insertar en la página "inline".
Como "inline" nos referimos a que el código no viene de un archivo aparte, sino que está escrito directamente en el código HTML o en el código Javascript en este caso. Esto lo podrías querer por ejemplo para evitar el trasiego de un archivo externo, como dependencia para que tu script funcione. Puede que te interese que el código Javascript se pueda distribuir y funcionar directamente, sin tener que decirle a las personas que van a usar este código que deberían tener ciertas imágenes en una ruta específica de su web para que funcione el script.
Si tienes el código SVG, puedes insertarlo directamente en tu HTML. Supongamos que tienes el siguiente SVG:
<svg width="25" height="25">
<circle cx="13" cy="13" r="11" stroke="black" stroke-width="2" fill="red" />
</svg>
Para insertarlo en tu página web mediante Javascript podrías tener ese SVG en una variable de cadena:
let svgString = `
<svg width="25" height="25">
<circle cx="13" cy="13" r="11" stroke="black" stroke-width="2" fill="red" />
</svg>
`;
Luego podríamos usar varias técnicas para introducir ese SVG en la página, la más simple creo que sería colocar un contenedor, como un <span> o un <div> y colocar el svg como código HTML contenido para ese contenedor.
let container = document.createElement('span');
container.innerHTML = svgString;
document.getElementById('elboton').prepend(container);
Simplemente hemos creado al vuelo un elemento <span> y luego le hemos colocado dentro el código de nuestro svg. Posteriormente insertamos el span en el lugar de la página donde quieras que se vea.
Crear el elemento svg con DOMParser
Pero existe otra manera un poco más avanzada de conseguir este mismo objetivo, usando una clase llamada DOMParser, que está disponible en todos los navegadores (Incluso el desaparecido IE) y sirve para interpretar una cadena de código HTML o XML y convertirlas en un documento DOM en la memoria de Javascript. Luego podemos hacer con ese pedazo de DOM lo que queramos, como insertarlo en la página.
DOMParseres especialmente útil cuando necesitas procesar cadenas de texto que contienen código XML o HTML y quieres interactuar con ellas como si fueran un documento DOM, con el mismo API del DOM que usas normalmente en Javascript.
Veamos un ejemplo para generar el DOM a partir de una cadena en formato SVG.
let svgString = `
<svg width="25" height="25">
<circle cx="13" cy="13" r="11" stroke="black" stroke-width="2" fill="red" />
</svg>
`;
let parser = new DOMParser();
let doc = parser.parseFromString(svgString, "image/svg+xml");
document.body.appendChild(doc.documentElement);
En el código anterior observarás que llamamos al método parseFromString() del objeto de la clase DOMParser. Ese es el método que permite generar un pedazo de DOM. Le indicamos la cadena que queremos interpretar y luego el formato de la cadena. El valor
"image/svg+xml" indica que el DOM que queremos interpretar es un código en SVG.
Por supuesto, en este ejemplo tendrás que ajustar la ubicación donde quieres que se coloque el SVG. Hemos usado document.body pero podrías insertar el SVG según tus necesidades, tal como hemos aprendido antes.
Esperamos que estas notas te faciliten tu labor si tienes que trabajar con SVG directamente desde Javascript y usar contenido de archivos en formato vectorial en tus interfaces de usuario.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...