06: Usando SVG - SVG como imagem de fundo - CSS-Tricks

As imagens SVG também podem ser usadas como background-imageCSS, como PNG, JPG.webp ou GIF.

.element ( background-image: url(/images/image.svg); )

A mesma grandiosidade de SVG vem junto com a viagem, como flexibilidade, mantendo a nitidez. Além disso, você pode fazer qualquer coisa que um gráfico rasterizado pode fazer, como repetir.

Neste vídeo, veremos a aplicação de um efeito de “borda de papel rasgado” na parte inferior de um módulo por meio de uma imagem de fundo em um pseudoelemento. É uma maneira legal de fazer isso, de forma que o próprio elemento principal possa ter uma cor de fundo sólida que possamos combinar e deixar o fundo da página vazar pelo espaço negativo no SVG. Além disso, não precisa de nenhuma marcação para fazer isso. Vimos esse efeito no HTML5Hub.

Veja o Pen GAekv de Chris Coyier (@chriscoyier) no CodePen.