Cómo crear una imagen SVG escalable para la web

Si trabajas con imágenes para la web, tarde o temprano necesitas crear una imagen SVG escalable que se vea perfecta en cualquier pantalla, cargue rápido y no penalice el rendimiento de tu sitio. El típico PNG o JPG cumple en muchas situaciones, pero cuando el logo se ve borroso en una tele 4K o tus iconos pierden nitidez en un móvil nuevo, es cuando descubres que lo que realmente necesitas son gráficos vectoriales.

Los SVG (Scalable Vector Graphics) se han convertido en el formato estrella para logotipos, iconos, ilustraciones, infografías y animaciones ligeras. Son textos en XML que el navegador interpreta y dibuja en tiempo real, de modo que se pueden escalar sin pérdida de calidad, modificar con CSS o JavaScript y optimizar para SEO y accesibilidad. Vamos a ver, con calma pero sin rodeos, cómo funciona el formato, cómo crearlos desde cero o a partir de un JPG/PNG, cómo integrarlos en tu web y cómo exprimirlos al máximo.

Qué es un archivo SVG y por qué es escalable

SVG significa Scalable Vector Graphics, es decir, gráficos vectoriales que se pueden escalar sin perder definición. A diferencia de JPG o PNG, que guardan información de cada píxel, un SVG almacena instrucciones de dibujo: líneas, curvas, colores y posiciones en forma de código XML. El navegador lee esas instrucciones y “redibuja” la imagen a la resolución que necesite el dispositivo.

Esta forma de funcionar hace que un mismo archivo SVG se vea igual de nítido en un móvil, en un monitor 4K o en una valla publicitaria. No hay píxeles que estirar ni que interpolar; lo que se redimensiona son las matemáticas que definen las formas. Además, al ser texto, el archivo se puede abrir y editar con cualquier editor de código, automatizar, comprimir y hasta manipular desde JavaScript.

Los SVG son independientes de la resolución, muy ligeros para gráficos simples y compatibles con todos los navegadores modernos. Chrome, Firefox, Safari, Edge y Opera soportan el formato de forma nativa desde hace años. Incluso Internet Explorer 9 y posteriores aceptan SVG, aunque con ciertas limitaciones en características muy avanzadas.

Eso sí, los SVG no son la panacea para todo tipo de imagen. Cuando hablamos de fotografías complejas, con millones de colores y mucho detalle, un JPG bien comprimido suele ser más eficiente. Intentar vectorizar una foto completa suele generar un SVG gigante, difícil de optimizar y nada práctico para su uso real.

Raster vs vector: diferencias entre SVG, JPG y PNG

Para entender cuándo conviene crear una imagen SVG escalable, hay que tener clara la diferencia entre imágenes ráster y vectoriales. JPG, PNG y GIF son formatos de mapa de bits: almacenan una rejilla de píxeles con colores fijos. SVG, EPS, AI o PDF (en su parte vectorial) describen formas matemáticas.

En una imagen ráster, si aumentas mucho el tamaño, los píxeles se hacen visibles y aparece el típico efecto de “escalera”. Esa pérdida de calidad es inevitable cuando intentas forzar una resolución que la imagen original no tiene. En cambio, un SVG se puede ampliar tanto como quieras porque lo que se amplía es la fórmula que dibuja cada línea.

JPG es ideal para fotos porque comprime muy bien las variaciones de color, a costa de perder algo de calidad. PNG, por su parte, mantiene la calidad (compresión sin pérdida) y soporta transparencia, por lo que es perfecto para gráficos con fondo transparente, capturas o elementos de interfaz que no necesiten escalarse demasiado.

SVG brilla cuando hablamos de iconos, logotipos, ilustraciones, esquemas, gráficos, infografías y animaciones sencillas. Para este tipo de contenido, un PNG suele pesar más, se ve peor al ampliarlo y no se puede manipular con CSS de forma tan flexible. Por eso el ecosistema web se ha volcado con SVG en todos los elementos de interfaz modernos.

Usos habituales de las imágenes SVG escalables

