Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

Ultima revisión 30/10/2012

Cuándo utilizar el elemento Defs de un gráfico SVG

Una etiqueta que verás contínuamente en SVG es defs. Es crucial que se entienda cuándo usar el elemento defs en SVG ya que es como una alerta que le indica al parser XML que está a punto de definir algo. Al igual que cualquier otra etiqueta XML, defs debe tener una etiqueta de apertura y cierre en el código.

La etiqueta defs es un contenedor que contiene otros elementos. Cuando colocamos otras etiquetas dentro defs, se está creando un conjunto identificable que puede ser usado una vez o varias veces. La etiqueta defs permite, por tanto, establecer una definición que no se mostrará hasta que se requiera. Se podría pensar en defs como un modelo. Se crea un único esquema que se puede utilizar para construir otras estructuras múltiples.

Componentes clave de Defs

La creación de un esquema defs en SVG requiere algunos componentes básicos. Una vez que escribes las sentencias de definición estándar de XML y SVG, defs será la etiqueta siguiente a la raíz SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
        ...
    </defs>
</svg>  

Cuando el parser ve la etiqueta defs sabe que no debe mostrar el código, pero que se deben almacenar los nombres de identificación para su uso futuro.

<defs>
    <linearGradient id="closeWindowBtnLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#192f4d;stop-opacity:0.8"/>
        <stop offset="51%" style="stop-color:#1a437f;stop-opacity:0.8"/>
        <stop offset="100%" style="stop-color:#0e2545;stop-opacity:0.95"/>
    </linearGradient>
</defs>

La etiqueta defs será un tema recurrente a medida que aprendas los procesos más avanzados en SVG. Por ejemplo, cuando tengas que utilizar defs para crear patrones y filtros pero en estos temas entraremos en otro capítulo.

// Patrones
<defs>
    <pattern id="tile" x="0" y="0" width="20%" height="20%" patternUnits="objectBoundingBox">
        <path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke: black; fill: none;"/>
        <path d="M 0 0 h 20 v 20 h -20 z" style="stroke: gray; fill: none;"/>
    </pattern>
</defs>

// Filtros
<filter id="pictureFilter" >
  <feColorMatrix type="matrix" values=".343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0" />
<filter />

<filter id="textFilter" >
  <feMorphology operator="erode" radius="7" />
<filter />

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.