Renderizar diapositivas de presentación como imágenes SVG en Android
Visión general
SVG es un formato de imagen escalable basado en XML que funciona bien para la publicación web, visores de diapositivas, flujos de trabajo de accesibilidad y procesamiento posterior automatizado. Aspose.Slides for Android a través de Java exporta cada diapositiva a un archivo SVG separado y le permite controlar cómo se escriben el texto, las fuentes, las imágenes y los elementos SVG.
Utilice SVGOptions cuando el SVG exportado deba ser compacto, predecible en distintos navegadores o estar listo para su uso interactivo.
Exportar una diapositiva como SVG
Cree una Presentation, seleccione una diapositiva y escríbala en un flujo con ISlide.writeAsSvg. El siguiente ejemplo exporta cada diapositiva de una presentación como un archivo SVG independiente.
Presentation presentation = new Presentation("presentation.pptx");
try {
for (ISlide slide : presentation.getSlides()) {
String outputFileName = String.format("slide-%d.svg", slide.getSlideNumber());
try (FileOutputStream svgStream = new FileOutputStream(outputFileName)) {
slide.writeAsSvg(svgStream);
}
}
} finally {
presentation.dispose();
}
El nombre de archivo usa ISlide.getSlideNumber en lugar del índice del bucle. También puede exportar una forma individual con IShape.writeAsSvg cuando un visor de diapositivas o una página web necesite sólo esa forma.
Configurar la salida SVG
SVGOptions controla la representación SVG. Para marcos de texto, SVGOptions.setUseFrameSize incluye el marco de texto en el área de representación, y SVGOptions.setUseFrameRotation determina si se aplica la rotación del marco. Establezca SVGOptions.setDisableFontLigatures a true cuando el texto deba renderizarse sin ligaduras.
Presentation presentation = new Presentation("presentation.pptx");
try {
SVGOptions svgOptions = new SVGOptions();
svgOptions.setDisableFontLigatures(true);
svgOptions.setUseFrameSize(true);
svgOptions.setUseFrameRotation(false);
ISlide slide = presentation.getSlides().get_Item(0);
try (FileOutputStream svgStream = new FileOutputStream("slide-with-custom-options.svg")) {
slide.writeAsSvg(svgStream, svgOptions);
}
} finally {
presentation.dispose();
}
Controlar texto y fuentes
Vectorizar todo el texto
Establezca SVGOptions.setVectorizeText a true para escribir todo el texto de la diapositiva como gráficos vectoriales. Esto elimina las dependencias de fuentes y hace que el resultado visual sea más coherente entre navegadores, pero el texto ya no es seleccionable ni buscable como texto SVG.
Presentation presentation = new Presentation("presentation.pptx");
try {
SVGOptions svgOptions = new SVGOptions();
svgOptions.setVectorizeText(true);
ISlide slide = presentation.getSlides().get_Item(0);
try (FileOutputStream svgStream = new FileOutputStream("slide-with-vectorized-text.svg")) {
slide.writeAsSvg(svgStream, svgOptions);
}
} finally {
presentation.dispose();
}
Elegir cómo se gestionan las fuentes externas
SVGOptions.setExternalFontsHandling utiliza un valor SvgExternalFontsHandling para las fuentes que se cargan externamente. Elija SvgExternalFontsHandling.AddLinksToFontFiles para hacer referencia a archivos de fuentes separados, SvgExternalFontsHandling.Embed para incluir los datos de la fuente en el SVG, o SvgExternalFontsHandling.Vectorize para renderizar sólo el texto que utiliza fuentes externas como gráficos. Verifique la licencia de las fuentes antes de incrustarlas.
Presentation presentation = new Presentation("presentation.pptx");
try {
ISlide slide = presentation.getSlides().get_Item(0);
SVGOptions linkedFontsOptions = new SVGOptions();
linkedFontsOptions.setExternalFontsHandling(SvgExternalFontsHandling.AddLinksToFontFiles);
try (FileOutputStream linkedFontsStream = new FileOutputStream("slide-with-font-links.svg")) {
slide.writeAsSvg(linkedFontsStream, linkedFontsOptions);
}
SVGOptions embeddedFontsOptions = new SVGOptions();
embeddedFontsOptions.setExternalFontsHandling(SvgExternalFontsHandling.Embed);
try (FileOutputStream embeddedFontsStream = new FileOutputStream("slide-with-embedded-fonts.svg")) {
slide.writeAsSvg(embeddedFontsStream, embeddedFontsOptions);
}
SVGOptions vectorizedExternalFontsOptions = new SVGOptions();
vectorizedExternalFontsOptions.setExternalFontsHandling(SvgExternalFontsHandling.Vectorize);
try (FileOutputStream vectorizedExternalFontsStream = new FileOutputStream("slide-with-vectorized-external-fonts.svg")) {
slide.writeAsSvg(vectorizedExternalFontsStream, vectorizedExternalFontsOptions);
}
} finally {
presentation.dispose();
}
Reducir el tamaño de imágenes incrustadas
Utilice SVGOptions.setPicturesCompression para reducir la resolución de las imágenes incrustadas, SVGOptions.setDeletePicturesCroppedAreas para omitir áreas de origen recortadas y SVGOptions.setJpegQuality para controlar la calidad de codificación JPEG. Estas configuraciones reducen el tamaño del archivo a costa de la fidelidad de la imagen o de los datos de imagen retenidos.
Presentation presentation = new Presentation("presentation.pptx");
try {
SVGOptions svgOptions = new SVGOptions();
svgOptions.setPicturesCompression(PicturesCompression.Dpi150);
svgOptions.setDeletePicturesCroppedAreas(true);
svgOptions.setJpegQuality(80);
ISlide slide = presentation.getSlides().get_Item(0);
try (FileOutputStream svgStream = new FileOutputStream("compressed-slide.svg")) {
slide.writeAsSvg(svgStream, svgOptions);
}
} finally {
presentation.dispose();
}
Asignar IDs estables a formas y texto
Utilice ISvgShapeFormattingController para establecer ISvgShape.setId para cada forma SVG. Para establecer valores ISvgTSpan.setId en los elementos tspan de texto también, implemente ISvgShapeAndTextFormattingController. Asigne cualquiera de los controladores con SVGOptions.setShapeFormattingController.
El siguiente controlador utiliza IShape.getOfficeInteropShapeId , que es estable durante la vida útil de la forma, y un contador repetible para sus tspan de texto. Esto hace que los IDs generados sean adecuados para el post‑procesado de una presentación que no haya cambiado.
class StableSvgIdController implements ISvgShapeAndTextFormattingController {
private String currentShapeId = "";
private int textSpanIndex;
public void formatShape(ISvgShape svgShape, IShape shape) {
currentShapeId = String.format("shape-%d", shape.getOfficeInteropShapeId());
textSpanIndex = 0;
svgShape.setId(currentShapeId);
}
public void formatText(ISvgTSpan svgTSpan, IPortion portion, ITextFrame textFrame) {
svgTSpan.setId(String.format("%s-text-%d", currentShapeId, textSpanIndex++));
}
}
Presentation presentation = new Presentation("presentation.pptx");
try {
SVGOptions svgOptions = new SVGOptions();
svgOptions.setShapeFormattingController(new StableSvgIdController());
ISlide slide = presentation.getSlides().get_Item(0);
try (FileOutputStream svgStream = new FileOutputStream("slide-with-stable-ids.svg")) {
slide.writeAsSvg(svgStream, svgOptions);
}
} finally {
presentation.dispose();
}
Añadir manejadores de eventos SVG
En un ISvgShapeFormattingController, llame a ISvgShape.setEventHandler con un valor SvgEvent para añadir un manejador de evento JavaScript a una forma exportada. Asigne el controlador con SVGOptions.setShapeFormattingController y defina la función JavaScript en la página o el documento SVG que aloje el resultado.
class SvgEventController implements ISvgShapeFormattingController {
public void formatShape(ISvgShape svgShape, IShape shape) {
if ("ActionButton".equals(shape.getName())) {
svgShape.setId("action-button");
svgShape.setEventHandler(SvgEvent.OnClick, "handleShapeClick(event)");
}
}
}
Presentation presentation = new Presentation("presentation.pptx");
try {
SVGOptions svgOptions = new SVGOptions();
svgOptions.setShapeFormattingController(new SvgEventController());
ISlide slide = presentation.getSlides().get_Item(0);
try (FileOutputStream svgStream = new FileOutputStream("interactive-slide.svg")) {
slide.writeAsSvg(svgStream, svgOptions);
}
} finally {
presentation.dispose();
}
La página anfitriona puede definir la función JavaScript a la que hace referencia el manejador. Asignar IDs y manejadores de eventos permite visores de diapositivas, mejoras de accesibilidad y otros flujos de trabajo interactivos con SVG.
Preguntas frecuentes
¿Cuándo debería usar SVGOptions.setVectorizeText en lugar de SvgExternalFontsHandling.Vectorize?
Utilice SVGOptions.setVectorizeText cuando todo el texto deba ser independiente de las fuentes. Utilice SvgExternalFontsHandling.Vectorize cuando sólo el texto que usa fuentes externas deba convertirse en gráficos.
¿Cuál es la mejor manera de reducir el tamaño de un SVG?
Comience comprimiendo las imágenes incrustadas, eliminando áreas de imagen recortadas y eligiendo archivos de fuentes enlazados cuando el entorno de destino pueda servirlos. Pruebe el resultado porque una menor resolución de imagen, una calidad JPEG más baja y el texto vectorizado tienen diferentes compromisos entre calidad y tamaño.
¿Puedo modificar los elementos SVG exportados después de la exportación?
Sí. Asigne IDs mediante un controlador de formato y luego seleccione los elementos SVG correspondientes en su herramienta de post‑procesado o script del navegador.