En diseño y desarrollo web, el SVG se usa sobre todo para elementos que deben mantener la máxima nitidez en cualquier dispositivo. No es raro que, en un mismo sitio, se utilicen decenas o cientos de SVG distribuidos en menús, secciones, botones, cabeceras o ilustraciones.

Los iconos son uno de los casos más claros donde el SVG arrasa. Iconos de redes sociales, menús hamburguesa, estrellas de valoración, iconos de carrito de compra… Todos ellos se benefician de la escalabilidad del formato. Puedes poner el mismo icono en pequeñito en el menú móvil y enorme en la página de precios sin que pierda detalle.

Los logotipos corporativos son otro uso crítico. Guardar el logo en SVG garantiza que se verá perfecto en el favicon, en el menú, en el slider de portada y en cualquier pieza de impresión. Además, un único archivo de origen se puede reutilizar para web, presentaciones, cartelería y tarjetas sin rehacerlo cada vez.

También es muy habitual usar SVG en infografías, gráficos de datos e ilustraciones personalizadas. Como el contenido es vectorial, las líneas del gráfico se ven limpias, el texto se puede mantener nítido y el archivo se adapta sin problemas a tablets, móviles y pantallas grandes.

Por último, los SVG permiten crear animaciones muy ligeras y fluidas. Puedes animar un icono que cambie de color al pasar el ratón, un loader que gire de forma infinita, o incluso gráficos que reaccionen al scroll o a la interacción del usuario usando CSS, SMIL o JavaScript.

Herramientas para crear una imagen SVG escalable

Para generar archivos SVG puedes partir de cero en un editor vectorial o convertir imágenes ya existentes en formato ráster o vectorial. La elección dependerá de si quieres un diseño completamente nuevo o si ya tienes un logo en JPG/PNG que quieres vectorizar.

Los programas más habituales para diseñar y exportar SVG son Adobe Illustrator, Inkscape, CorelDRAW, Figma y Sketch. Todos ellos trabajan con vectores como base y permiten guardar en SVG con distintos niveles de control sobre el tamaño, las fuentes o el tipo de exportación. Si buscas más opciones, consulta una lista de programas para crear imágenes vectoriales.

Adobe Illustrator es el estándar profesional en muchas agencias y estudios. Permite dibujar con la herramienta Pluma, organizar el diseño en capas, usar efectos avanzados, tipografía de alta calidad y luego exportar a SVG ajustando opciones como incrustar o enlazar fuentes, estilo CSS interno o externo, y nivel de compatibilidad.

Inkscape es la alternativa gratuita y de código abierto que cubre prácticamente todo lo que un diseñador medio necesita. Dispone de herramientas de formas, nodos, texto, gradientes, filtros y también de exportación directa a SVG, que además suele generar código bastante limpio.

Figma y Sketch, muy populares en diseño de interfaces, también permiten exportar iconos y componentes como SVG. Son perfectos si ya trabajas tu UI en estas herramientas porque puedes llevar tus iconos directamente al código sin pasos intermedios.

Convertir imágenes JPG o PNG en SVG

Muchas veces no empiezas de cero, sino que ya tienes un logo o dibujo en JPG, PNG o PDF y necesitas un SVG escalable. En estos casos hay dos caminos: vectorizar automáticamente con una herramienta de trazado o redibujar el gráfico a mano con la Pluma.

Las herramientas de trazado automático convierten los píxeles en formas vectoriales de forma rápida, pero con resultados desiguales. Para logos simples, en un solo color o con pocos detalles, funcionan bastante bien y te ahorran tiempo. En gráficos complejos, generan miles de nodos y un SVG muy pesado y difícil de editar. Si necesitas profundizar en métodos manuales, revisa técnicas de trazado y vectorización en Illustrator.

Algunas plataformas especializadas ofrecen servicios de vectorización manual. En estos servicios subes tu logo en JPG, PNG o PDF y un diseñador lo redibuja a mano en Illustrator con las fuentes correctas, entregándote un EPS/AI/SVG limpio y listo para impresión o web. Es la opción más fiable para logotipos de marca que deben quedar perfectos.

Si conviertes desde otros formatos vectoriales como EPS o AI, los conversores de SVG suelen respetar casi toda la información. En este caso se mantiene el color, las formas y la estructura de capas bastante fiel, siempre que no uses efectos extremadamente específicos de un programa concreto.

