Renderizar diapositivas de presentación como imágenes SVG en JavaScript

De qué trata esta página

Exportar diapositivas de PowerPoint como imágenes SVG en JavaScript y controlar fuentes, texto, imágenes, ID y eventos con Aspose.Slides.

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 el post‑procesado automatizado. Aspose.Slides for Node.js a través de Java exporta cada diapositiva a un archivo SVG independiente 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 debe ser compacto, predecible en todos los navegadores o listo para uso interactivo.

Exportar una diapositiva como SVG

Cree una Presentation, seleccione una diapositiva y escríbala en un flujo con Slide.writeAsSvg. El siguiente ejemplo exporta cada diapositiva de una presentación como un archivo SVG separado.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const slideCount = presentation.getSlides().size();
    for (let slideIndex = 0; slideIndex < slideCount; slideIndex++) {
        const slide = presentation.getSlides().get_Item(slideIndex);
        const outputFileName = `slide-${slide.getSlideNumber()}.svg`;
        const svgStream = java.newInstanceSync("java.io.FileOutputStream", outputFileName);
        try {
            slide.writeAsSvg(svgStream);
        } finally {
            svgStream.close();
        }
    }
} finally {
    presentation.dispose();
}

El nombre de archivo utiliza Slide.getSlideNumber en lugar del índice del bucle. También puede exportar una forma individual con Shape.writeAsSvg cuando un visor de diapositivas o una página web necesita solo esa forma.

Configurar la salida SVG

SVGOptions controla el renderizado SVG. Para cuadros de texto, SVGOptions.setUseFrameSize incluye el cuadro de texto en el área de renderizado, y SVGOptions.setUseFrameRotation determina si se aplica la rotación del cuadro. Establezca SVGOptions.setDisableFontLigatures a true cuando el texto debe renderizarse sin ligaduras.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    svgOptions.setDisableFontLigatures(true);
    svgOptions.setUseFrameSize(true);
    svgOptions.setUseFrameRotation(false);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-custom-options.svg"
    );
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Controlar el recorte de extremos de línea en puntas de flecha

SVG 1.1 no tiene una configuración de inserción de marcador para especificar dónde debe detenerse una línea bajo una punta de flecha. Por defecto, Aspose.Slides acorta la línea exportada para que su trazo no sobresalga del marcador. Llame a SVGOptions.setDisableLineEndCropping con true para dibujar el trazo hasta el punto final original de la línea. Esta configuración afecta solo a la salida SVG. La línea mantiene su posición y longitud en la diapositiva.

El ejemplo dibuja puntas de flecha triangular 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.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);
    const lineColor = java.newInstanceSync("java.awt.Color", 0, 0, 139);
    let y = 40;

    for (const style of [slides.LineArrowheadStyle.Triangle, slides.LineArrowheadStyle.Diamond]) {
        for (const width of [2, 10]) {
            const line = slide.getShapes().addAutoShape(slides.ShapeType.Line, 40, y, 200, 0);
            const format = line.getLineFormat();
            format.getFillFormat().setFillType(java.newByte(slides.FillType.Solid));
            format.getFillFormat().getSolidFillColor().setColor(lineColor);
            format.setWidth(width);
            format.setEndArrowheadStyle(java.newByte(style));
            y += 50;
        }
    }

    const options = new slides.SVGOptions();
    options.setDisableLineEndCropping(false);
    const cropped = java.newInstanceSync("java.io.FileOutputStream", "cropped.svg");
    try {
        slide.writeAsSvg(cropped, options);
    } finally {
        cropped.close();
    }

    options.setDisableLineEndCropping(true);
    const uncropped = java.newInstanceSync("java.io.FileOutputStream", "uncropped.svg");
    try {
        slide.writeAsSvg(uncropped, options);
    } finally {
        uncropped.close();
    }
} finally {
    presentation.dispose();
}

