Filtros do SVG

Com os filtros do SVG, é possível adicionar efeitos especiais aos gráficos SVG e ao texto. Use os efeitos de CSS para outros tipos de elementos.

Exemplos de efeitos de filtro do SVG (SVG original à esquerda)

Para adicionar ou editar um filtro do SVG, faça o seguinte:

Clique com o botão direito do mouse no elemento SVG ou de texto.
Selecione Adicionar filtro do SVG... no menu pop-up. Se um filtro já tiver sido aplicado, selecione Editar filtro do SVG....
Na caixa de diálogo Editar filtro do SVG, selecione um filtro na lista suspensa Filtro no painel à direita.
Personalize as configurações do filtro.
Clique em Salvar. Suas configurações serão lembradas como um filtro personalizado.

Observação: não é possível aplicar filtros SVG quando uma regra de mídia está ativa.

Elementos de texto

Quando você aplica um filtro do SVG a um elemento de texto, ele é convertido em SVG, e não é mais possível editá-lo com a ferramenta "Texto". O texto do SVG é exibido em uma única linha sem quebra, então qualquer quebra de linha é removida. A conversão pode ser desfeita removendo o filtro do SVG.

Na caixa de diálogo Editar filtro do SVG, é possível fazer as seguintes mudanças no texto:

Texto (conteúdo do texto)
Tamanho da fonte
Cor do texto

Filtros e as configurações deles

Nenhum

Nenhum efeito é aplicado ao elemento SVG. O texto convertido em SVG por um filtro é restaurado como elemento de texto.

Aura

Circunda o elemento SVG com uma aura.

Configuração	Descrição
Raio X	É o raio horizontal da aura. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Raio Y	É o raio vertical da aura. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Cor	É a cor da aura.

Bisel

Dá um aspecto biselado às bordas do elemento SVG.

Configuração	Descrição
Arredondamento	É a curvatura do bisel.
Profundidade	É a profundidade do bisel.

Desfoque

Desfoca o elemento SVG.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta o nível de desfoque do elemento.
Raio X	É o raio horizontal do desfoque. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Raio Y	É o raio vertical do desfoque. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.

Com crateras

Dá um aspecto de crateras ao elemento SVG.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta o tamanho das crateras.
Profundidade	É a profundidade das crateras.
Ângulo	É o ângulo das crateras.

Dissolver

Desgasta partes do elemento SVG.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta o tamanho das áreas dissolvidas.
Definição	É o nível de preservação das bordas originais.

Sombra projetada

Adiciona uma sombra projetada ao elemento SVG.

Configuração	Descrição
X da sombra	É o deslocamento horizontal da sombra do elemento. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Y da sombra	É o deslocamento vertical da sombra do elemento. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Raio de desfoque	É o raio do desfoque da sombra. Valores maiores fazem com que a sombra pareça mais desfocada.
Cor	É a cor da sombra.

Cintilação

Cria a aparência de uma luz iluminando o elemento SVG.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta a parcela do elemento SVG que é iluminada.
Altura da luz	Indica a altura da luz. Isso afeta o ângulo em que a luz atinge o elemento SVG.
Cor	É a cor da luz.

Luminosidade

Adiciona um brilho ao elemento SVG.

Configuração	Descrição
Raio X	É o raio horizontal da luminosidade. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Raio Y	É o raio vertical da luminosidade. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Cor	É a cor da luminosidade.

Inflar

Faz com que o elemento SVG pareça inflado como um balão.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta a aparência de tridimensionalidade do elemento.
Cor da tonalidade	É a cor da tonalidade reflexiva do elemento.
Intensidade da tonalidade	É a intensidade da tonalidade reflexiva.
X da sombra	É o deslocamento horizontal da sombra do elemento.
Y da sombra	É o deslocamento vertical da sombra do elemento.

Contorno

Adiciona um contorno às bordas do elemento SVG.

Configuração	Descrição
Raio X	É o raio horizontal do contorno. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Raio Y	É o raio vertical do contorno. Manter idêntico : quando esse botão está ativo, os valores de raio X e Y permanecem iguais.
Cor	É a cor do contorno.

Sépia

Muda as cores do elemento SVG para tons sépia.

Configuração	Descrição
Brilho	É o brilho do elemento.

Respingo

Faz com que o elemento SVG pareça estar respingando líquido. São gerados dois efeitos de líquido respingando. No exemplo abaixo, "Respingo 1" é roxo, enquanto "Respingo 2" é azul.

Configuração	Descrição
Escala	É a escala do efeito geral. Isso afeta o tamanho das gotículas de líquido.
Padrão	Selecione um dos 10 padrões de respingos.
Brilho	É o brilho do elemento.
Dissolução	É o nível de dissolução aparente do elemento.
Escala do respingo 1	É a escala do primeiro efeito de respingo.
Desfoque do respingo 1	É o desfoque do primeiro efeito de respingo.
Cor do respingo 2	É a cor do segundo efeito de respingo.
Escala do respingo 2	É a escala do segundo efeito de respingo.
Desfoque do respingo 2	É o desfoque do segundo efeito de respingo.

Texturizado

Confere ao elemento SVG uma aparência texturizada.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta o tamanho dos segmentos de textura.
Cor da tonalidade	É a cor da tonalidade.
Intensidade da tonalidade	É a intensidade da tonalidade.
Desfoque	É o desfoque do elemento.
Arredondamento	É a curvatura de cada segmento de textura.
Padrão	Selecione um dos 10 padrões de textura.

Distorção

Distorce o elemento SVG.

Configuração	Descrição
Escala	É a escala do efeito. Isso afeta o tamanho das ondulações de distorção.
Distorção	É a gravidade da distorção.

Isso foi útil?

Como podemos melhorá-lo?