Cuando el origen es una foto o una imagen ráster muy compleja, la vectorización automática raramente ofrece un resultado útil. En este escenario, lo más razonable es mantener la foto en JPG o WebP y reservar el SVG para iconos, marcos, textos o elementos gráficos superpuestos.

Cómo crear un archivo SVG paso a paso

Si lo que quieres es diseñar tu propia imagen SVG escalable desde cero, el flujo de trabajo básico es bastante parecido en casi todos los editores vectoriales. Aquí te lo resumimos de forma genérica para que lo puedas aplicar tanto en Inkscape como en Illustrator o herramientas similares.

El primer paso es crear el lienzo o mesa de trabajo con unas dimensiones razonables. Aunque luego el SVG será escalable, conviene trabajar con “tamaños humanos” (por ejemplo, 500×500 px para un icono o 1200×600 px para una cabecera), porque eso hace más cómodo el diseño y ayuda a mantener proporciones.

Después viene la fase de dibujo. Utiliza la herramienta Pluma o Bezier para trazar contornos, líneas y curvas, y las herramientas de formas básicas (rectángulos, elipses, polígonos) para construir el diseño. Cada forma quedará registrada como una ruta o un conjunto de rutas en el XML del SVG.

Sobre esas rutas aplicas colores de relleno y de trazo, grosores de línea, esquinas redondeadas, degradados o patrones. Todos estos atributos se pueden traducir después a CSS, así que es recomendable no abusar de efectos raros que luego no se traduzcan bien al navegador.

Cuando tengas tu diseño listo, ajusta la mesa de trabajo o “artboard” al contenido. En la mayoría de programas hay una opción para encajar el lienzo a los límites del dibujo y evitar márgenes vacíos; esto ayuda a que el SVG no tenga espacio en blanco innecesario alrededor.

Por último, exporta o guarda como SVG. En el cuadro de diálogo de exportación suele haber opciones para simplificar rutas, incluir estilos como atributos en línea o como CSS, incrustar imágenes o fuentes, etc. Para web, normalmente interesa un SVG lo más limpio y ligero posible, sin metadatos superfluos.

Redimensionar y escalar un SVG sin perder calidad

La gran gracia del formato es que puedes cambiar el tamaño de un SVG sin que se pixele, pero eso no quiere decir que no haya que prestar atención a cómo se escala. El atributo clave en este proceso es el viewBox, que define el sistema de coordenadas interno del gráfico.

En el propio archivo SVG verás algo como viewBox=»0 0 100 100″. Eso indica que todo el dibujo está pensado en un cuadrado de 100×100 unidades. Si luego en HTML le dices al navegador que el SVG mida 200 px de ancho, el navegador simplemente multiplica esas unidades para encajar el contenido.

Para que un SVG sea realmente responsivo, lo habitual es eliminar los atributos width y height del elemento <svg> y dejar solo el viewBox. Luego, en CSS, se controla su comportamiento con algo tan sencillo como:

svg { display: inline-block; max-width: 100%; height: auto; }

Si necesitas cambiar el tamaño de muchos SVG de forma masiva y no quieres tocar código, existen herramientas en línea que actúan como “resize” para SVG. Estas utilidades permiten definir el nuevo tamaño en porcentaje o en unidades, aplicar la transformación y descargar la nueva versión escalada, sin necesidad de instalar software.

Cómo insertar un SVG en una página web

Una vez que tienes tu imagen SVG escalable, el siguiente paso es llevarla al navegador. Hay varias formas de hacerlo, y cada una te da un nivel de control diferente sobre estilos, accesibilidad y rendimiento.

La manera más básica y directa es usar la etiqueta <img> apuntando al archivo SVG externo. Por ejemplo: <img src=»logo.svg» alt=»Logo de la marca»>. Es la misma mecánica que con un JPG, solo que el navegador sabe que el recurso es vectorial.

Si quieres más control, puedes incrustar el propio código SVG dentro del HTML mediante la etiqueta <svg>. En ese caso, copias el contenido del archivo y lo pegas en el código de tu página. Eso te permite cambiar colores con CSS, añadir clases, manipular partes concretas con JavaScript y mejorar la accesibilidad.

