Filtros SVG

Filtros SVG

Con los filtros SVG, puede añadir efectos especiales a gráficos SVG y a elementos de texto. Use efectos CSS para otros tipos de elementos.

    

Ejemplos de efectos aplicados por filtros SVG (el gráfico SVG original es el de la izquierda)

Para añadir o editar un filtro SVG, haga lo siguiente:

1. Haga clic con el botón derecho en un gráfico SVG o en un elemento de texto.
2. En el menú emergente, seleccione Añadir filtro SVG. Si ya se ha aplicado un filtro, seleccione Editar filtro SVG.
3. En el cuadro de diálogo Editar filtro SVG, vaya al panel de la derecha y seleccione un filtro en el menú desplegable Filtro.
4. Personalice la configuración del filtro.
5. Haga clic en Guardar. La configuración que elija se guardará como un filtro personalizado.

Nota: No se pueden aplicar filtros SVG cuando hay una media rule activa.

Elementos de texto

Al aplicar un filtro SVG, el elemento de texto se convierte a un gráfico SVG y ya no podrá editarlo con la herramienta de texto. El texto SVG se muestra en una sola línea sin relleno, por lo que se eliminan los saltos de línea. La conversión se puede deshacer quitando el filtro SVG.

En el cuadro de diálogo Editar filtro SVG, puede hacer los siguientes cambios en el texto:

• Texto (el contenido del texto)
• Tamaño de la fuente
• Color del texto

Filtros SVG y opciones de configuración

Ninguno

No se aplica ningún efecto al elemento SVG. El texto que se hubiera convertido en gráfico SVG al aplicarle un filtro vuelve a ser un elemento de texto.

Aura

Rodea el elemento SVG con un aura.

Ajuste	Descripción
Radio X	Radio horizontal del aura. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Radio Y	Radio vertical del aura. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Color	Color del aura.

Bisel

Da un aspecto biselado a los bordes del elemento SVG.

Ajuste	Descripción
Redondez	Curvatura del biselado.
Profundidad	Profundidad del biselado.

Desenfoque

Desenfoca el elemento SVG.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al grado de desenfoque del elemento.
Radio X	Radio horizontal del desenfoque. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Radio Y	Radio vertical del desenfoque. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.

Erosionado

Da un aspecto erosionado al elemento SVG.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al tamaño de las zonas erosionadas.
Profundidad	Profundidad de las zonas erosionadas.
Ángulo	Ángulo de las zonas erosionadas.

Disolver

Disuelve partes del elemento SVG.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al tamaño de las áreas disueltas.
Definición	Grado de conservación de los bordes originales.

Desviar sombra

Añade una sombra al elemento SVG.

Ajuste	Descripción
Sombra X	Distancia horizontal que separa la sombra del elemento. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Sombra Y	Distancia horizontal que separa la sombra del elemento. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Radio de desenfoque	Radio de desenfoque de la sombra. Cuanto más alto sea el valor, más borrosa estará la sombra.
Color	Color de la sombra.

Destello

Crea el aspecto de una luz proyectada sobre el elemento SVG.

Ajuste	Descripción
Escala	Escala del efecto. Afecta a la parte del elemento SVG que aparece iluminada.
Nivel de luz	Altura de la luz. Afecta al ángulo desde el que se ilumina el elemento SVG.
Color	Color de la luz.

Halo

Añade un halo al elemento SVG.

Ajuste	Descripción
Radio X	Radio horizontal del halo. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Radio Y	Radio vertical del halo. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Color	Color del halo.

Inflado

Hace que el elemento SVG se muestre inflado, como un globo.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al grado de tridimensionalidad del elemento.
Color del tono	Color del tono reflectante del elemento.
Intensidad del tono	Intensidad del tono reflectante.
Sombra X	Distancia horizontal que separa la sombra del elemento.
Sombra Y	Distancia horizontal que separa la sombra del elemento.

Contorno

Añade un contorno a los bordes del elemento SVG.

Ajuste	Descripción
Radio X	Radio horizontal del contorno. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Radio Y	Radio vertical del contorno. Mantener igual : cuando este botón esté activo, los valores de los radios X e Y se mantendrán iguales.
Color	Color del contorno.

Sepia

Cambia los colores del elemento SVG a tonos sepia.

Ajuste	Descripción
Brillo	Brillo del elemento.

Salpicadura

Hace que el elemento SVG se muestre como si se le hubiera salpicado con líquidos. Se generan dos efectos de derrame de líquidos. En el siguiente ejemplo, un derrame es de color morado y el otro de color azul.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al tamaño de las gotitas de líquido.
Patrón	Permite seleccionar un patrón de salpicadura entre los diez patrones disponibles.
Brillo	Brillo del elemento.
Disolución	Grado de disolución del elemento.
Escala de derrame 1	Escala del primer efecto de derrame.
Desenfoque de derrame 1	Desenfoque del primer efecto de derrame.
Color de derrame 2	Color del segundo efecto de derrame.
Escala de derrame 2	Escala del segundo efecto de derrame.
Desenfoque de derrame 2	Desenfoque del segundo efecto de derrame.

Con textura

Da al elemento SVG un aspecto de textura.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al tamaño de los segmentos de textura.
Color del tono	Color del tono.
Intensidad del tono	Intensidad del tono.
Desenfoque	Desenfoque del elemento.
Redondez	Redondez de los segmentos de textura.
Patrón	Permite seleccionar un patrón de textura entre los diez patrones disponibles.

Distorsión

Distorsiona el elemento SVG.

Ajuste	Descripción
Escala	Escala del efecto. Afecta al tamaño de las ondas de distorsión.
Distorsión	Grado de distorsión.