Präsentationsfolien als SVG‑Bilder in JavaScript rendern

Worum es auf dieser Seite geht

Exportieren Sie PowerPoint‑Folien als SVG‑Bilder in JavaScript und steuern Sie Schriftarten, Text, Bilder, IDs und Ereignisse mit Aspose.Slides.

Übersicht

SVG ist ein skalierbares XML‑basiertes Bildformat, das sich gut für die Webveröffentlichung, Folienbetrachter, Barrierefreiheits‑Workflows und automatisierte Nachbearbeitung eignet. Aspose.Slides für Node.js via Java exportiert jede Folie in eine separate SVG‑Datei und ermöglicht die Kontrolle darüber, wie Text, Schriftarten, Bilder und SVG‑Elemente geschrieben werden.

Verwenden Sie SVGOptions, wenn das exportierte SVG kompakt, browserübergreifend vorhersehbar oder für interaktive Verwendung bereit sein muss.

Eine Folie als SVG exportieren

Erstellen Sie eine Presentation, wählen Sie eine Folie aus und schreiben Sie sie mit Slide.writeAsSvg in einen Stream. Das folgende Beispiel exportiert jede Folie einer Präsentation als separate SVG‑Datei.

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();
}

Der Dateiname verwendet Slide.getSlideNumber anstelle des Schleifenindexes. Sie können auch ein einzelnes Shape mit Shape.writeAsSvg exportieren, wenn ein Folienbetrachter oder eine Webseite nur dieses Shape benötigt.

SVG‑Ausgabe konfigurieren

SVGOptions steuert das Rendering von SVG. Für Textfelder fügt SVGOptions.setUseFrameSize das Textfeld in den Renderbereich ein, und SVGOptions.setUseFrameRotation legt fest, ob die Drehung des Feldes angewendet wird. Setzen Sie SVGOptions.setDisableFontLigatures auf true, wenn Text ohne Ligaturen gerendert werden muss.

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();
}

Linienende‑Zuschneiden bei Pfeilspitzen steuern

SVG 1.1 verfügt über keine Markereinsetz‑Einstellung, um festzulegen, wo eine Linie unterhalb einer Pfeilspitze enden soll. Standardmäßig verkürzt Aspose.Slides die exportierte Linie, sodass ihre Kontur nicht durch das Markierungssymbol hindurchreicht. Rufen Sie SVGOptions.setDisableLineEndCropping mit true auf, um die Kontur bis zum ursprünglichen Endpunkt der Linie zu zeichnen. Diese Einstellung wirkt sich nur auf die SVG‑Ausgabe aus. Die Linie behält ihre Position und Länge in der Folie bei.

Das Beispiel zeichnet Dreieck‑ und Rautenspitzpfeile auf Linien mit einer Breite von 2 bzw. 10 Punkten. Es exportiert dieselbe Folie zweimal und ändert dabei nur die Zuschneide‑Option.

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();
}

Der Vergleich zeigt die dreieckige Pfeilspitze auf der 10‑Punkt‑Linie. Bei aktivierter Zuschneidung ist die Spitze scharf. Bei deaktivierter Zuschneidung ragt die Kontur durch die schrägen Seiten des Markers und hinterlässt ein stumpfes Ende.

In den anderen Linien des Beispiels ist die hinausragende Kontur am 2‑Punkt‑Dreieck weniger sichtbar. Der ausgefüllte Raute deckt das Ende der Kontur bei beiden Breiten ab.

Text und Schriftarten steuern

Beim Export von Folien nach SVG können Sie steuern, ob Text als Text erhalten bleibt oder in Vektorgrafiken umgewandelt wird und wie externe Schriftarten eingebunden oder referenziert werden. Die folgenden Optionen helfen, visuelle Konsistenz, Textauswahl und Schriftart‑Abhängigkeiten im exportierten SVG auszubalancieren.

Alle Texte vektorisieren

Setzen Sie SVGOptions.setVectorizeText auf true, um gesamten Folientext als Vektorgrafiken zu schreiben. Dadurch entfallen Schriftart‑Abhängigkeiten und das visuelle Ergebnis ist über Browser hinweg konsistenter, jedoch ist der Text nicht mehr auswähl‑ oder durchsuchbar als SVG‑Text.

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();
}

Auswahl, wie externe Schriftarten behandelt werden

SVGOptions.setExternalFontsHandling verwendet einen SvgExternalFontsHandling‑Wert für extern geladene Schriftarten. Wählen Sie AddLinksToFontFiles, um separate Schriftdateien zu referenzieren, Embed, um Schriftartdaten in das SVG einzubetten, oder Vectorize, um nur Text, der externe Schriftarten verwendet, als Grafiken zu rendern. Prüfen Sie die Lizenzierung der Schriftarten, bevor Sie Schriftarten einbetten.

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();
}

Größe eingebetteter Bilder reduzieren