La comparación muestra la punta 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 referencian 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 en todos los navegadores, pero el texto ya no será seleccionable ni buscable como texto SVG.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    svgOptions.setVectorizeText(true);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-vectorized-text.svg"
    );
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Elegir cómo se manejan las fuentes externas

SVGOptions.setExternalFontsHandling utiliza un valor SvgExternalFontsHandling para las fuentes que se cargan externamente. Elija AddLinksToFontFiles para referenciar archivos de fuentes separados, Embed para incluir los datos de la fuente en el SVG, o Vectorize para renderizar solo el texto que usa fuentes externas como gráficos. Verifique la licencia de la fuente antes de incrustarla.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const slide = presentation.getSlides().get_Item(0);

    const linkedFontsOptions = new slides.SVGOptions();
    linkedFontsOptions.setExternalFontsHandling(
        slides.SvgExternalFontsHandling.AddLinksToFontFiles
    );
    const linkedFontsStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-font-links.svg"
    );
    try {
        slide.writeAsSvg(linkedFontsStream, linkedFontsOptions);
    } finally {
        linkedFontsStream.close();
    }

    const embeddedFontsOptions = new slides.SVGOptions();
    embeddedFontsOptions.setExternalFontsHandling(
        slides.SvgExternalFontsHandling.Embed
    );
    const embeddedFontsStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-embedded-fonts.svg"
    );
    try {
        slide.writeAsSvg(embeddedFontsStream, embeddedFontsOptions);
    } finally {
        embeddedFontsStream.close();
    }

    const vectorizedExternalFontsOptions = new slides.SVGOptions();
    vectorizedExternalFontsOptions.setExternalFontsHandling(
        slides.SvgExternalFontsHandling.Vectorize
    );
    const vectorizedExternalFontsStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-vectorized-external-fonts.svg"
    );
    try {
        slide.writeAsSvg(vectorizedExternalFontsStream, vectorizedExternalFontsOptions);
    } finally {
        vectorizedExternalFontsStream.close();
    }
} 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 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 la imagen retenidos.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    svgOptions.setPicturesCompression(slides.PicturesCompression.Dpi150);
    svgOptions.setDeletePicturesCroppedAreas(true);
    svgOptions.setJpegQuality(80);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync("java.io.FileOutputStream", "compressed-slide.svg");
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} 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 detalle y tamaño de 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 juntas. El siguiente ejemplo exporta su primera diapositiva a tres resoluciones de rasterizado mediante Slide.writeAsSvg. Todas las demás configuraciones de exportación permanecen idénticas para que los resultados se puedan comparar.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("metafile-rasterization.pptx");
try {
    for (const dpi of [72, 150, 300]) {
        const svgOptions = new slides.SVGOptions();
        svgOptions.setMetafileRasterizationDpi(dpi);
        svgOptions.setPicturesCompression(slides.PicturesCompression.Dpi330);
        svgOptions.setJpegQuality(90);

        const outputFileName = `slide-${dpi}.svg`;
        const svgStream = java.newInstanceSync("java.io.FileOutputStream", outputFileName);
        try {
            presentation.getSlides().get_Item(0).writeAsSvg(svgStream, svgOptions);
        } finally {
            svgStream.close();
        }
    }
} finally {
    presentation.dispose();
}

En la salida, el EMF se convirtió en un PNG incrustado en cada SVG. Las siguientes mediciones son para la presentación suministrada; no constituyen una fórmula general para convertir DPI a dimensiones en píxeles.

DPI de rasterizado del metarchivo	Dimensiones del 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 siguiente muestra la misma zona del ráster incrustado al mismo tamaño de visualización ampliado. Las líneas diagonales muestran pixelación visible a 72 DPI y bordes más suaves a resoluciones mayores, mientras que el archivo SVG aumenta. Incrementar el valor no mejora necesariamente cada detalle ni cambia cada imagen exportada.

