Renderizar diapositivas de presentación como imágenes SVG en Android
Visión general
SVG es un formato de imagen XML escalable que funciona bien para la publicación web, visores de diapositivas, flujos de trabajo de accesibilidad y procesamiento posterior automatizado. Aspose.Slides para Android a través de Java exporta cada diapositiva a un archivo SVG independiente y 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 entre navegadores o listo para 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 utiliza 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 necesita solo esa forma.
Configurar la salida SVG
SVGOptions controla la renderización de SVG. Para marcos de texto, SVGOptions.setUseFrameSize incluye el marco de texto en el área de renderizado, 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 el recorte de extremos de línea en cabezas de flecha
SVG 1.1 no dispone de una configuración de inserción de marcador para especificar dónde debe detenerse una línea bajo una cabeza de flecha. Por defecto, Aspose.Slides acorta la línea exportada de modo que su trazo no sobresalga del marcador. Llame a SVGOptions.setDisableLineEndCropping con true para dibujar el trazo hasta el extremo original de la línea. Esta opción afecta solo a la salida SVG. La línea mantiene su posición y longitud en la diapositiva.
El ejemplo dibuja cabezas de flecha triangulares y de diamante en líneas de 2 y 10 puntos de ancho. Exporta la misma diapositiva dos veces, cambiando solo la opción de recorte.
import com.aspose.slides.*;
import android.graphics.Color;
import java.io.FileOutputStream;
Presentation presentation = new Presentation();
try {
ISlide slide = presentation.getSlides().get_Item(0);
int y = 40;
for (byte style : new byte[] { LineArrowheadStyle.Triangle, LineArrowheadStyle.Diamond }) {
for (int width : new int[] { 2, 10 }) {
IAutoShape line = slide.getShapes().addAutoShape(ShapeType.Line, 40, y, 200, 0);
ILineFormat format = line.getLineFormat();
format.getFillFormat().setFillType(FillType.Solid);
format.getFillFormat().getSolidFillColor().setColor(Color.rgb(0, 0, 139));
format.setWidth(width);
format.setEndArrowheadStyle(style);
y += 50;
}
}
SVGOptions options = new SVGOptions();
options.setDisableLineEndCropping(false);
try (FileOutputStream cropped = new FileOutputStream("cropped.svg")) {
slide.writeAsSvg(cropped, options);
}
options.setDisableLineEndCropping(true);
try (FileOutputStream uncropped = new FileOutputStream("uncropped.svg")) {
slide.writeAsSvg(uncropped, options);
}
} finally {
presentation.dispose();
}
La comparación muestra la cabeza de flecha triangular en la línea de 10 puntos. Con el recorte habilitado, la punta es aguda. Con el recorte deshabilitado, el trazo sobresale por los lados inclinados del marcador y deja un extremo plano.
En las demás líneas del ejemplo, el trazo sobresaliente es menos visible en el triángulo de 2 puntos. El diamante relleno cubre el extremo del trazo en ambos anchos.
Controlar texto y fuentes
Al exportar diapositivas a SVG, puede controlar si el texto permanece como texto o se convierte en gráficos vectoriales, y cómo se incluyen o referencia las fuentes externas. Las siguientes opciones le ayudan a equilibrar la consistencia visual, la selección de texto y las dependencias de fuentes en el SVG exportado.
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 consistente 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 referenciar archivos de fuente separados, SvgExternalFontsHandling.Embed para incluir los datos de la fuente en el SVG, o SvgExternalFontsHandling.Vectorize para renderizar solo el texto que usa 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 las áreas recortadas de la fuente, 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();
}
Controlar la resolución de rasterizado de metarchivos
SVGOptions.setMetafileRasterizationDpi establece el límite inferior de resolución para rasterizar metarchivos durante la exportación SVG. Úselo para equilibrar el detalle y el tamaño del archivo cuando se rasteriza una imagen EMF o WMF. No define un DPI global para el SVG ni obliga a que cada objeto de la diapositiva se convierta en una imagen rasterizada.
Descargue metafile-rasterization.pptx, que contiene una imagen EMF con líneas diagonales muy cercanas. El siguiente ejemplo exporta su primera diapositiva a tres resoluciones de rasterizado mediante ISlide.writeAsSvg. Todas las demás configuraciones de exportación permanecen idénticas para que los resultados puedan compararse.
import com.aspose.slides.PicturesCompression;
import com.aspose.slides.Presentation;
import com.aspose.slides.SVGOptions;
import java.io.FileOutputStream;
Presentation presentation = new Presentation("metafile-rasterization.pptx");
try {
for (int dpi : new int[] { 72, 150, 300 }) {
SVGOptions svgOptions = new SVGOptions();
svgOptions.setMetafileRasterizationDpi(dpi);
svgOptions.setPicturesCompression(PicturesCompression.Dpi330);
svgOptions.setJpegQuality(90);
String outputFileName = String.format("slide-%d.svg", dpi);
try (FileOutputStream svgStream = new FileOutputStream(outputFileName)) {
presentation.getSlides().get_Item(0).writeAsSvg(svgStream, svgOptions);
}
}
} finally {
presentation.dispose();
}
| DPI de rasterizado de metarchivo | Dimensiones PNG incrustado | Tamaño del archivo SVG (bytes) |
|---|---|---|
| 72 | 1196 × 596 | 170,221 |
| 150 | 2492 × 1242 | 423,149 |
| 300 | 4983 × 2483 | 1,027,169 |
La comparación a continuación muestra la misma zona del raster incrustado al mismo tamaño de visualización ampliado. Las líneas diagonales presentan pixelación visible a 72 DPI y bordes más suaves a resoluciones mayores, mientras que el archivo SVG crece. Aumentar el valor no mejora necesariamente cada detalle ni cambia cada imagen exportada.
SVGOptions.setPicturesCompression controla la reducción de resolución de imágenes y puede enmascarar el efecto de cambiar la resolución de rasterizado del metarchivo. SVGOptions.setJpegQuality controla la calidad de codificación JPEG, no la resolución de rasterizado del metarchivo.
Asignar IDs estables a formas y texto
Utilice ISvgShapeFormattingController para establecer ISvgShape.setId en 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 sin cambios.
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();
}
Agregar controladores de eventos SVG
En un ISvgShapeFormattingController, llame a ISvgShape.setEventHandler con un valor SvgEvent para añadir un controlador de evento JavaScript a una forma exportada. Asigne el controlador con SVGOptions.setShapeFormattingController y defina la función JavaScript en la página o 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 referenciada por el controlador. Asignar IDs y controladores 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 solo 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 las áreas recortadas de las imágenes y eligiendo archivos de fuentes vinculados cuando el entorno de destino pueda servirlos. Pruebe el resultado porque la menor resolución de imagen, la menor calidad JPEG 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 en un script de navegador.