Verwenden Sie SVGOptions.setPicturesCompression, um die Auflösung eingebetteter Bilder zu reduzieren, SVGOptions.setDeletePicturesCroppedAreas, um beschnittene Quellbereiche wegzulassen, und SVGOptions.setJpegQuality, um die JPEG‑Kodierungsqualität zu steuern. Diese Einstellungen verringern die Dateigröße zulasten der Bildtreue oder der erhaltenen Bilddaten.

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();
}

Rasterisierungsauflösung von Metadateien steuern

SVGOptions.setMetafileRasterizationDpi legt die untere Auflösungsgrenze für die Rasterisierung von Metadateien beim SVG‑Export fest. Verwenden Sie sie, um Details und Dateigröße auszubalancieren, wenn ein EMF‑ oder WMF‑Bild rasterisiert wird. Sie definiert kein globales DPI für das SVG und zwingt nicht jedes Objekt auf der Folie, zu einem Rasterbild zu werden.

Laden Sie metafile-rasterization.pptx herunter, das ein EMF‑Bild mit dicht beabstandeten Diagonallinien enthält. Das folgende Beispiel exportiert die erste Folie mit drei Rasterisierungsauflösungen über Slide.writeAsSvg. Alle anderen Exporteinstellungen bleiben identisch, sodass die Ergebnisse verglichen werden können.

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();
}

In der Ausgabe wurde das EMF zu einem eingebetteten PNG in jedem SVG. Die folgenden Messwerte gelten für die bereitgestellte Präsentation; sie stellen keine allgemeine Formel zur Umrechnung von DPI in Pixelmaße dar.

Metadatei‑Rasterisierungs‑DPI	Abmessungen eingebettetes PNG	SVG‑Dateigröße (Bytes)
72	1196 × 596	170,221
150	2492 × 1242	423,149
300	4983 × 2483	1,027,169

Der Vergleich unten zeigt denselben Bereich des eingebetteten Rasters bei gleicher vergrößerter Anzeigegröße. Die Diagonallinien zeigen bei 72 DPI sichtbare Pixelbildung und bei höheren Auflösungen glattere Kanten, während die SVG‑Datei größer wird. Eine Erhöhung des Wertes verbessert nicht zwangsläufig jedes Detail oder ändert jedes exportierte Bild.

SVGOptions.setPicturesCompression steuert die Reduktion der Bildauflösung und kann die Auswirkung einer geänderten Metadatei‑Rasterisierungs‑Auflösung maskieren. SVGOptions.setJpegQuality steuert die JPEG‑Kodierungsqualität, nicht die Rasterisierungs‑Auflösung der Metadatei.

Stabile IDs für Shapes und Text zuweisen

Übergeben Sie einen Formatierungs‑Controller an SVGOptions.setShapeFormattingController, um SvgShape.setId für jedes SVG‑Shape festzulegen. Ein Controller, der auch Text‑Spans verarbeitet, kann Werte für SvgTSpan.setId auf den Text‑tspan‑Elementen setzen.

Der folgende Controller verwendet Shape.getOfficeInteropShapeId, das für die Lebensdauer des Shapes stabil ist, sowie einen wiederholbaren Zähler für seine Text‑Spans. Das macht die erzeugten IDs für die Nachbearbeitung einer unveränderten Präsentation geeignet.

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();
}

SVG‑Ereignishandler hinzufügen

Rufen Sie in einem Formatierungs‑Controller SvgShape.setEventHandler mit einem SvgEvent‑Wert auf, um einem exportierten Shape einen JavaScript‑Ereignishandler hinzuzufügen. Weisen Sie den Controller mit SVGOptions.setShapeFormattingController zu und definieren Sie die JavaScript‑Funktion in der Seite oder dem SVG‑Dokument, das das Ergebnis hostet.

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();
}

Die Host‑Seite kann die vom Handler referenzierte JavaScript‑Funktion definieren. Das Zuweisen von IDs und Ereignishandlern ermöglicht Folienbetrachter, Barrierefreiheits‑Erweiterungen und andere interaktive SVG‑Workflows.

FAQ

Wann sollte ich SVGOptions.setVectorizeText anstelle von SvgExternalFontsHandling.Vectorize verwenden?

Verwenden Sie SVGOptions.setVectorizeText, wenn sämtlicher Text unabhängig von Schriftarten sein muss. Verwenden Sie SvgExternalFontsHandling.Vectorize, wenn nur Text, der externe Schriftarten verwendet, in Grafiken umgewandelt werden soll.

Was ist der beste Weg, ein SVG zu verkleinern?

Beginnen Sie mit der Komprimierung eingebetteter Bilder, dem Entfernen beschnittener Bildbereiche und der Auswahl verlinkter Schriftdateien, wenn die Zielumgebung diese bereitstellen kann. Testen Sie das Ergebnis, da geringere Bildauflösung, niedrigere JPEG‑Qualität und vektorisierter Text jeweils unterschiedliche Qualitäts‑ und Größenkompromisse mit sich bringen.

Kann ich exportierte SVG‑Elemente nach dem Export ändern?

Ja. Weisen Sie IDs über einen Formatierungs‑Controller zu und wählen Sie anschließend die entsprechenden SVG‑Elemente in Ihrem Nachbearbeitungstool oder Browserskript aus.