Espacios de nombre en SVG

facebook-svg gplus-svg twitter-svg

En documentos XML ( como ya sabemos, SVG se basa en XML ) los elementos y sus atributos pertenecen a espacios de nombres ( namespaces ), con el objetivo de prevenir conflictos. El espacio de nombres puede ser definido utilizando el atributo xmlns.

En el siguiente ejemplo el atributo xmlns define el espacio de nombres.

xmlns = "http://www.w3.org/2000/svg"

Ulteriormente utilizamos el espacio de nombres para definir el prefijo de espacios de nombre ( namespace prefix ):

xmlns:xlink = "http://www.w3.org/1999/xlink"

Ahora podemos utilizar el prefijo xlink para evitar conflictos de nombre ya que el atributo href y el elemento a pueden ser encontrados también en el HTML.

<a xlink:href ="http://w3.unpocodetodo.info/svg/introduccion.php">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink" 
                   width="106px" height="122px" 
                   viewBox="41 54 106 122">
              
  <a xlink:href="http://w3.unpocodetodo.info/svg/introduccion.php ">
     <text x="125" y="30" text-anchor="middle">
         SVG - una introducción
     </text>
  </a>
</svg>

Espacios de nombres y javascript

En HTML podemos crear nuevos elementos de manera dinámica utilizando javascript. Y todo el mundo sabe como hacerlo:

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

En SVG esto es un poco diferente ya que tenemos que utilizar espacios de nombres. Para cear un nuevo elemento SVG utilizamos el método createElementNS.

  // el enlace utilizado para el espacio de nombre
  var SVG_NS = 'http://www.w3.org/2000/svg';
  // crear un nuevo elemento image
  var imagen = document.createElementNS(SVG_NS, 'image');

Los elementos necesitan atributos y en HTML podemos fácilmente establecer los nuevos atributos de los elementos utilizando javascript:

nuevaImagen.setAttribute("class", "conClase");
nuevaImagen.setAttribute("src", "unaFlor.png");

Y de nuevo: en SVG esto es un poco diferente: hay que utilizar espacios de nombres aunque no es siempre necesario especificarlos. El método a utilizar en esta caso es setAttributeNS.

// el enlace utilizado para xlink - un prefijo de espacio de nombre
var XLink_NS = 'http://www.w3.org/1999/xlink';
image.setAttributeNS(null, 'class', 'conClase');
image.setAttributeNS(XLink_NS, 'xlink:href', unaFlor.png');

Vean un ejemplo que utiliza SVG, javaScript y los métodos createElementNS y setAttributeNS, para crear esta imágen:
Yin y Yang con path