Fundo com padrão de grade em SVG

Do que é feito um fundo com padrão

O arquivo gerado contém um bloco pequeno, definido uma única vez como padrão, e um retângulo que preenche a tela com esse bloco. Como o navegador repete o bloco, o arquivo tem poucas centenas de bytes, quer a grade tenha 20 células, quer tenha 2.000. O primeiro retângulo pinta a cor de fundo e o segundo pinta as linhas por cima.

Cada bloco desenha apenas sua borda superior e sua borda esquerda. Os blocos vizinhos fornecem o restante, então nenhuma linha é desenhada duas vezes. Uma consequência merece atenção: a linha da primeira coluna e da primeira linha fica exatamente na borda da tela, então metade da sua largura fica para fora. Um traço de 1 px aparece, portanto, como uma borda superior e esquerda fina de meio pixel. Se a largura da tela for múltipla exata do tamanho da célula, as bordas direita e inferior terminam sem linha de fechamento.

Valores que funcionam como fundo

Um fundo precisa dar suporte ao texto que fica por cima. Estes pontos de partida são seguros:

Mantenha baixo o contraste entre as linhas e o fundo. Se houver texto corrido por cima, uma linha quase tão escura quanto o texto deixa a leitura cansativa.

Exemplo prático

Para uma seção de destaque de 1200 px de largura e 800 px de altura, uma célula de 40 px dá 30 colunas e 20 linhas, ou seja, 600 células. Como 1200 e 800 são múltiplos de 40, a grade termina de forma limpa nas duas bordas. Com célula de 50 px, você teria 24 por 16 células, também limpo. Uma célula de 45 px deixaria uma célula parcial à direita e embaixo, porque 1200 dividido por 45 dá 26,67.

Usando o resultado

Cole o SVG diretamente no seu marcado, salve-o como arquivo e referencie-o como imagem, ou coloque-o atrás do conteúdo como uma camada decorativa. Lembre que a cor de fundo faz parte do SVG. Se quiser a grade sobre outra cor, edite o primeiro retângulo do código copiado.

Alinhando o fundo ao layout

Se a sua coluna de conteúdo tem 960 px de largura, uma célula de 32 px ou de 40 px mantém a grade e as bordas da coluna alinhadas, porque 960 é divisível pelos dois valores. Alinhar a grade ao layout faz as linhas parecerem projetadas, e não aleatórias.