Cómo exportar gráficos de PowerPoint como SVG para uso web

Necesita colocar un gráfico de PowerPoint en una página web, pero un PNG estático se ve borroso en pantallas retina y una captura de pantalla pierde los bordes vectoriales nítidos. PowerPoint no ofrece una exportación SVG con un solo clic para objetos de gráfico individuales, por lo que debe usar un método alternativo que conserve el gráfico como un auténtico gráfico vectorial. Este artículo explica por qué los métodos de exportación estándar fallan con los gráficos y proporciona dos técnicas fiables para guardar su gráfico como un archivo SVG que se mantenga nítido en cualquier nivel de zoom. También aprenderá a evitar problemas comunes como fuentes faltantes y degradados rotos.

Por qué los gráficos de PowerPoint no se exportan como gráficos vectoriales de forma predeterminada

Cuando hace clic con el botón derecho en un gráfico de PowerPoint y elige Guardar como imagen, el formato de archivo predeterminado es PNG. PNG es un formato ráster que registra cada píxel. Un gráfico guardado como PNG se vuelve borroso al ampliarlo en un monitor de alta densidad de píxeles (high-DPI) o en un diseño web adaptable. El mismo problema ocurre cuando usa Archivo > Exportar > Crear PDF: el gráfico se aplana en la página y no se puede extraer como un objeto vectorial independiente.

PowerPoint almacena los datos del gráfico internamente como un objeto Office Art, que se basa en vectores. Sin embargo, el cuadro de diálogo Guardar como imagen no ofrece SVG como opción para objetos de gráfico individuales a menos que el gráfico se agrupe primero o se convierta en una colección de formas. La ruta de exportación SVG existe solo a nivel de diapositiva a través del cuadro de diálogo Guardar como. Esto significa que debe manipular el gráfico para que PowerPoint lo reconozca como un grupo de formas genérico en lugar de un gráfico activo.

Qué ofrece SVG frente a PNG para gráficos web

SVG significa Scalable Vector Graphics (gráficos vectoriales escalables). Un archivo SVG contiene descripciones matemáticas de líneas, curvas, rellenos y texto. Los navegadores representan SVG a la resolución nativa del dispositivo, por lo que el gráfico se ve nítido en una pantalla 1x y en una pantalla Retina 3x. Los archivos SVG también son más pequeños que los archivos PNG de alta resolución para gráficos con geometría simple. Puede aplicar estilos a los elementos SVG con CSS, animarlos con JavaScript e incrustarlos directamente en HTML sin una solicitud de imagen externa.

Método 1: guardar la diapositiva del gráfico como SVG y recortar el resultado

Este método funciona porque el cuadro de diálogo Guardar como de PowerPoint puede guardar una diapositiva completa como SVG. Aísle el gráfico en su propia diapositiva, exporte la diapositiva y luego elimine el espacio en blanco adicional en un editor vectorial o mediante CSS.

1. Cree una nueva diapositiva y pegue solo el gráfico
   Abra su presentación. Haga clic con el botón derecho en la diapositiva que contiene el gráfico y seleccione Duplicar diapositiva. En la diapositiva duplicada, elimine todo excepto el gráfico. Haga clic en el borde del gráfico para seleccionarlo y luego presione Ctrl+X para cortarlo. Agregue una diapositiva en blanco (Inicio > Nueva diapositiva > En blanco). Presione Ctrl+V para pegar el gráfico en la diapositiva en blanco. Centre el gráfico aproximadamente en el lienzo de la diapositiva.
2. Cambie el tamaño de la diapositiva para que coincida con el cuadro delimitador del gráfico
   Vaya a Diseño > Tamaño de diapositiva > Tamaño de diapositiva personalizado. Establezca el Ancho y el Alto en valores ligeramente mayores que el gráfico. Una forma rápida es anotar las dimensiones del gráfico desde el grupo Tamaño de la pestaña Formato de forma y luego establecer las dimensiones de la diapositiva en esos números más 0,2 pulgadas en cada lado. Haga clic en Aceptar y elija Ajustar al contenido.
3. Guarde la diapositiva como SVG
   Vaya a Archivo > Guardar como. Elija una carpeta. En la lista desplegable Guardar como tipo, seleccione SVG Scalable Vector Graphics Format. Haga clic en Guardar. PowerPoint exporta toda la diapositiva como un archivo SVG.
4. Elimine el espacio en blanco adicional
   Abra el archivo SVG en un editor de texto o en una herramienta vectorial como Inkscape. El SVG tendrá un atributo viewBox que incluye toda el área de la diapositiva. Ajuste los valores de viewBox para que coincidan con el cuadro delimitador del gráfico. En Inkscape, use Archivo > Propiedades del documento > Ajustar página al contenido. Guarde el SVG limpio.

Método 2: copiar el gráfico como imagen y pegar como SVG

Este método evita por completo la exportación de la diapositiva. Copia el gráfico como una imagen vectorial y lo pega en una aplicación que acepte datos SVG en el portapapeles, como un editor de código o un visor SVG en línea.

1. Seleccione el gráfico y cópielo
   Haga clic una vez en el borde del gráfico para seleccionar todo el objeto de gráfico. Presione Ctrl+C para copiarlo al portapapeles.