Otra opción menos usada hoy, pero aún válida, es utilizar <object> o <embed> para cargar el SVG como recurso externo incrustado. Tiene algunas limitaciones a nivel de estilo y accesibilidad, por lo que en la práctica casi todo el mundo prefiere <img> o SVG inline.

En gestores de contenido como WordPress, por defecto no se permiten subir SVG por motivos de seguridad. Es fácil habilitarlos instalando plugins como Safe SVG o SVG Support, que se encargan de sanitizar el archivo para evitar que contenga scripts maliciosos y permiten usarlos desde la biblioteca de medios igual que cualquier otra imagen.

Estilizar y animar SVG con CSS y código

Una de las ventajas más potentes de tener una imagen SVG escalable es que se puede tratar como si fuera parte del propio DOM de la página. Eso significa que podemos aplicar estilos con CSS y crear animaciones con CSS, SMIL o JavaScript sin tocar el archivo base.

Si incrustas el SVG inline (no como <img> externa), puedes cambiar el color de relleno y el trazo directamente con CSS. Por ejemplo: svg path { fill: red; stroke: blue; }. Esto permite, por ejemplo, reutilizar el mismo archivo para mostrar el logo en un color en la cabecera y en otro distinto en el pie de página.

El atributo fill define el color de la zona interior de la forma y stroke controla el color y grosor del contorno. También puedes modificar propiedades como stroke-width, stroke-dasharray o stroke-linecap para conseguir efectos de dibujo a mano o líneas punteadas.

Para animaciones sencillas, CSS es más que suficiente. Puedes hacer que un icono cambie de color al pasar el ratón, que gire, que pulse ligeramente o que se desplace utilizando transformaciones y transiciones estándar.

Si necesitas algo más elaborado, el propio estándar SVG incluye elementos como <animate> que permiten animar atributos en el tiempo. Por ejemplo, hacer que un círculo se mueva de un lado a otro cambiando su posición cx durante cinco segundos, en bucle, sin necesidad de scripts externos.

Para animaciones complejas e interactivas, JavaScript (o librerías específicas) te permite conectar el SVG con eventos de usuario. Puedes mover partes del gráfico al hacer clic, sincronizar animaciones con el scroll o cambiar el aspecto según los datos que reciba la página, lo que abre la puerta a visualizaciones de datos muy ricas.

Sprites SVG y optimización del rendimiento

Cuando un sitio web usa decenas o cientos de iconos, cargar cada SVG por separado supone muchas peticiones HTTP. Para reducir ese número y acelerar la carga, es muy útil recurrir a los sprites SVG o a estrategias similares de agrupación.

Un sprite SVG es básicamente un gran archivo que contiene muchos iconos definidos dentro de elementos <symbol>. Luego, en cada parte de tu HTML en la que quieras mostrar un icono, utilizas <svg><use xlink:href=»#id-del-icono»></use></svg>. De esta forma, el navegador descarga una sola vez el sprite y reutiliza los iconos internamente.

Esta técnica recorta de forma importante el número de solicitudes al servidor, lo que reduce la latencia y mejora la experiencia de usuario, sobre todo en conexiones móviles. Además, sigues manteniendo la capacidad de cambiar colores y tamaños por CSS.

Más allá de los sprites, hay herramientas específicas para comprimir y optimizar SVG. Utilidades como SVGO o su versión web SVGOMG analizan el código, eliminan metadatos, espacios, atributos innecesarios, puntos redundantes en las rutas y todo aquello que no afecta al resultado visual.

Muchos editores vectoriales también incluyen funciones internas de simplificación de rutas. Reducir el número de nodos en curvas complejas no solo disminuye el peso del archivo, sino que facilita su edición posterior y evita que el navegador tenga que calcular trazados excesivamente intrincados.

En páginas con muchos gráficos bajo el pliegue, es buena idea combinar SVG con técnicas de carga diferida (lazy load). Aunque los SVG suelen ser ligeros, no tiene sentido cargar de golpe todos los iconos y gráficos que el usuario no va a ver hasta que haga scroll varios cientos de píxeles.

