Softonic

Generador de cuadrícula SVG

Paso 1 / 3
Siguiente

El fondo de cuadrícula es un elemento básico de las herramientas de diseño (Figma, Framer), páginas de aterrizaje enfocadas en desarrolladores (Linear, Vercel) y cualquier interfaz que busque una sensación de plano o papel milimetrado. También es uno de los fondos más ligeros que puedes enviar: un <pattern> repetido con dos trazos, generalmente por debajo de 300 bytes. Este generador construye la cuadrícula en cualquier tamaño de celda, peso de trazo y color, para que puedas ajustarlo para una cuadrícula sutil al estilo Figma o un aspecto de plano audaz.

Cómo construir la cuadrícula

  1. 1

    Establecer dimensiones del lienzo

    Define ancho y alto entre 50 y 3.000 px. Un múltiplo del tamaño de celda evita celdas parciales en los bordes.

  2. 2

    Elegir un tamaño de celda

    Elige entre 5 y 500 px. Prueba 20-40 px para fondos sutiles, 8-12 px para papel milimetrado y 60-80 px para wireframes marcados.

  3. 3

    Elegir ancho de trazo y color

    Trazos de 0.5-1 px se leen como líneas limpias; 2+ px comienzan a parecer dibujadas.

  4. 4

    Establecer el fondo

    Elige el color de fondo sólido que emitirá el SVG. Para superponerlo, copia el SVG y cambia o elimina el `<rect>` de fondo en tu propio código.

  5. 5

    Copiar el SVG

    Pegar en el marcado o en línea en una URL de datos CSS para una imagen de fondo que se pueda repetir.

El elemento patrón

Cada celda es un único <path> que dibuja el borde derecho y el borde inferior; repetir este mosaico construye toda la cuadrícula con solo dos segmentos de línea por celda, no cuatro:

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

La magia está en el path M 40 0 L 0 0 0 40: comenzando en (40, 0), línea a (0, 0), línea a (0, 40). Eso dibuja la línea superior solo hasta la esquina superior izquierda y luego hacia abajo por el lado izquierdo; cuando se coloca en mosaico, crea una cuadrícula completa sin trazos duplicados.

Guía de tamaño del patrón

Caso de uso Tamaño de celda Trazo Sensación de color
Lienzo al estilo Figma 20-30 px 1 px #e5e7eb sobre #fafafa
Papel milimetrado 10-12 px 0.5 px #cbd5e1 sobre #ffffff
Plano 40-60 px 1 px #bfdbfe sobre #1e3a8a
Wireframe 80 px 1.5 px #9ca3af sobre #ffffff
Terminal retro 16 px 1 px #22c55e sobre #000000

Cuadrículas mayores y menores

Si deseas un aspecto de plano con una cuadrícula fina y una cuadrícula principal más fuerte cada N celdas, apila dos fondos SVG:

.grid {
  background:
    url("data:image/svg+xml,<svg>... cuadrícula mayor ...</svg>"),
    url("data:image/svg+xml,<svg>... cuadrícula menor ...</svg>");
}

El navegador compone ambos en una sola pintura, sin impacto en el rendimiento.

Accesibilidad

La cuadrícula es puramente decorativa. Aplícala a un pseudo-elemento (::before con position: absolute; inset: 0; z-index: -1;) para que los lectores de pantalla y los analizadores de contenido vean solo el contenido real, no el fondo.

Preguntas frecuentes

Los trazos SVG renderizados a anchos subpíxel pueden tener suavizado. Ajusta el ancho del trazo a píxeles enteros (1, 2) y desplaza el path por 0.5 px (para trazos de 1 px) para alinearlo con la cuadrícula de píxeles.

No con este generador. Las cuadrículas hexagonales necesitan un mosaico que sea sqrt(3) veces más ancho que alto y un path que dibuje medio hexágono. Usa una herramienta dedicada de cuadrícula hexagonal o dibújalo en Figma.

Este editor emite un fondo sólido. Para crear una superposición, copia el SVG y cambia el primer <rect> de fondo a fill="transparent" o elimínalo en tu propio código.

Sí. Las cuadrículas SVG son de 200-500 bytes, se escalan nítidamente a cada DPR y te permiten cambiar el color con variables CSS. Una cuadrícula PNG es típicamente de 5-20 KB y se pixeliza en pantallas retina.

El editor envía las dimensiones y colores actuales a nuestros servidores para renderizar el SVG. En el flujo de tres pasos, esos ajustes también aparecen en la URL. No introduzcas valores confidenciales; no hay carga de archivos fuente ni proyecto guardado.

Herramientas relacionadas

Selector de Color de Material Design

Explora la paleta de colores de Material Design. Copia cualquier tono (50 a A700) como HEX, RGB o HSL con un toque.

Convertir foto en dibujo

Convierte fotos JPEG, PNG o WebP en dibujos de grafito, lápiz suave o carboncillo en el navegador y exporta el resultado como PNG o JPEG.

Comprimir GIF

Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.

Convertidor de Pantone a HEX

Convierte colores Pantone PMS a los valores HEX, RGB y CMYK más cercanos para la coincidencia en pantalla e impresión, con vista previa de muestra.

Generador de papel rayado

Crea papel rayado imprimible gratis. Elige pauta universitaria, ancha o estrecha, ajusta el interlineado en mm, el tamaño de página y una línea de margen, e imprime o descarga el SVG.

Creador de banderas

Diseña una bandera personalizada sencilla 3:2 en tu navegador con seis composiciones, colores, texto y un símbolo. Descarga SVG o PNG, o abre el cuadro de impresión del navegador.

Herramienta disponible en otros idiomas