2. Pegue el gráfico como una imagen SVG
   Abra un documento nuevo en una aplicación de gráficos vectoriales como Adobe Illustrator, Inkscape o Microsoft Visio. Presione Ctrl+V. La aplicación debería pegar el gráfico como un grupo de formas vectoriales. Si el pegado da como resultado un mapa de bits, use Pegado especial en su lugar: en la aplicación de destino, vaya a Editar > Pegado especial y elija Imagen (SVG) o Metarchivo mejorado, que conserva los datos vectoriales.
3. Guarde el objeto pegado como SVG
   En la aplicación vectorial, vaya a Archivo > Guardar como y elija SVG como formato de archivo. Establezca el perfil SVG en SVG 1.1 para obtener la máxima compatibilidad con los navegadores. Guarde el archivo.

Método 3: agrupar el gráfico y usar Guardar como imagen

Agrupar el gráfico lo convierte de un gráfico de datos activo en una colección de formas. Después de agruparlo, el cuadro de diálogo Guardar como imagen muestra SVG como formato disponible.

1. Agrupe el gráfico
   Haga clic con el botón derecho en el borde del gráfico. Seleccione Agrupar > Agrupar. Si Agrupar aparece atenuado, haga clic con el botón derecho de nuevo y seleccione Desagrupar, y luego inmediatamente haga clic con el botón derecho y seleccione Agrupar. Esto obliga a PowerPoint a tratar los elementos del gráfico como formas independientes.
2. Guarde el objeto agrupado como SVG
   Haga clic con el botón derecho en el gráfico agrupado. Seleccione Guardar como imagen. En la lista desplegable Guardar como tipo, elija SVG Scalable Vector Graphics Format. Asigne un nombre al archivo y haga clic en Guardar.
3. Verifique el resultado
   Abra el archivo SVG en un navegador web. Aplique un zoom del 300 por ciento. Las líneas y el texto del gráfico deben permanecer nítidos. Si algún texto aparece faltante o reemplazado por rectángulos, las fuentes usadas en el gráfico no están incrustadas. Consulte la siguiente sección para ver una solución alternativa.

Problemas comunes de exportación SVG y cómo solucionarlos

El texto se convierte en rectángulos o desaparece en el SVG

PowerPoint no incrusta datos de fuentes en los archivos SVG de forma predeterminada. Cuando el navegador o el editor no encuentra la fuente, sustituye una fuente alternativa que puede no coincidir con el diseño original. Para solucionarlo, convierta el texto del gráfico en formas antes de exportar. Seleccione cada elemento de texto del gráfico, haga clic con el botón derecho y elija Convertir en forma. Esto convierte el texto en contornos vectoriales que conservan la apariencia exacta independientemente del conjunto de fuentes del visor.

Los rellenos degradados aparecen planos o con bandas en el SVG

PowerPoint usa su propio motor de degradados que no siempre se traduce limpiamente a los elementos linearGradient o radialGradient de SVG. El SVG exportado puede mostrar un color sólido en lugar del degradado. Para evitarlo, reemplace los rellenos degradados por colores sólidos antes de exportar. Haga clic con el botón derecho en el elemento del gráfico, elija Formato de punto de datos, vaya a Relleno y seleccione un color sólido que se aproxime al degradado.

El tamaño del archivo SVG es inesperadamente grande

Un gráfico con muchos puntos de datos genera cientos de elementos path SVG individuales. Si el gráfico tiene un patrón de líneas de división o una imagen de fondo, esos elementos aumentan el tamaño del archivo. Simplifique el gráfico eliminando el fondo del gráfico y las líneas de división antes de exportar. Haga clic en el gráfico, vaya a la pestaña Diseño de gráfico y elija Agregar elemento de gráfico > Líneas de división > Ninguna. Haga clic con el botón derecho en el área del gráfico y seleccione Formato del área del gráfico > Relleno > Sin relleno.

Comparación de los métodos de exportación de PowerPoint

Elemento	Guardar diapositiva como SVG	Copiar como imagen + Pegar SVG	Agrupar + Guardar como imagen SVG
Pasos necesarios	4 pasos, incluido el cambio de tamaño de la diapositiva	3 pasos más una aplicación externa	3 pasos
Conserva los datos del gráfico activo	No, el gráfico se convierte en un SVG estático	No, el gráfico se convierte en un SVG estático	No, el gráfico se convierte en un SVG estático
Fidelidad del texto	Depende de la disponibilidad de la fuente	Depende de la disponibilidad de la fuente	Depende de la disponibilidad de la fuente
Compatibilidad con degradados	Puede aplanarse o mostrar bandas	Puede aplanarse o mostrar bandas	Puede aplanarse o mostrar bandas
Ideal para	Un solo gráfico por diapositiva con posicionamiento exacto	Usuarios que ya utilizan un editor vectorial	Exportación rápida sin herramientas adicionales

Ahora puede exportar cualquier gráfico de PowerPoint como un archivo SVG limpio que se escala perfectamente en sitios web y pantallas móviles. Después de exportar, abra el SVG en un navegador para confirmar que el texto, los colores y los degradados coinciden con el gráfico original. Para obtener el mejor rendimiento web, minimice el SVG con una herramienta como SVGO antes de subirlo a su sitio. Si necesita actualizar los datos del gráfico más adelante, conserve el archivo original de PowerPoint y repita los pasos de exportación en lugar de editar el SVG directamente.