Compatibilidad, SEO y accesibilidad en SVG

A nivel de compatibilidad, el panorama actual es muy cómodo: todos los navegadores modernos soportan SVG de forma amplia. Chrome, Firefox, Safari, Edge y Opera muestran gráficos SVG sin problemas en escritorio y en móvil, y la penetración de navegadores realmente antiguos es ya muy baja en la mayoría de proyectos.

El verdadero punto diferenciador del SVG frente a un JPG o PNG es que su contenido es texto y, por tanto, legible por motores de búsqueda y tecnologías de asistencia. Eso lo convierte en un aliado interesante para el SEO y la accesibilidad, si se aprovechan las etiquetas y atributos adecuados.

Dentro de un elemento <svg> puedes incluir <title> y <desc> para describir el gráfico. Esos nodos se utilizan como información accesible para lectores de pantalla y también aportan contexto semántico al contenido del archivo, lo cual facilita la indexación.

El atributo role=»img» indica a las tecnologías de asistencia que el SVG actúa como una imagen, y aria-labelledby puede enlazar el SVG con el contenido de <title> y <desc>. En casos complejos, sigue siendo recomendable acompañar la imagen de un texto alternativo en el HTML o usar alt en <img> si la insertas como recurso externo.

Desde el punto de vista del rendimiento de búsqueda, usar SVG optimizados reduce el peso total de la página. Menos kilobytes implican tiempos de carga más bajos, lo que influye positivamente en métricas como LCP o FCP que Google tiene en cuenta dentro de los Core Web Vitals.

En proyectos donde aún haya usuarios con navegadores muy antiguos, se pueden implementar soluciones de reserva (fallback). Por ejemplo, servir un PNG equivalente mediante <picture> o condicionales específicos. Eso sí, en la práctica cada vez se necesitan menos estos remiendos.

Buenas prácticas al diseñar y gestionar archivos SVG

Crear una imagen SVG escalable no es solo “exportar a SVG”, también implica tener cierta disciplina de diseño y de código. Si cuidas la forma en la que nombras capas, simplificas rutas y estructuras el archivo, será más fácil de mantener y más eficiente en producción.

Es recomendable mantener el SVG ordenado, con sangría coherente y nombres de IDs y clases significativos. Por ejemplo, usar id=»icono-carrito» es mucho más útil que id=»path123″ cuando tienes que aplicar estilos concretos desde CSS o modificar un elemento con JavaScript.

Reducir al mínimo los elementos ocultos, capas sobrantes y atributos duplicados es otra de las claves. Muchos archivos generados directamente desde el programa de diseño arrastran información que no sirve para nada en la web y que se puede limpiar sin miedo con una pasada de SVGO o similar.

Cuando trabajes con muchos SVG en un proyecto, conviene organizarlos en carpetas lógicas y con nombres de archivo consistentes. Tener /svg/iconos/, /svg/logos/ e /svg/ilustraciones/ te ahorrará tiempo a la hora de localizar recursos y te facilitará automatizar procesos de optimización.

A nivel visual, recuerda que los SVG deben verse bien tanto en pantallas convencionales como en pantallas retina de alta densidad. Trabajar con formas claras, contrastes adecuados y textos no demasiado pequeños es esencial para asegurar legibilidad en todo tipo de dispositivos.

Si vas a utilizar fuentes tipográficas dentro del SVG, plantéate si te interesa convertir el texto en contornos o mantenerlo como texto vivo. Convertirlo en curvas garantiza que se verá igual aunque el usuario no tenga esa fuente instalada, pero pierde accesibilidad y posibilidad de edición; mantenerlo como texto protege la semántica, a cambio de depender de la fuente disponible.

Un SVG bien construido es ligero, legible, accesible y fácil de reutilizar en diferentes contextos. Combinando buenas prácticas de diseño, herramientas de optimización y una integración correcta en el HTML y el CSS, puedes sacarle muchísimo partido a este formato para iconos, logos, gráficos y animaciones, elevando tanto la calidad visual de tu web como su rendimiento y su capacidad para adaptarse a cualquier pantalla.