SVGOptions.setPicturesCompression controla la reducción de la resolución de la imagen 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 identificadores estables a formas y texto

Pase un controlador de formato a SVGOptions.setShapeFormattingController para establecer SvgShape.setId para cada forma SVG. Un controlador que también maneje los intervalos de texto puede establecer valores SvgTSpan.setId en los elementos tspan de texto.

El siguiente controlador utiliza Shape.getOfficeInteropShapeId, que es estable durante la vida útil de la forma, y un contador repetible para sus intervalos de texto. Esto hace que los ID generados sean adecuados para el post‑procesado de una presentación sin cambios.

const slides = require("aspose.slides.via.java");
const java = require("java");

class StableSvgIdController {
    constructor() {
        this.currentShapeId = "";
        this.textSpanIndex = 0;
    }

    formatShape(svgShape, shape) {
        this.currentShapeId = `shape-${shape.getOfficeInteropShapeId()}`;
        this.textSpanIndex = 0;
        svgShape.setId(this.currentShapeId);
    }

    formatText(svgTSpan, portion, textFrame) {
        const textSpanId = `${this.currentShapeId}-text-${this.textSpanIndex++}`;
        svgTSpan.setId(textSpanId);
    }

    createProxy() {
        const controller = this;
        const interfaceName = "com.aspose.slides.ISvgShapeAndTextFormattingController";
        const proxyMethods = {
            formatShape(svgShape, shape) {
                controller.formatShape(svgShape, shape);
            },
            formatText(svgTSpan, portion, textFrame) {
                controller.formatText(svgTSpan, portion, textFrame);
            }
        };
        return java.newProxy(interfaceName, proxyMethods);
    }
}

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    const stableSvgIdController = new StableSvgIdController();
    const controllerProxy = stableSvgIdController.createProxy();
    svgOptions.setShapeFormattingController(controllerProxy);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-stable-ids.svg"
    );
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Agregar controladores de eventos SVG

En un controlador de formato, llame a SvgShape.setEventHandler con un valor SvgEvent para añadir un controlador de eventos 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.

const slides = require("aspose.slides.via.java");
const java = require("java");

class SvgEventController {
    formatShape(svgShape, shape) {
        if (shape.getName() === "ActionButton") {
            svgShape.setId("action-button");
            svgShape.setEventHandler(
                slides.SvgEvent.OnClick,
                "handleShapeClick(event)"
            );
        }
    }

    createProxy() {
        const controller = this;
        const interfaceName = "com.aspose.slides.ISvgShapeFormattingController";
        const proxyMethods = {
            formatShape(svgShape, shape) {
                controller.formatShape(svgShape, shape);
            }
        };
        return java.newProxy(interfaceName, proxyMethods);
    }
}

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    const svgEventController = new SvgEventController();
    const controllerProxy = svgEventController.createProxy();
    svgOptions.setShapeFormattingController(controllerProxy);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync("java.io.FileOutputStream", "interactive-slide.svg");
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

La página anfitriona puede definir la función JavaScript referenciada por el controlador. Asignar ID y controladores de eventos permite visores de diapositivas, mejoras de accesibilidad y otros flujos de trabajo SVG interactivos.

Preguntas frecuentes

¿Cuándo debería usar SVGOptions.setVectorizeText en lugar de SvgExternalFontsHandling.Vectorize?

Utilice SVGOptions.setVectorizeText cuando todo el texto debe 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 áreas recortadas de la imagen y eligiendo archivos de fuentes vinculados cuando el entorno de destino pueda servirlos. Pruebe el resultado porque la menor resolución de la imagen, la menor calidad JPEG y el texto vectorizado tienen cada uno diferentes compromisos entre calidad y tamaño.

¿Puedo modificar los elementos SVG exportados después de la exportación?

Sí. Asigne ID mediante un controlador de formato y, a continuación, seleccione los elementos SVG correspondientes en su herramienta de post‑procesado o script de navegador.