Gerador de Padrão SVG

Padrões SVG para backgrounds modernos

SVG (Scalable Vector Graphics) é um padrão W3C publicado em 1999 — um formato vetorial baseado em XML que o navegador renderiza em qualquer resolução sem perder nitidez. Como background de página, o SVG bate formatos raster (PNG, JPG) em quase tudo que importa: o arquivo é texto puro, então gzipa para alguns kilobytes; escala de favicon a hero 4K sem pixelizar; pode ser tematizado em runtime trocando variáveis CSS; e pode ser animado com transitions ou SMIL sem reexportar nada.

A forma clássica de montar um background tileável em SVG é o elemento <pattern> declarado dentro de <defs> e referenciado por fill="url(#id)". O padrão é tratado como um tile único e o navegador repete automaticamente ao longo de qualquer forma que você preencha — não precisa de background-repeat.

<svg width="100%" height="100%">
  <defs>
    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="#6366f1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

Famílias clássicas de padrões

• Polka dots (bolinhas) — círculos em grade quadrada ou intercalada; clássico de design editorial e embalagens.
• Grades e linhas — retas horizontais, verticais ou diagonais; cavalo de batalha de dashboards e visuais tipo papel quadriculado.
• Ondas e zigue-zague — paths senoidais ou dente de serra; sugerem movimento em landing pages.
• Hexágonos e colmeia — favoritos de marcas tech e gaming pela sensação "estruturada mas orgânica".
• Linhas topográficas — curvas concêntricas que imitam mapas de contorno; popularizadas pelo Hero Patterns.
• Plus signs e jigsaw — primitivos geométricos que funcionam muito bem com baixa opacidade.

Bibliotecas gratuitas para se inspirar: Hero Patterns (Steve Schoger), SVGBackgrounds.com, MagicPattern e Pattern Monster. Todas geram a mesma classe de markup que nosso gerador produz.

SVG inline, CSS background ou data URI?

Você pode entregar o mesmo padrão de três formas. SVG inline no DOM dá acesso total via CSS e JavaScript — cada <circle> é um nó consultável. CSS background-image: url(data:image/svg+xml,...) é o mais ergonômico para decoração: o SVG é URL-encoded dentro do stylesheet, cacheado junto com o CSS e nunca chega ao DOM. Tailwind v3 suporta essa idiom nativamente via valores arbitrários como bg-[url('...')]. Data URI base64 também funciona, mas é ~30% maior que SVG URL-encoded e mais difícil de cache-bust.

Performance e acessibilidade

SVG inline é parseado como parte do HTML, então conta para Largest Contentful Paint e time-to-interactive — mantenha o markup do padrão curto. Para padrões animados, envolva a animação num bloco @media (prefers-reduced-motion: no-preference) para que usuários que desativaram movimento recebam uma versão estática. Marque backgrounds puramente decorativos com aria-hidden="true" para que leitores de tela os ignorem.

Perguntas frequentes

SVG pode conter JavaScript? Sim — o elemento <script> faz parte da spec. Mas o navegador só executa quando o SVG é carregado como documento ou inline, nunca quando ele é usado como background-image. Para backgrounds, prefira SVGs sem scripts para evitar qualquer risco de XSS.

SVG é sempre menor que PNG? Para padrões geométricos repetitivos, quase sempre — um padrão de 1 KB cobre uma página 4K que precisaria de PNG de 500 KB. Para texturas fotográficas, PNG/WebP ganham.

Os padrões SVG são realmente tileáveis? Sim. O elemento <pattern> é nativamente repetível via patternUnits; não precisa costurar seams.

Onde a geração acontece? Inteiramente no seu navegador. Nada é enviado para nenhum servidor — o SVG e o CSS são produzidos em JavaScript no cliente.