De manera histórica cuando utilizamos una imagen que se repite en un fondo recurrimos al formato GIF, JPEG o PNG, sin embargo con CSS3 y el amplio soporte por parte de los navegadores tenemos una nueva posibilidad y es la de utilizar imágenes en formato SVG.
La gran ventaja de utilizar imágenes en formato SVG es que el peso, en general, es menor a lo de los formatos anteriormente listados. Además si lo codificamos en base64 podemos incluir los patrones directamente en nuestras hojas de estilo, una ventaja bastante importante si consideramos que estaríamos ahorrando una llamada al servidor.
SVG Patterns Gallery es un recurso excelente si lo que estamos necesitamos es un pattern en formato SVG listo para utilizar.
En total son casi 20 motivos distintos, muy variados y para todos los gustos, si encontramos uno que nos agrade simplemente presionamos el enlace “get the code” y el código aparece listo para copiar y pegar en nuestro proyecto.
Utilizar este tipo de recursos se podría considerar seguro de cara a la compatibilidad con los distintos navegadores, actualmente la compatibilidad esta presente en: Firefox, Chrome, Safari, IE10, e IE9.
Web: SVG Patterns Gallery