Crear elementos SVG con JavaScript

facebook-svg gplus-svg twitter-svg

En HTML podemos crear nuevos elementos de manera dinámica utilizando javascript y el método createElement:


var nuevaImagen = document.createElement('img');

Crear nuevos elementos en SVG es un poco diferente ya que tenemos que utilizar espacios de nombre. Para crear un nuevo elemento SVG utilizamos el método createElementNS donde NS viene de Namespace (espacio de nombre en inglés).

Crear un nuevo elemento <svg>

Para crear un nuevo elemento svg  necesitamos utilizar el espacio de nombre de este: http://www.w3.org/2000/svg. Como que el espacio de nombre no cambia podemos guardarlo en una constante javascript:


const SVG_NS = 'http://www.w3.org/2000/svg';
let svg = document.createElementNS(SVG_NS, 'svg');

A continuación podemos establecer algunos atributos del elemento SVG como por ejemplo viewBox o width y hight. ¡OJO! viewBox va en camelCase.


svg.setAttributeNS(null, "viewBox", "0 0 200 100");

al final podemos anexar el nuevo elemento SVG al DOM:


divPadre.appendChild(svg);

Crear un nuevo elemento <symbol>

Un elemento <symbol> se utiliza para agrupar elementos SVG con el propósito de reutilizarlos más tarde. Para crear un elemento <symbol> utilizamos como hasta ahora, el espacio de nombre de SVG


// crea un nuevo elemento symbol
let symbol = document.createElementNS(SVG_NS, 'symbol');
// lo agrega al DOM
svg.appendChild(symbol);
// crea un elemento path
let trazado = document.createElementNS(SVG_NS, 'path');
trazado.setAttributeNS(null, "d", "M25,25 L175,75");
trazado.setAttributeNS(null,"id","trazado");
// lo agrega al symbol que hemos creado anteriormente.
symbol.appendChild(trazado);

Crear un nuevo elemento <use>

Crear un nuevo elemento <use> con JavaScript es un poco más complicado ya que necesitamos otro espacio de nombre para XML Linking Language (XLink): http://www.w3.org/1999/xlink.

Exactamente como antes podemos guardar el espacio de nombre en una constante JavaScript:


const SVG_XLINK = "http://www.w3.org/1999/xlink";
// crea un nuevo elemento use utilizando el espacio de nombre para svg
let use = document.createElementNS(SVG_NS, 'use');
// establece el valor del atributo href utilizando el espacio de nombre 
// para XML Linking Language (XLink):
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#trazado');
// agrega el nuevo elemento use al svg
svg.appendChild(use);

Vea todo esto en Codepen

See the Pen Crear elementos svg, symbol, y use con JavaScript******* by Gabi (@enxaneta) on CodePen.