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

À propos de cette page

Exportez les diapositives PowerPoint au format SVG en PHP et contrôlez les polices, le texte, les images, les ID et les événements avec Aspose.Slides.

Vue d’ensemble

SVG est un format d’image évolutif basé sur XML qui fonctionne bien pour la publication web, les visionneuses de diapositives, les flux de travail d’accessibilité et le post‑traitement automatisé. Aspose.Slides exporte chaque diapositive vers un fichier SVG séparé 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 les différents navigateurs ou prêt pour une utilisation interactive.

Exporter une diapositive au format 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 en fichier SVG séparé.

$presentation = new Presentation("presentation.pptx");
try {
    $slideCount = java_values($presentation->getSlides()->size());

    for ($slideIndex = 0; $slideIndex < $slideCount; $slideIndex++) {
        $slide = $presentation->getSlides()->get_Item($slideIndex);
        $slideNumber = java_values($slide->getSlideNumber());
        $outputFileName = sprintf("slide-%d.svg", $slideNumber);

        $svgStream = new Java("java.io.FileOutputStream", $outputFileName);
        $slide->writeAsSvg($svgStream);
        $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 cadres 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.

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $svgOptions = new SVGOptions();
    $svgOptions->setDisableFontLigatures(true);
    $svgOptions->setUseFrameSize(true);
    $svgOptions->setUseFrameRotation(false);

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

Contrôler le rognage des extrémités de ligne aux pointes de flèche

SVG 1.1 n’a aucun paramètre d’incrustation de marqueur pour préciser où une ligne doit s’arrêter sous une pointe de flèche. Par défaut, Aspose.Slides raccourcit la ligne exportée afin que son tracé ne dépasse pas le marqueur. Appelez SVGOptions::setDisableLineEndCropping avec true pour tracer le trait jusqu’à l’extrémité originale de la ligne. Ce paramètre n’affecte que la sortie SVG. La ligne conserve sa position et sa longueur sur la diapositive.

L’exemple dessine des pointes de flèche triangle et diamant sur des lignes de 2 points et 10 points de largeur. Il exporte la même diapositive deux fois, en ne modifiant que l’option de rognage.

use aspose\slides\FillType;
use aspose\slides\LineArrowheadStyle;
use aspose\slides\Presentation;
use aspose\slides\ShapeType;
use aspose\slides\SVGOptions;

$presentation = new Presentation();
try {
    $slide = $presentation->getSlides()->get_Item(0);
    $y = 40;

    foreach ([LineArrowheadStyle::Triangle, LineArrowheadStyle::Diamond] as $style) {
        foreach ([2, 10] as $width) {
            $line = $slide->getShapes()->addAutoShape(ShapeType::Line, 40, $y, 200, 0);
            $format = $line->getLineFormat();
            $format->getFillFormat()->setFillType(FillType::Solid);
            $color = new Java("java.awt.Color", 0, 0, 139);
            $format->getFillFormat()->getSolidFillColor()->setColor($color);
            $format->setWidth($width);
            $format->setEndArrowheadStyle($style);
            $y += 50;
        }
    }

    $options = new SVGOptions();
    $options->setDisableLineEndCropping(false);
    $cropped = new Java("java.io.FileOutputStream", "cropped.svg");
    try {
        $slide->writeAsSvg($cropped, $options);
    } finally {
        $cropped->close();
    }

    $options->setDisableLineEndCropping(true);
    $uncropped = new Java("java.io.FileOutputStream", "uncropped.svg");
    try {
        $slide->writeAsSvg($uncropped, $options);
    } finally {
        $uncropped->close();
    }
} finally {
    $presentation->dispose();
}

La comparaison montre la pointe de flèche triangulaire sur la ligne de 10 points. Avec le rognage activé, la pointe est nette. Avec le rognage désactivé, le tracé dépasse les côtés inclinés du marqueur et laisse une extrémité plate.

Dans les autres lignes de l’exemple, le tracé qui dépasse est moins visible sur le triangle de 2 points. Le diamant rempli couvre l’extrémité du tracé à les deux largeurs.

Contrôler le texte et les polices

Lors de l’exportation de diapositives au format SVG, vous pouvez contrôler si le texte reste du texte ou est converti en graphiques vectoriels, et comment les polices externes sont incluses ou référencées. Les options suivantes vous aident à équilibrer la cohérence visuelle, la sélection du texte et les dépendances de polices dans le SVG exporté.

Vectoriser tout le texte

Définissez SVGOptions.setVectorizeText sur true pour écrire tout le texte de la diapositive en graphiques vectoriels. Cela élimine les dépendances aux polices et rend le résultat visuel plus cohérent sur les différents navigateurs, mais le texte n’est plus sélectionnable ni recherchable en tant que texte SVG.

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $svgOptions = new SVGOptions();
    $svgOptions->setVectorizeText(true);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "slide-with-vectorized-text.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $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 extérieurement. Choisissez AddLinksToFontFiles pour référencer des fichiers de police séparés, Embed pour inclure les données de police dans le SVG, ou Vectorize pour rendre uniquement le texte qui utilise des polices externes sous forme de graphiques. Vérifiez la licence des polices avant de les incorporer.

$presentation = new Presentation("presentation.pptx");
try {
    $slide = $presentation->getSlides()->get_Item(0);

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

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

    $vectorizedExternalFontsOptions = new SVGOptions();
    $vectorizedExternalFontsOptions->setExternalFontsHandling(SvgExternalFontsHandling::Vectorize);
    $vectorizedExternalFontsStream = new Java("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 intégrées

Utilisez SVGOptions.setPicturesCompression pour réduire la résolution des images intégrées, SVGOptions.setDeletePicturesCroppedAreas pour omettre les zones sources recadrées, 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.

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $svgOptions = new SVGOptions();
    $svgOptions->setPicturesCompression(PicturesCompression::Dpi150);
    $svgOptions->setDeletePicturesCroppedAreas(true);
    $svgOptions->setJpegQuality(80);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "compressed-slide.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $presentation->dispose();
}

Contrôler la résolution de rasterisation des métafichiers

SVGOptions.setMetafileRasterizationDpi définit la limite de résolution minimale pour la rasterisation des métafichiers lors de l’exportation SVG. Utilisez‑le pour équilibrer le niveau de détail et la taille du fichier lorsqu’une image EMF ou WMF est rasterisée. Il ne définit pas un DPI global pour le SVG ni ne contraint chaque objet de la diapositive à devenir une image raster.

Téléchargez metafile-rasterization.pptx, qui contient une image EMF avec des lignes diagonales très rapprochées. L’exemple suivant exporte sa première diapositive à trois résolutions de rasterisation via Slide.writeAsSvg. Tous les autres paramètres d’exportation restent identiques afin de pouvoir comparer les résultats.

$presentation = new Presentation("metafile-rasterization.pptx");

try {
    foreach ([72, 150, 300] as $dpi) {
        $svgOptions = new SVGOptions();
        $svgOptions->setMetafileRasterizationDpi($dpi);
        $svgOptions->setPicturesCompression(PicturesCompression::Dpi330);
        $svgOptions->setJpegQuality(90);

        $outputFileName = sprintf("slide-%d.svg", $dpi);
        $svgStream = new Java("java.io.FileOutputStream", $outputFileName);

        try {
            $presentation->getSlides()->get_Item(0)->writeAsSvg($svgStream, $svgOptions);
        } finally {
            $svgStream->close();
        }
    }
} finally {
    $presentation->dispose();
}

DPI de rasterisation du métafichier	Dimensions du PNG intégré	Taille du fichier SVG (octets)
72	1196 × 596	170,221
150	2492 × 1242	423,149
300	4983 × 2483	1,027,169

La comparaison ci‑dessous montre la même zone du raster intégré à la même taille d’affichage agrandie. Les lignes diagonales affichent une pixellisation visible à 72 DPI et des bords plus lisses à des résolutions supérieures, tandis que le fichier SVG augmente. Augmenter la valeur n’améliore pas forcément chaque détail ni ne change chaque image exportée.

SVGOptions.setPicturesCompression contrôle la réduction de résolution des images et peut masquer l’effet du changement de résolution de rasterisation du métafichier. SVGOptions.setJpegQuality contrôle la qualité d’encodage JPEG, pas la résolution de rasterisation du métafichier.

Attribuer des ID stables aux formes et au texte

Fournissez un rappel de formatage à SVGOptions.setShapeFormattingController pour définir SvgShape.setId pour chaque forme SVG. Le rappel peut également définir les valeurs SvgTSpan.setId sur les éléments de texte tspan.

PhpJavaBridge ne peut pas invoquer un rappel PHP depuis writeAsSvg lorsqu’il fonctionne en mode flux. Placez la logique de formatage dans une petite classe d’assistance Java, compilez‑la et ajoutez le fichier JAR résultant au chemin de classe du pont. L’assistance peut utiliser Shape.getOfficeInteropShapeId, qui reste stable pendant la durée de vie de la forme, ainsi qu’un compteur répétable pour ses segments de texte. Consultez l’implémentation Java de StableSvgIdController pour le code d’assistance.

Après avoir ajouté la classe compilée com.example.slides.StableSvgIdController au chemin de classe du pont, instanciez‑la depuis PHP et assignez‑la à SVGOptions :

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $shapeFormattingController = new Java("com.example.slides.StableSvgIdController");

    $svgOptions = new SVGOptions();
    $svgOptions->setShapeFormattingController($shapeFormattingController);

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

Ajouter des gestionnaires d’événements SVG

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

Comme pour les ID stables, implémentez le rappel dans une classe d’assistance Java lorsque PhpJavaBridge utilise le mode flux. L’implémentation Java de SvgEventController attribue un ID et un gestionnaire OnClick à une forme nommée ActionButton. Compilez cette assistance, ajoutez‑la au chemin de classe du pont sous le nom com.example.slides.SvgEventController, et utilisez‑la depuis PHP comme suit :

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $shapeFormattingController = new Java("com.example.slides.SvgEventController");

    $svgOptions = new SVGOptions();
    $svgOptions->setShapeFormattingController($shapeFormattingController);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "interactive-slide.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $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énements 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 intégrées, supprimer les zones d’image recadrées et choisir des fichiers de police liés lorsque l’environnement cible peut les fournir. Testez le résultat car la résolution d’image réduite, la qualité JPEG moindre et le texte vectorisé ont chacun des compromis différents entre qualité et taille.

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

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