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

Ultima revisión 05/11/2012

SVG Filters: Uso de feImage (Imágenes)

Esta primitiva de filtro se refiere a un gráfico externo al elemento de filtro que es cargado o renderizado y que, finalmente, se convierte en el resultado de la primitiva de filtro.

Puede hacer referencia a una imagen externa o puede ser una referencia interna o externa de otra pieza de SVG. Se produce una imagen similar a la incorporada en el SourceGraphic de la imagen de entrada, excepto que el gráfico proviene de una fuente externa.

Si el xlink: href hace referencia a un recurso de imagen independiente como un archivo JPEG, PNG o SVG, entonces el recurso de imagen se procesa de acuerdo con el comportamiento de los elementos de la "imagen" de lo contrario, el recurso referenciado se hace de acuerdo al comportamiento del uso del elemento. En cualquier caso, el actual sistema de coordenadas depende del valor de primitiveUnits definido en filtro elemento. El procesamiento del atributo preserveAspectRatio en el feImage elemento es idéntica a la de la "imagen" elemento.

Ejemplo: 
<?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 width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- SIN DEFINICIONES NI FILTROS -->
        <!-- IMAGEN ORIGINAL -->
    </defs>
    <image id="feImage_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href='../../img/svg-filters/butterfly_th.jpg' />
</svg>

Los atributos configurables son:

AtributoDefinición
Las coordenadas de posición del elemento.
Son el ancho y alto de la zona dónde se aplicará el filtro de primitiva
Indica que se mantenga la relación de aspecto de la fuente original.
Es la referencia al objeto. Puede ser una url o un enlace interno típico de HTML escrito como una url, por ejemplo, xlink:href="url(#Imagen1)".
Es el nombre identificador. Comportamiento igual al de HTML.
Es el id que al que se podrá hacer referencia tras la ejecución del filtro, como resultado final.

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.