Softonic

Generador de Formas SVG

Paso 1 / 2

La mayoría de los sistemas de diseño solo necesitan un pequeño vocabulario de formas: un círculo para un avatar, un cuadrado para un chip de estado, un triángulo para un ícono de reproducción, una estrella para una calificación, un hexágono para una insignia. Este generador renderiza las siete formas estándar (círculo, cuadrado, triángulo, estrella, hexágono, pentágono, corazón) con geometría perfectamente calibrada: puntos de estrella en el radio interno correcto, hexágonos y pentágonos orientados con la punta hacia arriba, corazón centrado en el lienzo, y genera el <svg> listo para pegar.

Cómo generar una forma

  1. 1

    Elige una forma

    Círculo, cuadrado, triángulo, estrella, pentágono, hexágono o corazón.

  2. 2

    Establece tamaño y trazo

    Tamaño del lienzo en píxeles. El ancho del trazo controla el peso del contorno; 0 elimina el contorno.

  3. 3

    Elige color de relleno y trazo

    Cualquier color hexadecimal. Establece el relleno en `none` para formas huecas.

  4. 4

    Para estrellas, establece puntos

    El primitivo de estrella acepta de 3 a 12 puntos. Cinco es clásico; siete da un aspecto de insignia de sheriff.

  5. 5

    Copia el SVG

    El marcado utiliza el primitivo SVG correspondiente (`<circle>`, `<rect>`, `<polygon>`, `<path>`) para minimizar bytes.

Geometría de formas de un vistazo

Forma Primitivo SVG Parámetros que importan
Círculo <circle> radio, relleno, trazo
Cuadrado <rect> ancho, alto, trazo (sin rx aquí)
Triángulo <polygon> (3 puntos) equilátero, apuntando hacia arriba
Estrella <polygon> (N × 2) puntos (3-12), relación de radio interno/externo
Pentágono <polygon> (5 puntos) orientado hacia arriba
Hexágono <polygon> (6 puntos) orientado hacia arriba (gira 30° para plano)
Corazón <path> con Béziers centrado en el lienzo, simétrico

Salida de ejemplo: una estrella de cinco puntas

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

El radio interno está fijado al 40% del radio externo, lo que coincide con las proporciones clásicas utilizadas en estrellas de banderas y trofeos.

Casos de uso

  • Avatares y máscaras, círculo como un clip-path para fotos de perfil.
  • Chips de estado, cuadrado (redondeado a través de CSS border-radius o un rx posterior) como un simple indicador de bandera.
  • Interfaces de calificación, estrellas llenas, medio llenas y contorneadas para escalas de 0-5.
  • Insignias y escudos, hexágono con texto o ícono interno.
  • Botones de afecto, corazón para me gusta, listas de deseos y guardados.

Por qué usar primitivos SVG en lugar de un camino genérico

Usar <circle> o <polygon> en lugar del equivalente <path>:

  • Es más pequeño en bytes para formas simples (10-30 bytes).
  • Es más fácil de animar, atributos como r, cx, cy, points son directamente animables con CSS o GSAP.
  • Se lee más claramente en inspectores y diferencias.

Para formas complejas (bultos, íconos, logotipos), los caminos ganan porque pueden describir curvas y segmentos mixtos en un solo elemento.

Accesibilidad

Todos los SVG generados son decorativos por defecto. Si la forma tiene significado (un círculo rojo = error, un check verde = éxito), envuélvelo en un padre con role="img" y un aria-label, o agrega un <title> hijo dentro del SVG.

Preguntas frecuentes

El radio interno determina la “gordura” de cada brazo. Este generador usa interno = 40% de externo para un aspecto equilibrado. Para obtener una estrella más afilada, baja la relación en el SVG de salida (por ejemplo, 25%); para una estrella más roma, tipo pieza de Lego, súbela al 60%.

Este generador produce un <rect> simple. Agrega rx="8" ry="8" al rect para redondear las esquinas, o usa la propiedad CSS border-radius si envuelves el SVG.

Sí, envuelve el SVG en un padre con transform: rotate(30deg), o edita el camino: desplaza el ángulo inicial 30°. El generador predetermina hacia arriba porque coincide con la mayoría de los diseños de insignias.

Sí. El SVG utiliza el viewBox adecuado, coordenadas de píxeles enteros y un marcado de longitud mínima. Puedes integrarlo en React, Vue, Astro, correo electrónico o HTML simple sin modificación.

No. Los parámetros de forma se utilizan para renderizar el SVG para la solicitud actual y se descartan.

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