Implementação de gradiente SVG


11

É possível recriar esse tipo de gradiente desfocado em um SVG?

insira a descrição da imagem aqui

Respostas:


13

Sim e não.

É possível criar uma malha de gradiente no Inkscape e salvá-la como um SVG. No entanto, os padrões SVG usados ​​nos navegadores ainda não suportam malhas de gradiente. Isso pode mudar no futuro, mas, no momento, não.

insira a descrição da imagem aqui

Outro método que funciona nos navegadores é adicionar vários objetos sólidos, desfocá-los e colocá-los em uma máscara de recorte. Essa ainda é uma solução vetorial pura, não é rasterizada.

insira a descrição da imagem aqui

Aqui está o SVG da versão que funciona em navegadores, se você quiser.

Editar : o link acima para o SVG não está mais disponível, então eu o removi.


Isso é legal! O SVG no link não se parece nada com a inserção fornecida na sua resposta, no entanto ... parece muito mais leve. Alguma razão para isso?
Jared Garcia

@JaredGarcia Não tenho idéia por que - a minha captura de tela corresponde ao SVG exatamente no meu computador no Inkscape - mas certifique-se que você está usando a versão mais recente do Inkscape - agora na versão 0.92
Billy Kerr

Ah, eu estava vendo no navegador no meu celular direto desse link para download. Vou abri-lo no Inkscape e verificá-lo.
Jared Garcia

1
A @JaredGarcia publica isso como uma nova pergunta, para que possa ser respondida adequadamente.
Andrew T.

1
Desfocar nos navegadores é realmente caro. Você pode obter o mesmo efeito estratificando gradientes de fundo. Estes são até animados. E você pode usar o modo de mesclagem em segundo plano para obter um efeito extra nos navegadores modernos.
PieBie

2

Pode ser feito no Illustrator e no Inkscape como malha de gradiente. Quando salvo como SVG no Illustrator herdado, foi transformado em imagem de bitmap. Obviamente, o Illustator sabia disso há cerca de 6 anos, mas a linguagem SVG não.

Quando salvo no Inkscape como SVG simples, não como SVG do Inkscape, ele permaneceu como malha de gradiente e a abertura do arquivo SVG com um editor de texto revelou que há um comando meshgradient. Veja o trecho de código

insira a descrição da imagem aqui

Portanto, sem conhecer os padrões, posso dizer "Pelo menos é implementado no SVG simples do Inkscape".

Espero que alguém programador com status de desenvolvimento SVG diga algo exato.


2
Você pode incluir diretamente o código aqui com a formatação correta. Não há necessidade de postar uma captura de tela.
Wrzlprmft

Infelizmente, as malhas de gradiente do Inkscape ainda não são suportadas no Google Chrome ou Firefox.
Billy Kerr

Você pode postar o código SVG
Jared Garcia

@JaredGarcia Eu não tenho. Eu preenchi apenas 10 nós de 25 para ver que ele dá a aparência certa. Você pode fazer isso sozinho. Importe a imagem para o Inkscape, faça um quadrado do mesmo tamanho, defina seu tipo de preenchimento = malha de gradiente, adicione mais 3 linhas e colunas com a ferramenta Malha, com a ferramenta Nó selecione um por um os nós e, com o seletor de cores, faça o cor da imagem importada. Salve como SVG comum, abra no Win Notepad para ver o código.
user287001

1

Se seu objetivo é ter um gradiente de malha escalável e leve, você pode tentar este método:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

Não é vetor, mas pode ser porque o tamanho do arquivo é super pequeno e a imagem é dimensionada infinitamente.


Bem-vindo ao GDSE - glaf para tê-lo aqui! Dê uma olhada no tour e tenha uma idéia de como gostamos de perguntar Como perguntar e responder Como responder perguntas. Provavelmente, é uma boa ideia examinar também os códigos gerais de comportamento enquanto você olha em volta da Central de Ajuda. Sua resposta é uma boa resposta em termos de aplicabilidade que você compartilhou, mas aqui no GDSE preferimos usar links apenas para referência ou para vincular recursos, à medida que os links mudam ou desaparecem com muita facilidade: você poderia resumir o conteúdo que está vinculando no corpo de sua resposta, por favor?
GerardFalla 18/01/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.