¿Conviene incrustar un SVG en Webflow o usarlo como imagen? Cómo afectan los gráficos vectoriales al LCP y a la velocidad, cómo reducir SVG con SVGOMG y cómo animarlos con variables.
El otro día tuve un problema de LCP en Google PageSpeed, y sí, el culpable era un SVG, y no lograba entenderlo. Probé un montón de cosas, sin ánimo de ofender, pero la documentación de PageSpeed a veces es completamente inútil. Al final me quedé con un WebP, pero me desvío: toda la investigación me metió de cabeza en la madriguera de los SVG, y pensé que sería mejor escribir un post sobre lo que leí, ya que nunca hemos tocado el tema de los SVG, así que aquí va un post sobre gráficos vectoriales y Webflow, supongo. (Por cierto, el problema lo causaban las dimensiones físicas del SVG, pero eso es otra madriguera de Google PageSpeed.)
¿Qué son las imágenes vectoriales?
Los gráficos vectoriales se definen mediante trazados, que constan de puntos conectados por líneas y curvas para formar polígonos y otras formas. Básicamente, formas definidas en un plano cartesiano. A diferencia de los gráficos rasterizados, que dependen de píxeles, las imágenes vectoriales se pueden escalar a cualquier tamaño sin perder calidad. Eso las hace ideales para logotipos, iconos y otros gráficos donde la nitidez y la flexibilidad son esenciales. Lo que a su vez significa que destacan con formas simples, pero se quedan cortas cuando tienen que ser muy complejas.
La evolución de los gráficos vectoriales
Los gráficos vectoriales se remontan a los primeros días de la infografía, cuando el almacenamiento y la eficiencia eran primordiales. Con la llegada de la informática personal, aplicaciones basadas en vectores como Adobe Illustrator y CorelDRAW llevaron estos gráficos al primer plano del diseño, revolucionando la forma en que creamos imágenes digitales e interactuamos con ellas.
La introducción de SVG (Scalable Vector Graphics) a finales de los años noventa marcó un hito importante, ya que los SVG son archivos basados en XML que se pueden crear y editar con cualquier editor de texto y manipular con CSS y JavaScript.
Cómo implementar SVG en Webflow
Volviendo a lo que más nos importa a quienes diseñamos en Webflow, podemos añadir vectores fácilmente de dos maneras principales: con embeds, es decir, incrustando el código directamente en Webflow dentro de un embed, o añadiéndolos como imágenes. Ambas tienen ventajas y desventajas.
Incrustar el código SVG directamente
Incrustar el código SVG directamente en tu HTML puede mejorar los tiempos de carga y reducir las solicitudes HTTP, algo clave para lograr páginas más rápidas. Este enfoque resulta especialmente útil para gráficos simples que forman parte integral del diseño del sitio, ya que se escalan limpiamente en distintos dispositivos.
Naturalmente, los vectores más complejos son un problema aquí: el HTML puede volverse enorme. Luego hay otras cosas que considerar: en qué lugar del documento está, cuántas veces se usa el vector en la página y en el sitio en conjunto (una imagen SVG podría ser mejor para el almacenamiento en caché), si hay interacciones, porque con los SVG incrustados, las variables y las interacciones de Webflow se pueden hacer cosas geniales.
Usar archivos SVG externos
Los archivos SVG externos son una buena opción para gráficos complejos o que se actualizan con frecuencia. Al referenciar archivos externos, puedes aprovechar la caché del navegador para acelerar la carga de la página en visitas posteriores. Sin embargo, este método añade solicitudes HTTP adicionales, así que es fundamental usarlo con criterio.
Siempre es un dilema sin salida, tanto con los SVG externos como con los embeds, y para conseguir el sitio más optimizado hay que decidir sobre la marcha mientras construyes, tomando tu diseño como guía.
Los SVG y el rendimiento web
Impacto en la velocidad de la página
Los SVG pueden afectar de forma significativa al rendimiento web. Por su pequeño tamaño y su escalabilidad, suelen cargarse más rápido que las imágenes rasterizadas. Sin embargo, el método de integración (incrustado o externo) también influye en cómo afectan los SVG al rendimiento.
Largest Contentful Paint (LCP)
Los SVG pueden mejorar el LCP, una métrica crítica de las Core Web Vitals de Google. Al optimizar cómo se cargan los SVG (por ejemplo, priorizando el contenido que aparece en la parte visible sin hacer scroll), puedes mejorar el rendimiento percibido y la experiencia de usuario.
Algo que conviene saber: un SVG incrustado (inline) nunca se cuenta como el elemento LCP, solo un SVG cargado como imagen. Así que si alguna vez un SVG aparece como tu elemento LCP en PageSpeed, es uno externo.
Técnicas avanzadas de optimización
- Minimiza el código SVG: usa herramientas como SVGOMG para eliminar datos innecesarios de los archivos SVG y reducir su tamaño. Literalmente no puedo insistir lo suficiente: usa SVGOMG. Tus SVG se volverán diminutos, y puedes pegar el código SVG directamente en el sitio y volver a copiarlo, así que yo copio cada SVG o vector en Figma como SVG y lo pego directamente en SVGOMG, y luego guardo el SVG o lo copio de nuevo si lo voy a incrustar. El sitio nos abrió los ojos. Es un flujo de trabajo sencillo para un pequeño estudio de Webflow como el nuestro, pero nos da ese poquito extra de rendimiento cuando se suma todo.
- Animación eficiente: al animar SVG, usa animaciones CSS o JavaScript con moderación para evitar cargas computacionales pesadas que puedan afectar a métricas de rendimiento como el LCP.
- HTTP/2 para archivos externos: aprovecha las capacidades de HTTP/2 para cargar los SVG en paralelo más rápido y mejorar los tiempos de carga inicial. (Cloudflare es bueno para esto, y nuestra guía de Cloudflare de 2026 es la versión más reciente)
- Complejidad: un WebP puede ser una mejor alternativa, incluso a 2X con transparencia, que los SVG extremadamente complejos.
Usar las variables de Webflow para animar SVG de forma dinámica
La introducción de las variables CSS en Webflow abre posibilidades dinámicas para animar SVG incrustados directamente en tu HTML. Este método permite cambiar propiedades como el color, el tamaño y el trazo de forma dinámica, según las interacciones del usuario u otras condiciones definidas en Webflow. Las interacciones de Webflow con GSAP ahora también pueden animar variables directamente, con una acción Animate variable que interpola variables de color, tamaño, porcentaje y número, de modo que puedes controlar un SVG incrustado desde una interacción sin escribir nada de JavaScript. Si quieres afinar el tiempo de la animación, nuestra guía visual de las funciones de easing en Webflow te ayuda, y para saber más sobre cómo construimos el movimiento en general, tenemos nuestro post sobre animaciones dinámicas en Webflow.
Cómo animar SVG con las variables de Webflow:
- Cambios de color y opacidad: define variables CSS para el color y úsalas dentro del código SVG. Ajusta estas variables según la posición del scroll u otros disparadores en Webflow para crear efectos interactivos y atractivos.
- Ajustes de tamaño: usa variables CSS para ajustar de forma dinámica el ancho, el alto u otras dimensiones de los elementos SVG. Así los elementos pueden crecer o encogerse en respuesta a las interacciones del usuario.
- Complejidad y rendimiento: aunque las variables CSS ofrecen formas potentes de animar y ajustar SVG, ten en cuenta la complejidad de los SVG que uses. Los SVG complejos, con muchos trazados y efectos detallados, pueden aumentar considerablemente los tiempos de carga y afectar negativamente al rendimiento.
Cuándo incrustar SVG y cuándo usarlos como archivos externos
Los SVG incrustados son lo mejor para:
- Iconos y gráficos pequeños y simples que se benefician de ser estilizados y manipulados directamente dentro del HTML o el CSS.
- Diseños que requieren manipulación dinámica según la interacción o condiciones en tiempo real.
Los archivos SVG externos son preferibles para:
- Gráficos grandes y complejos que se usan en varias páginas de un sitio y se benefician de la caché del navegador.
- Gráficos que no necesitan manipularse de forma dinámica o que se actualizan con poca frecuencia.
Al entender estos matices y aprovechar las potentes capacidades de diseño de Webflow, puedes optimizar el uso y el rendimiento de los SVG en tus proyectos y conseguir un sitio web rápido, atractivo y visualmente cuidado.
Así que sí, no es nada que cambie el mundo, pero es útil saberlo y puede darte un pequeño empujón. Por cierto, Cloudflare es una buena opción aquí: no redimensionará ni convertirá un SVG como lo hace con un JPEG o un PNG, pero sí puede almacenarlo en caché cerca del usuario y comprimirlo, así que échale un vistazo a este otro post nuestro.
Gráficos vectoriales en Webflow: respuestas rápidas
¿Qué son los gráficos vectoriales?
Los gráficos vectoriales son imágenes definidas por matemáticas en lugar de píxeles: trazados formados por puntos, líneas y curvas. Por eso se escalan a cualquier tamaño sin perder calidad, lo que los hace ideales para logotipos e iconos, y poco adecuados para imágenes muy complejas, casi fotográficas.
¿Es mejor incrustar un SVG o usarlo como imagen en Webflow?
Depende del gráfico. Incrusta iconos pequeños y simples, y todo lo que quieras estilizar o animar con CSS, variables o interacciones. Usa un archivo SVG externo para gráficos más grandes o complejos que se repiten en muchas páginas, ya que el navegador puede almacenar el archivo en caché.
¿Puede un SVG causar un problema de LCP en Webflow?
Sí, pero solo un SVG externo. Un SVG incrustado (inline) nunca se cuenta como el elemento LCP, solo un SVG cargado como imagen. En mi caso, las dimensiones físicas del SVG eran las culpables, y un WebP lo solucionó. Además, los SVG muy complejos hinchan la página o tardan más en procesarse, así que si un SVG aparece como tu elemento LCP, compáralo con un WebP.
¿Cómo reduzco el tamaño de un SVG antes de añadirlo a Webflow?
Pásalo por SVGOMG para eliminar los datos innecesarios, y luego guarda el archivo o copia el código y pégalo en un embed.
¿Cloudflare optimiza los SVG?
No como optimiza las imágenes JPEG o PNG, ya que no redimensiona ni convierte los SVG, pero sí los almacena en caché cerca del usuario y los comprime. Nuestra guía de Cloudflare de 2026 explica la configuración.
