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

Ultima revisión 05/11/2012

SVG Filters: Uso de feMorphology (Morfologías)

Este primitiva de filtro interpreta una dilatación o erosión de la imagen. Es particularmente útil para usarlo con el canal alfa.

El núcleo de dilatación (o erosión) es un rectángulo con un ancho de (2 * x) de radio y una altura de (2 * y-radio). En la dilatación, el píxel de salida es el máximo valor de la componente individual que corresponde a los valores R, G, B, A del núcleo del rectángulo de la imagen de entrada. En la erosión, el píxel de salida es el mínimo.

Frecuentemente esta operación se lleva a cabo en imágenes que son total o parcialmente transparentes, tal y como produce el parámetro SourceAlpha.

Si la entrada tiene extensión infinita y es constante, esta operación no tiene ningún efecto. Si la entrada tiene extensión infinita y es repetible en la zona de interacción del gráfico, el filtro se evalúa con condiciones periódicas.

A causa de que feMorphology funciona en los valores de color premultiplicados, siempre surtirá efecto en valores de color menores o iguales al canal alfa.

Existen algunos filtros interesantes que no necesariamente reciben de entrada pero son capaces de crear imágenes por sí mismos. Son los más comúnmente usados en conjunción con otros filtros, pero pueden ser más útiles cuando se trata de la construcción de imágenes o en el procesamiento de otras imágenes. Los más importantes son feFlood, feTile, feTurbulence, feMorphology y feSpecularLighting.

Filtro: 
<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 x = "0" y = "0" width = "100%" height = "100%" 
        xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

Los atributos configurables son:

AtributoDefinición
Indica la operación a usar, dilatación o erosión. Pueden tomar los valores dilate, erode.
Es el radio para la operación. Si se proporcfionan 2 números, el primer número representa un radio X y el segundo valor representa un radio Y. Si aólo se proporciona un número, entonces se utiliza tanto para X como Y. Los valores están en el sistema de coordenadas establecido por primitiveUnits dentro de filter.
No puede tomar valores negativos. Un valor de cero desactiva el efecto de la primitiva de filtro que daría como resultado una imagen en negro transparente.
Su valor por defecto es 0.

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.