Ultima revisión 29/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 />