PDF a SVG para web: SEO, accesibilidad y rendimiento
La forma en que incluyes gráficos en tu web afecta a su posicionamiento en Google, su accesibilidad para usuarios con discapacidad y su rendimiento general. Usar SVG en lugar de PNG o JPG para logos, diagramas e infografías tiene ventajas técnicas directas en estas tres áreas. Si tienes estos gráficos en formato PDF, WikiPlus PDF a SVG es el paso más rápido para obtener SVGs optimizados listos para la web. En este artículo exploramos los beneficios técnicos del SVG frente a otros formatos.
SVG y Core Web Vitals: impacto en el rendimiento
Los Core Web Vitals de Google (LCP, FID/INP, CLS) se ven afectados por el tamaño y el tipo de los recursos de imagen. Un SVG de logo bien optimizado puede pesar 2-5 KB frente a los 20-100 KB de un PNG equivalente en alta resolución para Retina — una diferencia significativa para el LCP. Los SVGs no necesitan versiones diferentes para distintas densidades de pantalla (1x, 2x, 3x): un solo SVG escala perfectamente a todas las densidades sin versiones adicionales. Esto simplifica el código HTML (no hay necesidad de srcset) y reduce las peticiones HTTP. Menos peticiones y archivos más pequeños traducen directamente en mejores métricas CWV y mejor posicionamiento.
SVG y accesibilidad: texto indexable y compatibilidad con lectores de pantalla
Los SVGs inline en HTML tienen ventajas importantes en accesibilidad. El texto dentro de un SVG inline es texto real del DOM — es leído por lectores de pantalla, seleccionable por el usuario y traducible automáticamente por navegadores con función de traducción. Los elementos del SVG pueden tener atributos aria-label para describir gráficamente el contenido a usuarios con discapacidad visual. El título del SVG (elemento title) es mostrado como tooltip y leído por lectores de pantalla como descripción del gráfico. En contraste, un PNG o JPG solo puede describirse a través del atributo alt de la etiqueta img, con menos posibilidades semánticas.
SVG y SEO: Google puede indexar el texto en SVG
Google puede leer y procesar el contenido de archivos SVG, especialmente cuando están incrustados inline en HTML. El texto dentro de elementos text de SVG forma parte del contenido indexable de la página. Para infografías con texto informativo importantes para el posicionamiento, usar SVG en lugar de PNG significa que ese texto es indexado por Google como contenido de la página. Para logos con el nombre de la empresa, la versión SVG permite que el texto del logo refuerce la señal de relevancia para ese nombre. Sin embargo, el impacto en SEO de esta característica es menor comparado con el contenido de texto regular del HTML — no es un factor determinante, pero suma.
Implementación técnica de SVG en web: mejores prácticas
Para implementar SVGs correctamente en una web, sigue estas prácticas. Para logos: usa SVG inline si el logo necesita cambiar de color con CSS o ser animado; usa img src='logo.svg' si es estático y no necesita manipulación. Agrega siempre un elemento title dentro del SVG para accesibilidad. Añade role='img' al elemento svg para que los lectores de pantalla lo identifiquen correctamente. Para iconos: usa un sprite SVG que agrupe todos los iconos en un solo archivo referenciados por ID, reduciendo las peticiones HTTP. Para infografías: SVG inline con texto real (no texto como paths) maximiza el beneficio SEO. Minimiza el SVG con SVGO antes de deployar para reducir el peso al máximo.
Preguntas frecuentes
- ¿Google Lighthouse penaliza el uso de PNG en lugar de SVG para logos?
- Lighthouse no penaliza directamente el uso de PNG frente a SVG. Sin embargo, sí puede sugerir convertir imágenes a formatos más eficientes y puede señalar el tamaño de los recursos de imagen como oportunidad de mejora. Si tu logo PNG pesa más de lo que pesaría el SVG equivalente, Lighthouse podría señalarlo en la auditoría de rendimiento.
- ¿Los SVGs se pueden cachear en el navegador igual que los PNG?
- Sí. Los archivos SVG referenciados con img src o via CSS se cachean exactamente igual que PNG o JPG, siguiendo las instrucciones de caché del servidor (Cache-Control, Expires). Los SVGs inline no se cachean entre páginas porque son parte del HTML, aunque se benefician del caché del HTML en sí.
- ¿Afecta negativamente al SEO publicar un PDF en la web en lugar de un SVG?
- Los PDFs y los SVGs son formatos muy diferentes y se usan para propósitos distintos en la web. Los PDFs son documentos descargables; los SVGs son imágenes vectoriales para contenido visual. No hay una penalización SEO directa por publicar PDFs, pero para contenido gráfico que debería mostrarse en la página (logos, diagramas), SVG es técnicamente superior a un PDF embebido.