Cómo crear archivos SVG: Guía para principiantes (2026)

Necesitas un archivo SVG — ya sea para un logotipo, un icono o una ilustración para tu web — pero nunca has creado uno antes. La buena noticia: hacer SVGs es más sencillo de lo que crees, y no necesitas software de pago para hacerlo. Esta guía cubre todas las formas de crear un SVG, desde herramientas de costo cero hasta la codificación manual.

¿Qué herramientas permiten crear archivos SVG?

Aquí tienes las opciones más populares, ordenadas de más sencilla a más técnica:

1. Figma (Gratuito, en navegador) — Mejor opción para principiantes

Figma es una herramienta de diseño gratuita que funciona directamente en tu navegador. Es la forma más fácil de crear archivos SVG sin tener que instalar nada:

1. Accede a figma.com y crea una cuenta gratuita
2. Crea un nuevo archivo de diseño
3. Usa las herramientas de forma (rectángulo, elipse, línea, pluma) para crear tu diseño
4. Selecciona lo que quieras exportar, haz clic en "Exportar" en el panel derecho y elige el formato SVG

Figma es la herramienta de diseño más usada en 2026 y exporta código SVG limpio y bien formateado. Es ideal para iconos, logotipos y gráficos de interfaz de usuario.

2. Inkscape (Gratuito, de escritorio) — Mejor opción para ilustraciones

Inkscape es un editor de gráficos vectoriales gratuito y de código abierto. Es la alternativa gratuita más parecida a Adobe Illustrator. Puedes descargarlo en inkscape.org. El formato nativo de Inkscape es SVG, así que todo lo que crees se guarda directamente como archivo SVG. Es especialmente potente para ilustraciones, tipografía y obras de arte vectorial complejas.

3. Adobe Illustrator (De pago, de escritorio) — Estándar de la industria

Si ya tienes Illustrator a través de una suscripción a Creative Cloud, es la herramienta de creación de SVG más potente disponible. La ruta Archivo → Guardar como → SVG te da un control muy preciso sobre cómo se escribe el código SVG, incluyendo el estilado con CSS, la precisión decimal y el manejo de fuentes.

4. Codificación manual de SVG — Mejor opción para iconos sencillos y desarrolladores

Como el SVG no es más que texto XML, puedes crear archivos SVG escribiendo código directamente. Para formas sencillas, esto suele ser más rápido que abrir una herramienta de diseño:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#f97316"/>
</svg>

Ese es un archivo SVG completo y válido: un círculo morado. Guárdalo como circle.svg y funcionará sin problemas. Para desarrolladores que se manejen bien con código, escribir a mano el SVG de iconos sencillos es muy eficiente y genera archivos con el menor tamaño posible.

Conceptos clave de SVG para principiantes

• Paths (Rutas): El elemento más importante de SVG. Una ruta describe una forma mediante comandos: M (mover a), L (línea a), C (curva a), Z (cerrar ruta).
• viewBox: Define el sistema de coordenadas. viewBox="0 0 100 100" significa que el área de dibujo es de 100×100 unidades. Incluye siempre un viewBox.
• Fill vs Stroke (Relleno vs Trazo): fill es el color del interior de una forma, stroke es el contorno. Las formas SVG pueden tener uno de los dos, ambos, o ninguno.
• Groups (Grupos): Usa la etiqueta <g> para agrupar elementos relacionados. Esto mantiene tu SVG organizado y más fácil de editar posteriormente.

Consejos para crear archivos SVG limpios

• Mantén las rutas sencillas: Menos puntos = tamaño de archivo más reducido y edición más sencilla
• Usa colores con nombre o códigos hexadecimales en lugar de rgba() para una mejor compatibilidad
• Convierte el texto a rutas (outlines) antes de exportar si usas fuentes personalizadas que no estén instaladas en el dispositivo de la persona que lo visualice
• Elimina los metadatos innecesarios — las herramientas de diseño suelen añadir datos específicos del editor que aumentan el tamaño del archivo sin utilidad
• Configura un viewBox correcto — sin él, tu SVG no escalará bien en diferentes contextos

Después de crear tu SVG

Una vez que tengas tu archivo SVG, puede que necesites convertirlo a otros formatos para diferentes usos. Nuestro convertidor gratuito de SVG a PNG te permite exportar tu SVG a cualquier resolución — ideal para publicaciones en redes sociales, materiales impresos o cualquier contexto que requiera un formato rasterizado. Todo el procesamiento se realiza en tu navegador, sin necesidad de subir el archivo a ningún servidor.

Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años creando interfaces y sistemas de diseño. Desarrollé SVG2PNG después de cansarme de que los activos de clientes estuvieran alojados en servidores aleatorios. Más sobre mí →