Rendre les diapositives de présentation en images SVG en JavaScript

Vue d’ensemble

SVG est un format d’image XML évolutif qui fonctionne bien pour la publication Web, les visionneuses de diapositives, les flux de travail d’accessibilité et le post‑traitement automatisé. Aspose.Slides for Node.js via Java exporte chaque diapositive vers un fichier SVG distinct et vous permet de contrôler la façon dont le texte, les polices, les images et les éléments SVG sont écrits.

Utilisez SVGOptions lorsque le SVG exporté doit être compact, prévisible sur tous les navigateurs ou prêt à une utilisation interactive.

Exporter une diapositive en SVG

Créez une Presentation, sélectionnez une diapositive et écrivez‑la dans un flux avec Slide.writeAsSvg. L’exemple suivant exporte chaque diapositive d’une présentation sous forme de fichier SVG distinct.

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

Le nom de fichier utilise Slide.getSlideNumber plutôt que l’indice de boucle. Vous pouvez également exporter une forme individuelle avec Shape.writeAsSvg lorsqu’une visionneuse de diapositives ou une page Web ne nécessite que cette forme.

Configurer la sortie SVG

SVGOptions contrôle le rendu SVG. Pour les zones de texte, SVGOptions.setUseFrameSize inclut le cadre de texte dans la zone de rendu, et SVGOptions.setUseFrameRotation détermine si la rotation du cadre est appliquée. Réglez SVGOptions.setDisableFontLigatures sur true lorsque le texte doit être rendu sans ligatures.

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

Contrôler le texte et les polices

Vectoriser tout le texte

Définissez SVGOptions.setVectorizeText sur true pour écrire tout le texte de la diapositive sous forme de graphiques vectoriels. Cela élimine les dépendances aux polices et rend le résultat visuel plus cohérent sur les navigateurs, mais le texte n’est plus sélectionnable ni recherchable en tant que texte 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();
}

Choisir la façon dont les polices externes sont gérées

SVGOptions.setExternalFontsHandling utilise une valeur SvgExternalFontsHandling pour les polices chargées de façon externe. Choisissez AddLinksToFontFiles pour référencer des fichiers de polices séparés, Embed pour inclure les données de la police dans le SVG, ou Vectorize pour rendre le texte utilisant des polices externes uniquement sous forme de graphiques. Vérifiez les licences des polices avant d’incorporer des polices.

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

Réduire la taille des images incorporées

Utilisez SVGOptions.setPicturesCompression pour réduire la résolution des images incorporées, SVGOptions.setDeletePicturesCroppedAreas pour ignorer les zones découpées de la source, et SVGOptions.setJpegQuality pour contrôler la qualité d’encodage JPEG. Ces paramètres réduisent la taille du fichier au détriment de la fidélité de l’image ou des données d’image conservées.

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

Attribuer des ID stables aux formes et au texte

Passez un contrôleur de formatage à SVGOptions.setShapeFormattingController pour définir SvgShape.setId pour chaque forme SVG. Un contrôleur qui gère également les intervalles de texte peut définir les valeurs SvgTSpan.setId sur les éléments tspan du texte.

Le contrôleur suivant utilise Shape.getOfficeInteropShapeId, qui est stable pendant toute la durée de vie de la forme, et un compteur répété pour ses intervalles de texte. Cela rend les ID générés adaptés au post‑traitement d’une présentation inchangée.

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

Ajouter des gestionnaires d’événements SVG

Dans un contrôleur de formatage, appelez SvgShape.setEventHandler avec une valeur SvgEvent pour ajouter un gestionnaire d’événement JavaScript à une forme exportée. Assignez le contrôleur avec SVGOptions.setShapeFormattingController et définissez la fonction JavaScript dans la page ou le document SVG qui héberge le résultat.

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 page hôte peut définir la fonction JavaScript référencée par le gestionnaire. L’attribution d’ID et de gestionnaires d’événés permet aux visionneuses de diapositives, aux améliorations d’accessibilité et à d’autres flux de travail SVG interactifs.

FAQ

Quand dois‑je utiliser SVGOptions.setVectorizeText au lieu de SvgExternalFontsHandling.Vectorize?

Utilisez SVGOptions.setVectorizeText lorsque tout le texte doit être indépendant des polices. Utilisez SvgExternalFontsHandling.Vectorize lorsque seul le texte qui utilise des polices externes doit être converti en graphiques.

Quelle est la meilleure façon de réduire la taille d’un SVG?

Commencez par compresser les images incorporées, supprimer les zones d’images découpées et choisir des fichiers de polices liés lorsque l’environnement cible peut les fournir. Testez le résultat, car la résolution d’image réduite, la qualité JPEG plus basse et le texte vectorisé ont chacun des compromis différents en termes de qualité et de taille.

Puis‑je modifier les éléments SVG exportés après l’exportation?

Oui. Attribuez des ID via un contrôleur de formatage, puis sélectionnez les éléments SVG correspondants dans votre outil de post‑traitement ou script de navigateur.

Convertir des présentations en HTML5 en JavaScript