Präsentationsfolien auf Android als SVG‑Bilder rendern
Übersicht
SVG ist ein skalierbares, XML‑basiertes Bildformat, das sich gut für die Web‑Veröffentlichung, Folien‑Betrachter, Barrierefreiheits‑Workflows und die automatisierte Nachbearbeitung eignet. Aspose.Slides für Android über Java exportiert jede Folie in eine separate SVG‑Datei und ermöglicht die Kontrolle darüber, wie Text, Schriften, Bilder und SVG‑Elemente geschrieben werden.
Verwenden Sie SVGOptions, wenn das exportierte SVG kompakt, browserübergreifend vorhersehbar oder für interaktive Nutzung bereit sein muss.
Eine Folie als SVG exportieren
Erstellen Sie eine Presentation, wählen Sie eine Folie aus und schreiben Sie sie mit ISlide.writeAsSvg in einen Stream. Das folgende Beispiel exportiert jede Folie einer Präsentation als separate SVG‑Datei.
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();
}
Der Dateiname verwendet ISlide.getSlideNumber anstelle des Schleifenindex. Sie können auch eine einzelne Form mit IShape.writeAsSvg exportieren, wenn ein Folien‑Betrachter oder eine Webseite nur diese Form benötigt.
SVG‑Ausgabe konfigurieren
SVGOptions steuert das Rendern von SVG. Für Textrahmen schließt SVGOptions.setUseFrameSize den Textrahmen in den Renderbereich ein, und SVGOptions.setUseFrameRotation bestimmt, ob die Rahmenrotation angewendet wird. Setzen Sie SVGOptions.setDisableFontLigatures auf true, wenn Text ohne Ligaturen gerendert werden muss.
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();
}
Beschneidung von Linienenden an Pfeilspitzen steuern
SVG 1.1 bietet keine Markereinstellung, um festzulegen, wo eine Linie unterhalb einer Pfeilspitze enden soll. Standardmäßig verkürzt Aspose.Slides die exportierte Linie, sodass ihr Strich nicht durch den Marker hervortritt. Rufen Sie SVGOptions.setDisableLineEndCropping mit true auf, um den Strich 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 Diamant‑Pfeilspitzen auf Linien mit 2 und 10 Punkt Breite. Es exportiert dieselbe Folie zweimal und ändert nur die Beschneidungseinstellung.
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();
}
In den anderen Linien des Beispiels ist der hervortretende Strich bei der 2‑Punkt‑Dreieckspitze weniger sichtbar. Der ausgefüllte Diamant deckt das Strichende bei beiden Breiten ab.
Text und Schriften steuern
Beim Exportieren von Folien nach SVG können Sie steuern, ob Text als Text erhalten bleibt oder in Vektorgrafiken umgewandelt wird und wie externe Schriften eingebunden oder referenziert werden. Die folgenden Optionen helfen Ihnen, visuelle Konsistenz, Textauswahl und Schriftabhängigkeiten im exportierten SVG auszubalancieren.
Alle Texte vektorisieren
Setzen Sie SVGOptions.setVectorizeText auf true, um gesamten Folientext als Vektorgrafiken zu schreiben. Das eliminiert Schrift‑Abhängigkeiten und sorgt für ein konsistenteres visuelles Ergebnis in allen Browsern, aber der Text ist dann nicht mehr als SVG‑Text auswähl‑ oder durchsuchbar.
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();
}
Auswahl, wie externe Schriften behandelt werden
SVGOptions.setExternalFontsHandling verwendet einen SvgExternalFontsHandling‑Wert für extern geladene Schriften. Wählen Sie SvgExternalFontsHandling.AddLinksToFontFiles, um separate Schriftdateien zu referenzieren, SvgExternalFontsHandling.Embed, um Schriftinformationen in das SVG einzubetten, oder SvgExternalFontsHandling.Vectorize, um nur Text, der externe Schriften verwendet, als Grafik zu rendern. Prüfen Sie die Lizenzierung der Schriften, bevor Sie sie einbetten.
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();
}
Eingebettete Bildgröße 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.
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();
}
Rasterisierungsauflösung von Metadateien steuern
SVGOptions.setMetafileRasterizationDpi legt die untere Auflösungsgrenze für die Rasterisierung von Metadateien beim SVG‑Export fest. Nutzen Sie diese Einstellung, um Detailgrad und Dateigröße auszugleichen, wenn ein EMF‑ oder WMF‑Bild rasterisiert wird. Sie definiert nicht ein globales DPI für das SVG und zwingt nicht jedes Objekt der Folie, zu einem Rasterbild zu werden.
Download metafile-rasterization.pptx, das ein EMF‑Bild mit eng beabstandeten diagonalen Linien enthält. Das folgende Beispiel exportiert die erste Folie mit drei Rasterisierungsauflösungen über ISlide.writeAsSvg. Alle anderen Exporteinstellungen bleiben identisch, sodass die Ergebnisse vergleichbar sind.
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();
}
In der Ausgabe wurde das EMF in jedem SVG als eingebettetes PNG umgesetzt. Die folgenden Messwerte beziehen sich auf die bereitgestellte Präsentation; sie stellen keine allgemeine Formel zur Umrechnung von DPI in Pixelmaße dar.
| Metafile‑Rasterisierungs‑DPI | Eingebettete PNG‑Abmessungen | 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 Bildausschnitt des eingebetteten Rasters bei gleicher vergrößerter Anzeigegröße. Die diagonalen Linien zeigen bei 72 DPI sichtbare Pixellierung und bei höheren Auflösungen glattere Kanten, während die SVG‑Datei wächst. Eine Erhöhung des Wertes verbessert nicht zwangsläufig jedes Detail oder ändert jedes exportierte Bild.
SVGOptions.setPicturesCompression steuert die Bildauflösungsreduktion und kann den Effekt einer geänderten Metadatei‑Rasterisierungsauflösung maskieren. SVGOptions.setJpegQuality steuert die JPEG‑Kodierungsqualität, nicht die Rasterisierungsauflösung der Metadatei.
Stabile IDs für Formen und Text zuweisen
Verwenden Sie ISvgShapeFormattingController, um ISvgShape.setId für jede SVG‑Form festzulegen. Um ebenfalls ISvgTSpan.setId‑Werte für Text‑tspan‑Elemente zu setzen, implementieren Sie ISvgShapeAndTextFormattingController. Weisen Sie einen der Controller mit SVGOptions.setShapeFormattingController zu.
Der folgende Controller verwendet IShape.getOfficeInteropShapeId, das für die Lebensdauer einer Form stabil ist, und einen wiederholbaren Zähler für deren Text‑Spans. Damit eignen sich die erzeugten IDs für die Nachbearbeitung einer unveränderten Präsentation.
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();
}
SVG‑Ereignis‑Handler hinzufügen
In einem ISvgShapeFormattingController rufen Sie ISvgShape.setEventHandler mit einem SvgEvent‑Wert auf, um einem exportierten Shape einen JavaScript‑Ereignis‑Handler 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.
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();
}
Die Host‑Seite kann die vom Handler referenzierte JavaScript‑Funktion definieren. Das Zuweisen von IDs und Ereignis‑Handlern ermöglicht Folien‑Betrachter, 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 Schriften sein muss. Verwenden Sie SvgExternalFontsHandling.Vectorize, wenn nur Text, der externe Schriften nutzt, in Grafiken umgewandelt werden soll.
Wie kann man ein SVG am besten verkleinern?
Beginnen Sie mit der Komprimierung eingebetteter Bilder, dem Löschen beschnittener Bildbereiche und der Wahl verlinkter Schriftdateien, wenn die Zielumgebung diese bereitstellen kann. Testen Sie das Ergebnis, da niedrigere Bildauflösung, geringere JPEG‑Qualität und vektorisierter Text jeweils unterschiedliche Qualitäts‑ und Größen‑Kompromisse mit sich bringen.
Kann ich exportierte SVG‑Elemente nach dem Export bearbeiten?
Ja. Weisen Sie IDs über einen Formatierungs‑Controller zu und wählen Sie dann die passenden SVG‑Elemente in Ihrem Nachbearbeitungs‑Tool oder Browser‑Skript aus.