background de pontos SVG
Um padrão de pontos em SVG normalmente vira um data URI dentro de background-image, com background-size definindo o tamanho do tile que se repete. Este gerador monta um tile de 32×32px com um ponto de raio 1.5px centralizado, exporta o CSS pronto e deixa você ajustar espaçamento e opacidade sem precisar abrir um editor vetorial.
Em 0.08 de opacidade sobre fundo branco, o ponto preto ainda deixa a área de texto bem acima do mínimo de contraste 4.5:1 do WCAG, então a textura funciona mesmo atrás de parágrafos inteiros.
Dobrar o tile de 32 para 64px sem mudar o raio do ponto proporcionalmente faz cada ponto parecer menor e mais espaçado, útil em banners largos onde um tile pequeno demais criaria ruído visual repetitivo.
A 0.3 de opacidade o ponto já compete com texto pequeno pela atenção do olho, então esse ajuste serve para faixas decorativas sem conteúdo textual sobreposto, nunca para a área onde um parágrafo será lido.
Para geometria simples, geralmente sim: escala sem perder nitidez, é editável e costuma ser leve. Para texturas fotográficas ou ruído muito denso, um PNG/WebP otimizado pode ser mais eficiente.
Porque o SVG descreve o ponto como matemática vetorial, então o mesmo código de poucos bytes escala para qualquer densidade de tela sem borrar, enquanto um PNG precisaria de uma versão @2x ou @3x separada para telas retina, cada uma como uma requisição de rede extra.
Depende do peso e tamanho da fonte, mas como regra prática, opacidade acima de 0.15 sobre um fundo de mesma cor do texto já reduz o contraste efetivo o suficiente para arriscar ficar abaixo dos 4.5:1 exigidos pelo WCAG para texto normal.
Não: como o SVG usa um viewBox proporcional, basta trocar o valor de background-size no CSS gerado; o desenho do ponto permanece o mesmo, só a distância de repetição entre um ponto e o próximo aumenta.
Não: um data URI de círculo simples costuma ficar abaixo de 200 bytes de código, contra alguns kilobytes de um PNG equivalente, e por estar embutido direto no CSS, o navegador não faz nenhuma requisição HTTP adicional para carregá-lo.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 128" role="img" aria-label="Pattern preview"><defs><pattern id="p" width="32" height="32" patternUnits="userSpaceOnUse"><circle cx="16" cy="16" r="2.8" fill="#3DDC97"/></pattern></defs><rect width="100%" height="100%" fill="#101412"/><rect width="100%" height="100%" fill="url(#p)"/></svg>O pattern é gerado localmente e não usa backend.