Patrones de fondo SVG

Preguntas frecuentes

¿Cómo uso uno de estos valores?

Pégalo como background de cualquier elemento, por ejemplo body { background: …; } o una sección principal. El valor incluye un color de fondo, el mosaico del patrón como URI de datos y repeat, así que basta con una sola declaración. El mosaico se repite sin cortes en ambas direcciones.

¿Cómo cambio los colores?

Cada valor contiene exactamente dos colores: el hexadecimal del fondo al principio y el hexadecimal del patrón dentro de la URI de datos (aparece codificado para URL, %23 representa el signo #). Sustituye ambos por los de tu paleta. Para una textura más sutil, reduce el valor de fill-opacity o stroke-opacity dentro de la URI en lugar de cambiar el color.

¿Un fondo con URI de datos genera una solicitud de red?

No. El SVG va incluido en el propio CSS, así que no hay solicitudes adicionales, archivos que alojar ni instantes en los que falte el fondo. Estos mosaicos son diminutos (unos cientos de bytes), muy por debajo del tamaño que podría hacer que una URI de datos fuera un problema.

¿Puedo cambiar el tamaño del patrón?

Sí. Añade background-size al mismo elemento, por ejemplo background-size: 48px 48px duplica un mosaico de 24px. Mantén las proporciones del mosaico original (el ancho y el alto están en el valor que copiaste) para que siga repitiéndose sin cortes.