Figma es una herramienta de trabajo colaborativo que sirve para diseñar interfaces de usuario.
La aplicación ofrece la posibilidad de instalar extensiones para agilizar algunas tareas.
Mediante el uso del plugin html.to.design podemos convertir de forma automática una página web a un archivo de diseño de Figma.
¿Cómo utilizar la extensión html to design de Figma?
Archivo de diseño
Creamos un nuevo archivo de diseño de Figma haciendo clic sobre el botón que muestra la siguiente captura.
Panel de Recursos
Desde la barra de herramientas superior hacemos clic sobre la séptima opción que corresponde al icono de Recursos y mediante el cual desplegaremos un submenú desde el que podremos acceder a la búsqueda de plugins.
En éste caso si escribimos en el cuadro de búsqueda html se nos irán listando las diferentes opciones que correspondan al criterio de búsqueda.
Hacemos clic en Run de la extensión a ejecutar.
Importar Sitio Web
El plugin nos ofrece varias opciones de importación pero partiendo del supuesto de que muchas veces no contamos más que con la dirección pública del sitio recurriremos a esta opción.
Introducimos la dirección del sitio web y hacemos clic en Importar.
Diseño Figma Importado
La fidelidad del resultado dependerá de la cantidad de elementos bloqueantes que existan en la página aunque incluso siendo así ahorraremos tiempo de trabajo.
Crear una estructura HTML5 con CSS Grid es una de las formas más claras y mantenibles de empezar a maquetar una página web moderna. Si estás aprendiendo desarrollo frontend, seguramente ya te hayas encontrado con etiquetas como header, main, aside o footer, y también con propiedades como display: grid, grid-template-columns o grid-template-areas.
El problema es que muchas veces estos conceptos se explican por separado. Por un lado, se habla de la estructura básica de HTML5. Por otro, se muestran ejemplos aislados de CSS Grid Layout. Sin embargo, lo realmente útil es entender cómo se combinan ambas partes para construir una página sencilla, semántica y adaptable a distintos tamaños de pantalla.
En este artículo vamos a ver cómo maquetar con CSS Grid una estructura básica formada por cabecera, contenido principal, barra lateral y pie de página. Lo haremos paso a paso, explicando el HTML, el CSS, la lógica de las áreas del grid y cómo convertir el diseño en un layout responsive con CSS Grid.
La idea no es solo copiar y pegar código, sino entender qué está pasando en cada parte para que puedas adaptar esta base a tus propios proyectos.
Qué vamos a construir con HTML5 y CSS Grid Layout
Vamos a crear una estructura clásica de página web compuesta por cuatro zonas principales:
una cabecera o header;
una zona de contenido principal con main;
una barra lateral con aside;
un pie de página con footer.
Visualmente, en escritorio tendremos una estructura parecida a esta:
Esta es una de las ventajas principales de CSS Grid: permite definir una estructura visual clara sin alterar el orden semántico del HTML.
Es decir, podemos mantener un documento bien organizado para personas, navegadores, lectores de pantalla y buscadores, mientras adaptamos su distribución visual mediante CSS. Para reforzar esta parte desde la base, también puedes leer el artículo sobre HTML semántico y accesibilidad web, porque la estructura del documento influye directamente en cómo se interpreta una página.
Por qué usar una estructura básica HTML5
Antes de escribir el CSS, merece la pena detenernos en el HTML. A veces se piensa que maquetar consiste simplemente en colocar cajas en pantalla, pero una buena página web empieza mucho antes: empieza con una estructura clara.
HTML5 introdujo etiquetas semánticas que ayudan a describir mejor las partes de una página. En lugar de usar únicamente div, podemos utilizar elementos que tienen significado propio.
HTML5 no solo organiza: también comunica
Cuando usamos una etiqueta como main, estamos indicando que ahí se encuentra el contenido principal de la página. Cuando usamos aside, estamos diciendo que ese contenido es complementario. Y cuando usamos footer, estamos marcando una zona de cierre o información secundaria.
Esto mejora varios aspectos:
la accesibilidad, porque las tecnologías de asistencia pueden interpretar mejor la página;
la legibilidad del código, porque otros desarrolladores entienden antes la estructura;
el SEO técnico, porque el contenido principal queda mejor identificado;
el mantenimiento, porque cada zona tiene una responsabilidad clara.
Dicho de otra manera: una buena estructura básica HTML5 no consiste en llenar la página de etiquetas modernas, sino en elegir las etiquetas adecuadas para cada bloque de contenido.
El error de usar div para todo
Durante mucho tiempo, muchas maquetas web se construían casi exclusivamente con div. Técnicamente funcionaba, pero el resultado era menos expresivo:
Ambas versiones pueden verse igual con CSS, pero no significan lo mismo. La segunda versión es más clara, más semántica y más alineada con las buenas prácticas actuales.
Semántica no significa complicar el código
Un error frecuente es pensar que usar HTML semántico hace que el código sea más complejo. En realidad, suele ocurrir lo contrario. Cuando cada bloque tiene una etiqueta adecuada, el documento se entiende mejor y resulta más fácil de mantener.
La semántica no añade decoración ni comportamiento visual por sí misma. Su función es dar significado. Después, CSS se encarga de decidir cómo se presenta ese contenido en pantalla.
Código HTML de una estructura básica con CSS Grid
Empecemos con el HTML completo. La estructura será sencilla para que puedas entender bien la relación entre cada elemento y su área dentro del grid.
Este ejemplo ya contiene una base sólida. Tenemos un contenedor general llamado .layout y dentro de él cuatro áreas principales.
Qué representa cada etiqueta
Header
La etiqueta header representa la cabecera de la página o de una sección. Puede incluir el logotipo, el título del sitio, un menú de navegación o una introducción.
En este ejemplo contiene un h1, pero en una página real también podría incluir una navegación principal.
Main
La etiqueta main representa el contenido principal del documento. Es importante recordar que, por norma general, debería haber un único main por página.
Aquí es donde colocaríamos el contenido más relevante. En un blog, por ejemplo, sería el artículo. En una landing, podría ser la propuesta principal de valor.
Aside
La etiqueta aside se utiliza para contenido complementario. No debería contener información imprescindible para entender la página, sino elementos relacionados o secundarios.
Por ejemplo, una barra lateral puede incluir enlaces a artículos relacionados, categorías, filtros, anuncios, una biografía del autor o llamadas a la acción.
Footer
La etiqueta footer suele contener información de cierre: derechos de autor, enlaces legales, contacto, redes sociales o navegación secundaria.
No tiene por qué aparecer solo al final de una página completa. También puede existir un footer dentro de una tarjeta, artículo o sección, siempre que tenga sentido semántico.
Cómo maquetar con CSS Grid paso a paso
Una vez que tenemos el HTML, llega el momento de aplicar CSS. Aquí es donde entra en juego CSS Grid Layout.
CSS Grid nos permite crear filas y columnas de forma precisa. A diferencia de otros sistemas de maquetación más antiguos, no necesitamos usar float, tablas ni soluciones forzadas para construir una estructura de página.
Activar CSS Grid en el contenedor
La primera propiedad importante es display: grid.
.layout {
display: grid;
}
Con esta línea convertimos .layout en un contenedor grid. Sus hijos directos —header, main, aside y footer— pasan a comportarse como elementos de esa cuadrícula.
Pero, por ahora, el navegador todavía no sabe cómo queremos repartir las zonas. Para eso necesitamos definir columnas, filas y áreas.
Definir columnas y filas
Podemos empezar con una estructura de dos columnas:
Aquí estamos diciendo que la primera columna ocupará el espacio disponible gracias a 1fr, mientras que la segunda tendrá un ancho fijo de 280px.
La unidad fr significa fracción del espacio disponible. Es muy útil porque nos permite crear diseños flexibles sin depender siempre de porcentajes rígidos.
En este caso, la primera fila mide lo que necesite el header, la segunda ocupa el espacio principal disponible y la tercera mide lo que necesite el footer.
Usar grid-template-areas
Una de las formas más claras de crear una estructura HTML5 con CSS Grid es utilizar grid-template-areas.
Esta propiedad permite nombrar zonas del layout y dibujarlas de forma visual en el CSS.
Este bloque es muy expresivo. Podemos leerlo casi como un esquema:
"header header"
"content sidebar"
"footer footer"
La cabecera ocupa dos columnas. El contenido principal ocupa la primera columna. La barra lateral ocupa la segunda. El pie de página vuelve a ocupar todo el ancho.
Esta es una de las razones por las que grid-template-areas resulta tan útil en layouts básicos: permite entender la estructura de un vistazo.
Asignar cada elemento HTML a su área del grid
Una vez definidas las áreas, necesitamos decirle a cada elemento dónde debe colocarse.
Cada valor de grid-area debe coincidir con uno de los nombres definidos en grid-template-areas.
Es importante que los nombres sean claros. Podrías usar nombres como top, left o box1, pero no serían tan descriptivos. En cambio, header, content, sidebar y footer explican perfectamente la función de cada zona.
Este ejemplo ya crea una maqueta funcional, clara y fácil de modificar. No es un diseño visual complejo, pero sí una base muy útil para entender cómo maquetar con CSS Grid de forma ordenada.
Después puedes añadir microinteracciones o pequeños efectos visuales al diseño con recursos como las animaciones CSS o revisar la diferencia entre transition y animation en CSS. Eso sí: primero conviene tener una estructura sólida; los efectos deberían reforzar la experiencia, no esconder una maqueta confusa.
Cómo crear un layout responsive con CSS Grid
Hasta ahora tenemos una estructura pensada para pantallas medianas o grandes. Pero una web actual debe funcionar correctamente en móvil, tablet y escritorio.
Aquí entra otro punto importante: un layout responsive con CSS Grid no tiene por qué ser complicado. Podemos reorganizar las áreas modificando grid-template-areas dentro de una media query.
Adaptar la estructura a pantallas pequeñas
En móvil, normalmente no queremos mantener dos columnas. Una barra lateral al lado del contenido puede quedarse demasiado estrecha y generar problemas de lectura.
Con este cambio, todos los bloques se colocan uno debajo del otro.
Lo interesante es que no hemos tenido que tocar el HTML. Solo hemos cambiado la distribución visual desde CSS.
Por qué esto es importante
Separar estructura y presentación es una de las ideas más importantes del desarrollo web.
El HTML debe mantener un orden lógico. El CSS puede encargarse de adaptar la presentación según el espacio disponible.
Esto evita un error muy común: reorganizar el HTML solo para conseguir un efecto visual concreto. Si hacemos eso, podemos perjudicar la accesibilidad, la lectura del contenido y el mantenimiento del proyecto.
Este mismo enfoque también es útil cuando trabajamos con ilustraciones, tarjetas o bloques visuales que deben adaptarse a distintos tamaños de pantalla. Para profundizar en esa idea desde una perspectiva más visual, puedes leer el artículo sobre cómo dibujar con CSS responsive.
Buenas prácticas al trabajar con CSS Grid Layout
CSS Grid es muy potente, pero conviene usarlo con criterio. No se trata de convertir cualquier pequeño componente en una cuadrícula compleja, sino de elegir la herramienta adecuada para cada caso.
Mantén el HTML en un orden lógico
Aunque CSS Grid permite colocar elementos visualmente en posiciones diferentes, no deberíamos abusar de esa capacidad.
Por ejemplo, si el contenido principal aparece antes que la barra lateral en el HTML, lo habitual es mantener ese orden también en la experiencia de lectura. Esto ayuda especialmente a quienes navegan con teclado o usan lectores de pantalla.
El diseño visual no debería contradecir la lógica del documento.
Evita alturas fijas innecesarias
En muchos ejemplos antiguos de CSS Grid se usan alturas fijas como height: 500px. Para una demostración rápida puede servir, pero en una web real suele ser mejor usar soluciones más flexibles.
Por ejemplo:
min-height: 100vh;
Esta propiedad permite que el layout ocupe al menos toda la altura de la ventana, pero sin impedir que crezca si el contenido necesita más espacio.
Usa nombres de áreas fáciles de entender
grid-template-areas funciona mejor cuando los nombres de las áreas son claros.
La segunda versión funciona, pero obliga a interpretar el código. La primera se entiende prácticamente sola.
No uses CSS Grid para absolutamente todo
CSS Grid es ideal para layouts en dos dimensiones: filas y columnas. Sin embargo, para alinear elementos en una sola dirección, muchas veces Flexbox sigue siendo una opción más sencilla.
Por ejemplo, para distribuir enlaces dentro de un menú horizontal, probablemente Flexbox sea suficiente. Para construir la estructura general de una página, CSS Grid suele ser más claro.
CSS Grid vs Flexbox: cuándo usar cada uno
Una duda habitual al aprender maquetación moderna es cuándo usar CSS Grid y cuándo usar Flexbox.
No hay una única respuesta, pero sí una regla práctica bastante útil.
Usa CSS Grid para la estructura general
CSS Grid funciona muy bien cuando necesitas controlar filas y columnas al mismo tiempo. Por ejemplo:
layouts de página;
galerías;
dashboards;
estructuras con sidebar;
tarjetas distribuidas en varias columnas;
zonas visuales con áreas diferenciadas.
En este artículo lo usamos para definir una estructura completa: cabecera, contenido, barra lateral y footer.
Usa Flexbox para alineaciones internas
Flexbox suele ser más cómodo cuando trabajas en una sola dirección: fila o columna.
Por ejemplo:
alinear elementos de navegación;
centrar un botón con un icono;
distribuir elementos dentro de una tarjeta;
separar contenido con justify-content: space-between;
ordenar elementos pequeños dentro de un componente.
En proyectos reales, lo habitual es combinar ambas herramientas. Puedes usar CSS Grid para la estructura principal y Flexbox para detalles internos.
Ejemplo completo: HTML5 y CSS Grid Layout
A continuación tienes el ejemplo completo, listo para probar.
Este ejemplo resume la base de una estructura HTML5 con CSS Grid moderna: semántica, legible, responsive y fácil de ampliar.
Errores comunes al maquetar con CSS Grid
Aunque CSS Grid simplifica mucho la creación de layouts, hay algunos errores que conviene evitar desde el principio.
Confundir Grid con una solución mágica
CSS Grid es potente, pero no sustituye la necesidad de pensar la estructura. Antes de escribir CSS, conviene preguntarse:
¿cuál es el contenido principal?
¿qué contenido es complementario?
¿qué orden tiene sentido en el HTML?
¿cómo debería adaptarse en móvil?
¿qué bloques deben ocupar más espacio?
Una buena maqueta no empieza con propiedades CSS, sino con decisiones de contenido.
Crear demasiadas áreas
grid-template-areas es muy cómodo, pero no hace falta usarlo para cada pequeño elemento. Es ideal para zonas grandes del layout, no necesariamente para cada botón, icono o texto interno.
Si el grid empieza a parecer un mapa imposible de mantener, quizá estás intentando resolver demasiado desde una sola cuadrícula.
Olvidar el responsive
Un diseño de dos columnas puede verse perfecto en escritorio y romperse por completo en móvil. Por eso es importante probar pronto cómo se comporta el layout en pantallas pequeñas.
En muchos casos, la solución será tan sencilla como cambiar a una columna, pero no deberíamos dejar esa decisión para el final.
Pensar solo en lo visual
Maquetar no consiste únicamente en colocar cajas bonitas. También implica cuidar el orden del contenido, la accesibilidad, la legibilidad y la experiencia de uso.
Una estructura puede verse bien y, aun así, estar mal organizada. Por eso conviene trabajar siempre con HTML semántico y CSS mantenible.
Cómo ampliar esta estructura en un proyecto real
El ejemplo que hemos visto es básico, pero puede crecer fácilmente.
También podrías transformar el main en una zona de artículos, tarjetas o secciones internas.
<main class="content">
<article>
<h2>Título del artículo</h2>
<p>Contenido del artículo...</p>
</article>
</main>
O podrías usar el aside para mostrar contenido relacionado:
<aside class="sidebar">
<h2>También te puede interesar</h2>
<ul>
<li><a href="#">Guía de HTML semántico</a></li>
<li><a href="#">Introducción a CSS Grid</a></li>
<li><a href="#">Cómo crear layouts responsive</a></li>
</ul>
</aside>
La clave está en conservar una estructura clara. Cuanto más crece una página, más importante se vuelve que cada bloque tenga una función reconocible.
Preguntas frecuentes sobre estructura HTML5 con CSS Grid
¿Qué es una estructura HTML5 con CSS Grid?
Una estructura HTML5 con CSS Grid es una forma de organizar una página usando etiquetas semánticas de HTML5, como header, main, aside y footer, junto con CSS Grid para distribuir visualmente esas zonas en filas y columnas.
La ventaja es que separa muy bien el significado del contenido y su presentación visual. HTML define qué es cada parte. CSS Grid define dónde y cómo se muestra.
¿Es mejor usar CSS Grid o Flexbox para maquetar una página?
Para la estructura general de una página, normalmente CSS Grid Layout resulta más adecuado porque permite trabajar con filas y columnas al mismo tiempo. Para alinear elementos internos en una sola dirección, Flexbox suele ser más sencillo.
En la práctica, no tienes que elegir solo uno. Lo habitual es usar CSS Grid para el layout principal y Flexbox para componentes internos, como menús, botones o tarjetas.
¿Se puede crear un layout responsive con CSS Grid?
Sí. De hecho, crear un layout responsive con CSS Grid suele ser bastante limpio. Puedes definir una estructura de dos columnas para escritorio y cambiarla a una sola columna en móvil mediante una media query.
La propiedad grid-template-areas facilita mucho este proceso porque permite reorganizar visualmente las zonas sin modificar el HTML.
Una base sencilla para construir layouts más claros
Aprender a maquetar con CSS Grid no consiste solo en memorizar propiedades. Lo importante es entender cómo se relacionan la estructura, el contenido y la presentación visual.
HTML5 nos ayuda a construir documentos con significado. CSS Grid nos permite distribuir ese contenido con precisión. Cuando combinamos ambas herramientas, obtenemos layouts más claros, más accesibles y más fáciles de mantener.
Una estructura básica HTML5 con cabecera, contenido principal, barra lateral y footer puede parecer sencilla, pero es una base excelente para comprender cómo se organizan muchas páginas reales. A partir de ahí, puedes añadir navegación, tarjetas, secciones, componentes, contenido dinámico o estilos más elaborados.
La clave está en no empezar por la decoración, sino por la arquitectura del contenido. Primero define qué es cada bloque. Después decide cómo debe comportarse en pantalla. Y, por último, ajusta los detalles visuales.
CSS Grid no solo sirve para crear diseños más modernos. Bien utilizado, también te ayuda a pensar mejor la estructura de una página web.
Los gráficos SVG son uno de esos recursos que parecen sencillos a primera vista, pero que pueden marcar una gran diferencia en la calidad visual, el rendimiento y la flexibilidad de una web. Durante mucho tiempo se han utilizado sobre todo para logotipos e iconos, pero su utilidad va mucho más allá.
En una web moderna, donde el diseño debe adaptarse a móviles, tablets, pantallas de alta resolución y distintos modos de visualización, trabajar con imágenes flexibles no es un detalle menor. Es una decisión técnica y visual importante.
A diferencia de formatos como JPG o PNG, los SVG no se construyen a partir de píxeles, sino de vectores. Esto significa que pueden ampliarse o reducirse sin perder nitidez. Por eso son especialmente útiles para iconos, logotipos, ilustraciones simples, gráficos, patrones decorativos, mapas o elementos de interfaz.
Además, al estar basados en código, los SVG pueden integrarse con HTML, CSS y JavaScript. Esto abre la puerta a personalizaciones, animaciones, cambios de color, adaptación a temas visuales y reutilización dentro de sistemas de diseño.
Ahora bien, usar SVG no significa automáticamente mejorar una web. Como ocurre con cualquier recurso frontend, conviene entender cuándo utilizarlo, cómo optimizarlo y qué errores evitar. En este artículo veremos qué son los gráficos SVG, cuáles son sus principales ventajas y desventajas, cómo insertarlos correctamente en una página web y qué buenas prácticas conviene aplicar.
Qué son los gráficos SVG
SVG significa Scalable Vector Graphics, es decir, gráficos vectoriales escalables. Se trata de un formato basado en XML que permite describir imágenes mediante formas, líneas, curvas, colores, textos y coordenadas.
Mientras una imagen JPG o PNG guarda información en forma de píxeles, un SVG describe la imagen mediante instrucciones. El navegador interpreta esas instrucciones y dibuja el resultado en pantalla.
Por ejemplo, un círculo en SVG puede escribirse así:
Este fragmento genera un círculo. Lo interesante es que ese círculo puede mostrarse en diferentes tamaños sin perder definición, porque no depende de una resolución fija.
Esta es la gran diferencia entre una imagen vectorial y una imagen rasterizada. Si ampliamos demasiado una imagen basada en píxeles, tarde o temprano aparecerá el típico efecto borroso o pixelado. En cambio, un SVG se recalcula y se redibuja, manteniendo sus bordes limpios.
SVG frente a PNG, JPG y otros formatos
Para elegir bien un formato de imagen, no conviene pensar en términos absolutos. SVG no es mejor que PNG o JPG en todos los casos. Cada formato tiene su función.
Un archivo JPG suele ser adecuado para fotografías, imágenes realistas, fondos con muchas texturas y composiciones con gran cantidad de colores. Su compresión está pensada para este tipo de contenido.
Un archivo PNG funciona bien cuando necesitamos transparencia, bordes definidos o gráficos rasterizados con zonas planas de color. Durante años ha sido muy habitual en iconos, capturas de pantalla y elementos visuales con fondo transparente.
Un SVG, en cambio, es especialmente útil cuando la imagen puede representarse mediante formas. Por eso encaja tan bien en logotipos, iconos, gráficos vectoriales, ilustraciones simples y elementos decorativos.
La pregunta más útil antes de elegir un formato sería: ¿esta imagen funciona mejor como píxeles o como formas?
Si hablamos de una fotografía de producto, probablemente tenga más sentido usar JPG, WebP o AVIF. Si hablamos de un icono de búsqueda, una flecha, un logotipo o una ilustración plana, SVG suele ser una opción mucho más flexible.
Ventajas de usar SVG en la web
Los SVG ofrecen muchas ventajas en desarrollo web, pero su mayor valor aparece cuando se usan con intención. No se trata de cambiar todos los recursos gráficos por SVG, sino de identificar en qué casos aportan más que otros formatos.
Escalabilidad sin pérdida de calidad
La principal ventaja de SVG es su capacidad para escalar sin perder calidad. Esto resulta especialmente importante en interfaces responsive, donde un mismo recurso puede mostrarse en tamaños muy diferentes.
Un logotipo puede aparecer pequeño en la cabecera móvil, más grande en el footer y mucho más destacado en una sección hero. Si está en SVG, mantendrá la nitidez en todos esos contextos.
Esto también ayuda en pantallas de alta densidad de píxeles. Con imágenes rasterizadas, muchas veces necesitamos versiones en distintas resoluciones para evitar que se vean borrosas. Con SVG, normalmente basta con un único archivo bien construido.
Esta ventaja conecta directamente con una idea importante de diseño web: la interfaz debe adaptarse al contexto de uso. Si te interesa profundizar en esa parte, también puedes leer el artículo sobre navegación móvil y patrones para mejorar la experiencia de usuario.
Archivos ligeros en iconos e ilustraciones simples
Cuando un gráfico es sencillo, un archivo SVG puede ser muy ligero. Un icono formado por unas pocas rutas suele pesar menos que varias versiones PNG del mismo recurso.
Esto puede contribuir a reducir el peso total de una página, mejorar la carga y facilitar el mantenimiento de los recursos visuales.
Ahora bien, esta ventaja no siempre se cumple. Un SVG exportado directamente desde una herramienta de diseño puede contener metadatos innecesarios, grupos vacíos, estilos repetidos o rutas demasiado complejas.
Por eso es importante optimizar los SVG antes de subirlos a producción. Un SVG limpio puede ser un gran aliado. Un SVG mal exportado puede convertirse en un archivo pesado y difícil de mantener.
Integración con CSS y JavaScript
Una de las características más interesantes de SVG es que puede integrarse muy bien con CSS y JavaScript, especialmente cuando se inserta directamente en el HTML como SVG inline.
Esto permite modificar colores, tamaños, estados, animaciones o comportamientos sin necesidad de crear múltiples archivos.
La propiedad currentColor permite que el icono herede el color del texto. Esto es muy útil en botones, enlaces, menús y componentes reutilizables.
Así, un mismo icono puede adaptarse a distintos estados visuales, como hover, active, modo oscuro o variaciones de color dentro de un sistema de diseño.
Si estás trabajando la parte visual de una interfaz, este enfoque puede combinar muy bien con técnicas CSS más avanzadas, como las que explico en el artículo sobre cómo hacer un texto máscara sobre una imagen.
Coherencia visual en sistemas de diseño
Los SVG son especialmente útiles cuando trabajamos con sistemas de diseño. Permiten crear bibliotecas de iconos y recursos gráficos consistentes, con tamaños, grosores, colores y estilos controlados.
En un proyecto frontend, esto ayuda a mantener una interfaz más ordenada y coherente. No es lo mismo utilizar iconos descargados de distintas fuentes, con estilos mezclados, que trabajar con una colección SVG alineada con la identidad visual del producto.
Además, cuando los SVG se convierten en componentes, por ejemplo en React, pueden recibir propiedades para cambiar el tamaño, el color o el título accesible.
Este enfoque permite reutilizar iconos de forma más limpia y mantener el código más organizado.
Posibilidades de animación
Los SVG también pueden animarse. Es posible modificar el color, la opacidad, la posición, el trazo, el relleno o incluso simular que una línea se dibuja progresivamente.
Esto permite crear microinteracciones, loaders, gráficos dinámicos o ilustraciones animadas.
Por ejemplo, una animación sencilla de trazo puede dar la sensación de que un icono se está dibujando:
Eso sí, conviene recordar algo importante: no todo lo que se puede animar debería animarse. El movimiento en una interfaz debe tener una intención clara. Puede ayudar a dar feedback, guiar la atención o hacer más comprensible un cambio de estado, pero también puede añadir ruido.
Si quieres ampliar esta idea, puedes leer la guía básica sobre animaciones CSS, donde explico cómo usar el movimiento de forma más clara y accesible.
Desventajas y limitaciones del uso de SVG
Aunque los SVG tienen muchas ventajas, también tienen limitaciones. Utilizarlos sin criterio puede generar problemas de rendimiento, accesibilidad, mantenimiento o seguridad.
No son adecuados para fotografías
SVG no es el formato adecuado para fotografías ni imágenes muy complejas.
Una fotografía contiene miles o millones de variaciones de color, textura, luz y detalle. Si intentamos convertirla en SVG, el resultado puede ser un archivo enorme, difícil de editar y poco eficiente.
En estos casos, suele ser mucho más recomendable utilizar formatos como JPG, WebP o AVIF, dependiendo de las necesidades del proyecto.
SVG funciona mejor cuando la imagen es gráfica, no fotográfica.
Pueden ser pesados si son demasiado complejos
Un SVG puede ser muy ligero, pero también puede volverse pesado si contiene demasiadas rutas, filtros, máscaras, sombras o efectos complejos.
Esto ocurre con frecuencia cuando exportamos desde herramientas de diseño sin revisar el resultado. El archivo puede incluir información innecesaria, capas ocultas, nombres internos, estilos duplicados o demasiados decimales en las coordenadas.
Antes de subir un SVG a producción, es recomendable limpiarlo y optimizarlo. De esta forma, reducimos su peso y evitamos que el archivo contenga información que no aporta nada al resultado final.
Pueden generar riesgos de seguridad
Un SVG no es solo una imagen. Al estar basado en XML, puede contener código, enlaces, scripts o comportamientos que conviene controlar.
Por eso hay que tener especial cuidado cuando se permite subir SVG desde fuentes externas o usuarios no verificados. En gestores de contenido como WordPress, la subida de SVG suele estar restringida por motivos de seguridad.
La regla general es clara: no insertes SVG de origen desconocido sin revisarlo o sanitizarlo antes.
En un proyecto profesional, los SVG deben tratarse como código. Igual que revisarías un fragmento JavaScript antes de integrarlo, también conviene revisar un SVG antes de publicarlo.
Pueden estar mal implementados a nivel de accesibilidad
Los SVG pueden ser accesibles, pero no lo son automáticamente. Todo depende de cómo se usen.
Si un SVG es decorativo, lo habitual es ocultarlo a los lectores de pantalla:
En cambio, si el SVG transmite información relevante, necesita un nombre accesible. Para ello podemos usar role="img" junto con aria-label, o incluir un elemento <title> dentro del propio SVG.
Uno de los errores más habituales es usar botones con solo un icono visual, pero sin texto ni etiqueta accesible. Por ejemplo, un botón con una lupa puede ser evidente para una persona que ve la interfaz, pero no para quien navega con lector de pantalla.
En este caso, el nombre accesible lo tiene el botón. El SVG solo acompaña visualmente.
Este tipo de decisiones tiene mucho que ver con la usabilidad general de una web. Si te interesa este tema, puedes complementar la lectura con el artículo sobre qué es la usabilidad web y cómo facilitar la navegación del usuario.
Cómo insertar SVG en HTML
Existen varias formas de utilizar SVG en una página web. La mejor opción depende del contexto, del nivel de control que necesites y de cómo esté organizado tu proyecto.
Usar SVG como imagen externa
La forma más sencilla de insertar un SVG es usar la etiqueta img.
<img src="/images/logo.svg" alt="Nombre de la marca" />
Este método es limpio y fácil de mantener. Funciona muy bien para logotipos, ilustraciones o recursos que no necesitan manipularse internamente con CSS o JavaScript.
La ventaja es que el SVG se comporta como una imagen normal. La desventaja es que no puedes modificar fácilmente sus partes internas desde el CSS de la página.
Insertar SVG inline
Otra opción es pegar el código SVG directamente dentro del HTML.
Este enfoque da mucho más control. Permite cambiar colores, animar partes concretas, modificar estados y trabajar con el SVG como parte del DOM.
Es muy útil para iconos de interfaz, componentes reutilizables y animaciones. Sin embargo, si se abusa de SVG inline, el HTML puede crecer demasiado y volverse menos manejable.
Usar sprites SVG
Los sprites SVG permiten agrupar varios iconos en un solo archivo y reutilizarlos mediante symbol y use.
Este enfoque puede ser útil en proyectos con muchos iconos, aunque requiere organización. En proyectos actuales, muchas veces se sustituye por bibliotecas de componentes o colecciones de iconos integradas en el frontend.
Buenas prácticas para trabajar con SVG
Para que los gráficos SVG sean realmente útiles, conviene aplicar algunas buenas prácticas desde el principio.
Optimiza los SVG antes de publicarlos
No todos los SVG exportados desde herramientas de diseño están listos para producción. Antes de utilizarlos, revisa si contienen metadatos innecesarios, rutas demasiado complejas, estilos duplicados o dimensiones poco flexibles.
Un SVG optimizado será más ligero, más fácil de mantener y más adecuado para una web rápida.
Esta idea conecta con una regla básica del SEO técnico: una página más ligera y mejor estructurada suele ofrecer una experiencia más fluida. Si estás trabajando la optimización general de tu sitio, también puede interesarte el artículo sobre SEO on page para posicionar tu web en Google.
Usa correctamente el atributo viewBox
El atributo viewBox es fundamental para que un SVG sea escalable y responsive. Define el sistema de coordenadas interno del gráfico.
Gracias al viewBox, el SVG puede adaptarse a diferentes tamaños sin deformarse. Si un SVG no escala como esperas, revisar este atributo suele ser uno de los primeros pasos.
Evita dimensiones rígidas cuando no sean necesarias
En muchos casos, es mejor controlar el tamaño del SVG desde CSS en lugar de dejarlo cerrado con valores fijos de width y height.
.icon {
width: 1.5rem;
height: 1.5rem;
}
Esto facilita que el SVG se adapte a diferentes componentes, tamaños de texto y contextos visuales.
Usa currentColor para iconos
Cuando un icono debe heredar el color del texto, currentColor es una solución muy práctica.
.icon {
fill: currentColor;
}
Esto permite que el mismo icono funcione en botones, enlaces, estados hover, modo oscuro y diferentes temas visuales sin necesidad de duplicar archivos.
Cuida el contraste y la legibilidad
Que un icono esté en SVG no significa que sea automáticamente usable. Si el contraste entre el icono y el fondo es bajo, muchas personas pueden tener dificultades para verlo.
Esto es especialmente importante en botones, menús, avisos, formularios y elementos interactivos. Un buen SVG no solo debe verse bonito. También debe ser claro.
SVG, rendimiento y SEO
Los SVG pueden ayudar al rendimiento de una web, pero no lo hacen por arte de magia. Todo depende del tipo de gráfico, de cómo esté construido y de cómo se integre en la página.
Cuándo SVG puede mejorar el rendimiento
SVG puede mejorar el rendimiento cuando sustituye a imágenes rasterizadas pesadas en elementos simples. Por ejemplo, un icono PNG en varias resoluciones puede reemplazarse por un único SVG limpio y escalable.
También puede evitar la necesidad de cargar diferentes versiones de una misma imagen para distintos dispositivos o densidades de pantalla.
En una estrategia frontend bien pensada, esto ayuda a reducir duplicidades y simplificar la gestión de recursos visuales.
Cuándo SVG puede perjudicar el rendimiento
SVG puede perjudicar el rendimiento si contiene demasiadas rutas, filtros complejos, sombras, máscaras o animaciones innecesarias.
Los filtros SVG pueden ser costosos si se aplican sobre áreas grandes o si se animan constantemente. También hay que tener cuidado con repetir muchos SVG inline en una misma página, porque pueden aumentar el tamaño del HTML.
La idea no es usar SVG siempre, sino usarlo cuando realmente aporta valor.
SVG y posicionamiento SEO
Los SVG pueden contribuir indirectamente al SEO si ayudan a que la página sea más rápida, clara y accesible. Sin embargo, no conviene verlos como una técnica milagrosa de posicionamiento.
Para SEO, lo importante sigue siendo que el contenido esté bien estructurado, que las imágenes tengan sentido dentro del contexto, que los recursos no ralenticen la carga y que la información importante no quede escondida dentro de elementos visuales difíciles de interpretar.
Si usas un SVG como imagen, cuida el atributo alt. Si es decorativo, no lo sobrecargues con texto innecesario. Si transmite información relevante, asegúrate de que esa información también pueda entenderse fuera del elemento visual.
Casos de uso recomendados para SVG
SVG es especialmente útil en varios escenarios habituales del desarrollo web.
Iconos de interfaz
Los iconos son uno de los casos de uso más claros. Botones, menús, enlaces, tarjetas, etiquetas y estados de interfaz pueden beneficiarse de iconos SVG escalables y fáciles de personalizar.
Además, al poder adaptarse mediante CSS, encajan muy bien en componentes reutilizables.
Logotipos
Un logotipo en SVG mantiene su nitidez en cualquier tamaño. Puede verse bien tanto en una cabecera pequeña como en una sección destacada o en una pantalla de alta resolución.
También permite crear versiones adaptadas a distintos fondos o temas visuales.
Ilustraciones simples
Las ilustraciones con formas planas, colores definidos y pocos detalles funcionan muy bien en SVG. Son habituales en secciones hero, páginas de error, bloques explicativos, empty states o pantallas de onboarding.
Gráficos y visualizaciones
SVG también se utiliza en gráficos de datos, diagramas, mapas y visualizaciones interactivas. Permite representar elementos de forma precisa y manipularlos dinámicamente.
Patrones y fondos decorativos
Ondas, líneas, puntos, formas geométricas y patrones pueden crearse en SVG para dar personalidad visual a una interfaz sin depender de imágenes pesadas.
Cuándo no deberías usar SVG
Aunque SVG sea un formato muy útil, hay situaciones en las que no es la mejor opción.
No deberías usar SVG para fotografías reales, imágenes con mucho detalle, texturas complejas o composiciones con miles de variaciones de color. En esos casos, un formato rasterizado optimizado suele ser más adecuado.
Tampoco conviene usar SVG si el archivo resultante es más pesado que una alternativa en WebP, AVIF, JPG o PNG. La decisión debe basarse en el tipo de imagen y en el rendimiento real.
Además, si no tienes control sobre el origen del SVG, es importante revisarlo antes de integrarlo. Un SVG descargado de cualquier sitio o subido por usuarios debe sanitizarse antes de publicarse.
Errores comunes al trabajar con SVG
Uno de los errores más frecuentes es exportar desde una herramienta de diseño y subir el SVG tal cual, sin optimizarlo. Esto puede añadir peso innecesario y dificultar el mantenimiento.
Otro error habitual es usar SVG inline para todo. Aunque este método ofrece mucho control, no siempre es necesario. A veces, una simple etiqueta img es más que suficiente.
También es común olvidar la accesibilidad. Un icono decorativo anunciado por un lector de pantalla puede generar ruido. Un icono funcional sin nombre accesible puede impedir que una persona complete una acción.
Por último, otro error frecuente es usar SVG solo como recurso estético, sin pensar en su función dentro de la interfaz. Un gráfico visualmente bonito aporta poco si no ayuda a entender mejor la página o a mejorar la experiencia.
Preguntas frecuentes sobre gráficos SVG
¿SVG es mejor que PNG?
No siempre. SVG suele ser mejor para iconos, logotipos, ilustraciones simples y gráficos vectoriales que necesitan escalar sin perder calidad.
PNG puede ser más adecuado para imágenes rasterizadas, capturas o gráficos con transparencia que no necesitan manipulación vectorial.
La elección depende del tipo de imagen, del peso del archivo y del uso dentro de la interfaz.
¿Los SVG son buenos para el SEO?
Pueden serlo de forma indirecta. Un SVG optimizado puede ayudar a mejorar el rendimiento, la claridad visual y la accesibilidad de una página.
Pero el SEO no depende solo del formato de imagen. También importan la estructura del contenido, la velocidad de carga, los textos alternativos, la intención de búsqueda y la experiencia de usuario.
¿Es seguro subir SVG a WordPress?
Depende de cómo se gestione. SVG puede contener código, por lo que permitir subidas sin control puede suponer un riesgo de seguridad.
Si necesitas usar SVG en WordPress, es recomendable hacerlo con una configuración segura, limitar quién puede subir estos archivos y sanitizarlos antes de publicarlos.
En general, conviene tratar los SVG como código, no como simples imágenes.
SVG no es solo un formato, es una decisión de diseño
Los gráficos SVG son una herramienta muy valiosa para la web moderna. Permiten crear interfaces más nítidas, flexibles, escalables y adaptables. Son especialmente útiles para iconos, logotipos, ilustraciones, gráficos y elementos visuales que deben mantener su calidad en diferentes tamaños y dispositivos.
Pero su verdadero valor no está solo en la tecnología. Está en saber cuándo usarlos, cómo optimizarlos y cómo integrarlos de forma responsable.
Un SVG bien utilizado puede mejorar el rendimiento, reforzar la identidad visual de una marca y facilitar la creación de sistemas de diseño más coherentes. Un SVG mal utilizado puede añadir peso innecesario, generar problemas de accesibilidad o introducir riesgos de seguridad.
Por eso, la pregunta no debería ser simplemente: “¿uso SVG o no?”. La pregunta más útil sería: ¿este recurso visual se beneficia realmente de ser vectorial, escalable, editable y accesible?
Si la respuesta es sí, SVG puede convertirse en uno de tus mejores aliados en la web.
Porque al final, desarrollar una buena interfaz no consiste solo en elegir tecnologías modernas. Consiste en tomar decisiones que hagan que la experiencia sea más clara, más rápida, más flexible y más fácil de usar.
Y en ese equilibrio entre diseño, rendimiento y accesibilidad, los SVG tienen mucho que aportar.
