> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Textura granulada SVG: mantenha o ruído dentro da arte > Adicione granulação SVG com feTurbulence, limite o ruído monocromático a SourceAlpha, ajuste em dois tamanhos e preserve um original limpo para outros destinos. Source: https://perfectvector.com/pt-BR/blog/svg-feturbulence-grain Language: pt-BR Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Para adicionar granulação a uma ilustração SVG, gere ruído com `feTurbulence`, transforme-o em uma sobreposição monocromática suave e componha essa sobreposição dentro de `SourceAlpha`. Mescle-a sobre `SourceGraphic` para manter o preenchimento original visível. Isso acrescenta uma textura renderizada e preserva a geometria dos caminhos da arte. Uma primitiva de ruído sozinha dá outro resultado: preenche a sub-região da primitiva do filtro, em vez de seguir o contorno da forma. Por isso uma folha pode virar um retângulo de ruído. A [referência de feTurbulence da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) documenta esse comportamento. Para uma ilustração web, as entregas úteis são uma versão texturizada para exibição e um original limpo. A granulação produzida por esse filtro não é uma coleção de pontos editáveis ou contornos de corte. ## Separe a forma do tratamento da superfície Comece com um caminho preenchido simples que já fique bom sem granulação. Corrija seu contorno, aberturas e cor antes de adicionar o efeito. Um filtro não repara essa geometria. Os três estados abaixo explicam o problema dos limites: | Versão | O que o filtro produz | Quando usar | | ------------------ | --------------------------------------------------------- | ------------------------------------------------------- | | Forma simples | O caminho preenchido original | Edição e original mestre limpo | | Ruído sozinho | Uma imagem retangular gerada na região do filtro | Examinar a origem do ruído, em vez de entregar o motivo | | Granulação contida | Arte original mais ruído monocromático limitado pelo alfa | Versão texturizada para exibição no navegador | **O limite importa** ![Ilustração de uma folha coral limpa, granulação escapando da folha e granulação contida dentro de uma silhueta de folha nítida](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Ilustração: a forma continua limpa enquanto o ruído fica restrito à silhueta. Este diagrama conceitual não é uma captura de renderizador SVG nem um resultado de vetorização.* `SourceGraphic` fornece o elemento filtrado. `SourceAlpha` fornece seu canal alfa. O filtro atua sobre uma imagem da arte; não reescreve os comandos do caminho. Essas entradas e o grafo do filtro são definidos na [especificação Filter Effects do W3C](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree). Se sua arte inicial já tem áreas transparentes, elas também afetam a contenção. SourceAlpha segue a opacidade renderizada real, não uma caixa delimitadora externa presumida. ## Copie um exemplo completo de granulação SVG Salve como arquivo `.svg` e abra em um navegador. Ele contém um caminho original de folha, uma semente de ruído determinística, uma sobreposição escura e a etapa explícita de contenção. A abertura diagonal faz parte do caminho, portanto continua transparente na versão texturizada. ```xml ``` O filtro tem quatro tarefas: 1. `feTurbulence` cria o ruído e o nomeia `noise`. 2. A matriz define vermelho, verde e azul como zero. Sua última linha multiplica o alfa do ruído por `0.28`, criando uma sobreposição preta suave chamada `ink`. 3. `feComposite` com `operator="in"` mantém essa sobreposição onde existe `SourceAlpha`. 4. `feMerge` desenha primeiro a arte original e depois a sobreposição contida acima dela. A [referência de feColorMatrix da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) explica como a matriz de cinco colunas transforma cor e alfa. Aqui ela muda a imagem de ruído, não o preenchimento da folha. A [referência de feComposite da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) explica a operação `in` usada para restringir a sobreposição à segunda entrada. O valor `0.28` é um ponto de partida para esta folha coral, não uma configuração universal de granulação. Diminua se a textura apagar a vivacidade da arte; aumente se a granulação desaparecer no tamanho de exibição pretendido. Granulação de sobreposição preta escurece o preenchimento. Ela não cria pontos claros visíveis em um motivo preto. Para operações de cor e alfa usadas para recolorir arte existente, veja o [guia separado de feColorMatrix](https://perfectvector.com/pt-BR/blog/svg-fecolormatrix). Para tornar mais firme uma borda transparente existente, veja [limiares alfa SVG](https://perfectvector.com/pt-BR/blog/svg-alpha-threshold). Nenhuma dessas operações fornece a origem de ruído gerado usada aqui. ## Confira o resultado no tamanho em que será visto Criamos três versões deste caminho original: sem filtro, com um filtro contendo só a primitiva de ruído e com o grafo completo de granulação contida acima. Examinamos as versões renderizadas no Chrome a **120 × 120** e **360 × 360 pixels CSS**, com o mesmo viewBox `0 0 200 200`. | Verificação | Versão de 120 pixels | Versão de 360 pixels | | ------------------ | ------------------------------------------- | ----------------------------------------------------------- | | Original limpo | Folha coral lisa, abertura transparente | Mesmo contorno e abertura | | Ruído sozinho | Ruído retangular substitui o motivo visível | Ruído retangular continua visível além da silhueta da folha | | Granulação contida | Textura suave dentro da folha | Textura mais visível, com abertura e arredores livres | O DOM do navegador continha um caminho em cada exemplo. Os seis atributos `d` eram idênticos. Isso estabelece o limite deste exemplo: a superfície renderizada mudou e nenhum caminho de ponto foi adicionado. É um arquivo de teste criado para navegador, não uma saída do PerfectVector ou de um editor vetorial nativo. Uma prévia maior ajuda a examinar o efeito, mas a versão menor determina se a arte ainda é legível. Mantenha os dois tamanhos na revisão. Aumentar o tamanho de exibição com o mesmo viewBox também muda a escala aparente da textura; não presuma que uma prévia representa todos os usos. ## Ajuste a granulação com um controle por vez Para uma ilustração pequena em um cartão web, comece pelos valores do exemplo. Depois mude um parâmetro, compare os mesmos dois tamanhos e guarde uma cópia da versão preferida. | Controle | O que decidir | Verificação prática | | ---------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------- | | `baseFrequency` | Variação mais grossa ou fina nas coordenadas SVG | Experimente `0.25` ao lado de `0.65`; examine no tamanho real de exibição | | `numOctaves` | Quantas camadas de detalhes de ruído combinar | Compare `1` e `2` antes de adicionar mais detalhes | | `seed` | Qual realização de ruído usar | Mantenha fixo ao comparar outras configurações | | Multiplicador alfa da matriz | Quanto a sobreposição preta escurece o preenchimento | Compare `0.15` e `0.28` na mesma arte | | Região do filtro | O retângulo disponível para o grafo do filtro | Corrija saída ausente sem usar o retângulo como substituto da contenção alfa | `baseFrequency` aceita um valor para os dois eixos ou dois valores para frequência horizontal e vertical. A [referência de baseFrequency da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) documenta a distinção. Comece com um valor para esta folha; valores desiguais são uma escolha deliberada para textura direcional. `numOctaves` controla o número de oitavas do ruído, como descreve a [referência de numOctaves da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves). Oitavas extras não são caminhos vetoriais extras. Use-as somente se melhorarem a superfície visível no tamanho necessário. O exemplo define `color-interpolation-filters="sRGB"` explicitamente. Mantenha essa configuração inalterada ao comparar opções, para que uma mudança no processamento de cor não confunda a comparação de granulação. ## Corrija um retângulo, preenchimento ausente ou borda suja **A textura cria um retângulo.** Examine a saída final do filtro. Se terminar com `feTurbulence`, está retornando a imagem de ruído. Restaure a matriz, a composição com `SourceAlpha` e a mesclagem. Ampliar o retângulo do filtro só dá mais espaço ao ruído sem contenção. **A cor da folha desaparece.** Confira se o primeiro nó de mesclagem usa `SourceGraphic`. Um resultado final só de `inside` contém a sobreposição escura, não o preenchimento coral original. Confira também a grafia e as maiúsculas de cada referência nomeada `result` e `in`. **O ruído permanece em uma abertura transparente.** Confirme que a segunda entrada da composição é `SourceAlpha`, não o ruído retangular ou um fundo opaco. Aplique o filtro à arte que deseja texturizar. Incluir um fundo opaco no grupo filtrado muda a entrada alfa. **Parte da saída está cortada.** Confira `x`, `y`, `width` e `height` no filtro. Eles definem a região disponível do filtro, como descreve a [referência de filter da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter). O exemplo oferece um espaço extra modesto. Uma região maior não repara uma etapa de contenção ausente nem corrige o recorte imposto por um contêiner separado. **A arte pequena parece suja.** Reduza primeiro o alfa da sobreposição e compare frequência e número de oitavas. Se a textura ainda prejudicar a silhueta, entregue a versão limpa nesse tamanho. ## Mantenha um original limpo para entrega Para o original sem filtro, remova `filter="url(#grain)"` do caminho e exclua a definição de filtro que deixou de ser usada. Preserve o `d` do caminho, seu preenchimento e o viewBox. Abra esse arquivo separadamente e confirme que a folha e a abertura correspondem à versão limpa original. Para um aplicativo web, confira a versão texturizada nos navegadores e no método exato de incorporação que você vai publicar. Se repetir este SVG inline em uma página, dê a cada filtro um ID único e atualize sua referência `url(#...)`. O exemplo independente usa um ID porque contém uma instância. Para um destino que exige aparência raster exata, exporte uma prévia raster no tamanho necessário e examine-a ali. Para um fluxo que precisa de geometria editável ou cortável, entregue os caminhos limpos e esclareça que a granulação é um efeito de exibição. Não descreva o ruído do filtro como pontos vetoriais nem prometa que um editor, exportador PDF ou máquina de corte posterior o reproduz. Teste o destino real. Se você precisa deliberadamente de pontos editáveis individualmente, isso é uma tarefa separada de geometria. Também exige uma decisão de limpeza; veja [por que um SVG tem nós demais](https://perfectvector.com/pt-BR/blog/svg-too-many-nodes) antes de traçar textura em uma massa de contornos minúsculos. Preservar a granulação de uma pintura raster é outro problema inicial, tratado em [aquarela para vetor](https://perfectvector.com/pt-BR/blog/watercolor-to-vector). ## Quando a vetorização ajuda Se o motivo limpo só existe como PNG ou JPG, [converta essa origem em arte SVG editável](https://perfectvector.com/pt-BR/image-to-vector) antes de acrescentar um filtro de navegador. Examine primeiro a silhueta e a abertura recuperadas na versão limpa. O PerfectVector fornece a etapa de raster para vetor; o grafo de granulação procedural deste guia é um tratamento SVG separado que você adiciona depois. Já tem o original mestre em caminhos? Use-o diretamente. Uma segunda conversão é desnecessária para o trabalho do filtro. O [guia de vetorização de imagens](https://perfectvector.com/pt-BR/blog/what-is-image-vectorization) explica essa etapa de recuperação da origem, caso você precise dela. ## Perguntas frequentes **Por que feTurbulence cria um retângulo em vez de seguir minha forma?** O ruído preenche a sub-região da primitiva do filtro. Componha-o dentro de SourceAlpha e mescle sobre SourceGraphic para limitar a sobreposição à arte e preservar seu preenchimento. **A granulação SVG adiciona nós ao meu caminho?** Este filtro não adiciona caminhos de pontos. No arquivo de teste original no navegador, os seis exemplos mantiveram um caminho com dados d idênticos; o filtro mudou a superfície renderizada. **Com quais configurações de granulação devo começar?** Para a folha original do exemplo, comece com fractalNoise, baseFrequency 0.65, duas oitavas, seed 8 e multiplicador alfa da sobreposição preta de 0.28. Compare no tamanho real de exibição e ajuste uma configuração por vez. **Posso usar o efeito de granulação como arquivo de corte?** A textura gerada não é geometria de corte editável. Mantenha um original separado de caminhos sem filtro e confira a geometria no fluxo de corte real. ## Fontes 1. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Geração de ruído e sub-região da primitiva. 2. [W3C: Árvore de primitivas do filtro](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha e processamento de imagens por filtro. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Operações de matriz de cor e alfa. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Contenção usando o operador in. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Valores de frequência em um ou dois eixos. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Camadas de detalhe do ruído. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atributos da região do filtro. Se sua ilustração web precisa recuperar um original limpo de raster, [comece pela conversão de imagem para vetor](https://perfectvector.com/pt-BR/image-to-vector), revise os caminhos e adicione granulação a uma cópia separada de exibição. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-feturbulence-grain) - [Importar SVG no FontForge: de formas desenhadas a contornos de glifos](https://perfectvector.com/pt-BR/blog/fontforge-import-svg.md) - [Como avaliar a qualidade da vetorização: uma ficha de notas](https://perfectvector.com/pt-BR/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)