Esporta le diapositive di presentazione come immagini SVG su Android
Panoramica
SVG è un formato immagine basato su XML scalabile che funziona bene per la pubblicazione web, i visualizzatori di diapositive, i flussi di lavoro di accessibilità e l’elaborazione automatica post‑processo. Aspose.Slides for Android via Java esporta ogni diapositiva in un file SVG separato e consente di controllare come vengono scritti testo, caratteri, immagini e gli elementi SVG.
Usa SVGOptions quando l’SVG esportato deve essere compatto, prevedibile su tutti i browser o pronto per l’uso interattivo.
Esporta una diapositiva come SVG
Crea una Presentation, seleziona una diapositiva e scrivila su uno stream con ISlide.writeAsSvg. L’esempio seguente esporta ogni diapositiva di una presentazione come file SVG separato.
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();
}
Il nome file utilizza ISlide.getSlideNumber invece dell’indice del ciclo. È inoltre possibile esportare una forma individuale con IShape.writeAsSvg quando un visualizzatore di diapositive o una pagina web richiede solo quella forma.
Configura l’output SVG
SVGOptions controlla il rendering SVG. Per i riquadri di testo, SVGOptions.setUseFrameSize include il riquadro di testo nell’area di rendering e SVGOptions.setUseFrameRotation determina se viene applicata la rotazione del riquadro. Imposta SVGOptions.setDisableFontLigatures su true quando il testo deve essere renderizzato senza legature.
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();
}
Controlla il ritaglio delle estremità di linea alle punte delle frecce
SVG 1.1 non dispone di un’impostazione di inserimento del marcatore per specificare dove una linea deve fermarsi sotto la punta di una freccia. Per impostazione predefinita, Aspose.Slides accorcia la linea esportata affinché il tratto non sporga attraverso il marcatore. Chiama SVGOptions.setDisableLineEndCropping con true per disegnare il tratto fino all’estremità originale della linea. Questa impostazione influisce solo sull’output SVG. La linea mantiene la sua posizione e lunghezza sulla diapositiva.
L’esempio disegna punte di freccia a triangolo e a diamante su linee larghe 2 e 10 punti. Esporta la stessa diapositiva due volte, modificando solo l’opzione di ritaglio.
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();
}
Il confronto mostra la punta di freccia triangolare sulla linea da 10 punti. Con il ritaglio abilitato, la punta è affilata. Con il ritaglio disabilitato, il tratto sporge attraverso i lati inclinati del marcatore lasciando un’estremità piatta.
Nelle altre linee dell’esempio, il tratto sporgente è meno visibile sul triangolo da 2 punti. Il diamante riempito copre l’estremità del tratto in entrambe le larghezze.
Controlla testo e caratteri
Durante l’esportazione delle diapositive in SVG, è possibile controllare se il testo rimane come testo o viene convertito in grafica vettoriale, nonché come i caratteri esterni vengono inclusi o referenziati. Le seguenti opzioni ti aiutano a bilanciare la coerenza visiva, la selezione del testo e le dipendenze dei caratteri nell’SVG esportato.
Vettorizza tutto il testo
Imposta SVGOptions.setVectorizeText su true per scrivere tutto il testo della diapositiva come grafica vettoriale. Questo elimina le dipendenze dai caratteri e rende il risultato visivo più coerente tra i browser, ma il testo non è più selezionabile né ricercabile come testo SVG.
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();
}
Scegli come gestire i caratteri esterni
SVGOptions.setExternalFontsHandling utilizza un valore SvgExternalFontsHandling per i caratteri caricati esternamente. Scegli SvgExternalFontsHandling.AddLinksToFontFiles per referenziare file di caratteri separati, SvgExternalFontsHandling.Embed per includere i dati dei caratteri nell’SVG, oppure SvgExternalFontsHandling.Vectorize per renderizzare solo il testo che utilizza caratteri esterni come grafica. Verifica la licenza dei caratteri prima di incorporarli.
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();
}
Riduci le dimensioni delle immagini incorporate
Usa SVGOptions.setPicturesCompression per ridurre la risoluzione delle immagini incorporate, SVGOptions.setDeletePicturesCroppedAreas per omettere le aree di origine ritagliate e SVGOptions.setJpegQuality per controllare la qualità della codifica JPEG. Queste impostazioni riducono la dimensione del file a scapito della fedeltà dell’immagine o dei dati immagine conservati.
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();
}
Controlla la risoluzione di rasterizzazione del Metafile
SVGOptions.setMetafileRasterizationDpi imposta il limite di risoluzione inferiore per la rasterizzazione dei metafile durante l’esportazione SVG. Usalo per bilanciare dettaglio e dimensione del file quando un’immagine EMF o WMF viene rasterizzata. Non definisce un DPI globale per l’SVG né forza ogni oggetto della diapositiva a diventare un’immagine raster.
Scarica metafile-rasterization.pptx, che contiene un’immagine EMF con linee diagonali strettamente ravvicinate. L’esempio seguente esporta la sua prima diapositiva a tre risoluzioni di rasterizzazione tramite ISlide.writeAsSvg. Tutte le altre impostazioni di esportazione rimangono identiche così i risultati possono essere confrontati.
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();
}
Nell’output, l’EMF è diventato un PNG incorporato in ogni SVG. Le seguenti misurazioni sono relative alla presentazione fornita; non costituiscono una formula generale per convertire DPI in dimensioni dei pixel.
| Rasterizzazione metafile DPI | Dimensioni PNG incorporato | Dimensione file SVG (byte) |
|---|---|---|
| 72 | 1196 × 596 | 170,221 |
| 150 | 2492 × 1242 | 423,149 |
| 300 | 4983 × 2483 | 1,027,169 |
Il confronto seguente mostra la stessa area del raster incorporato alla stessa dimensione di visualizzazione ingrandita. Le linee diagonali mostrano una pixelatura visibile a 72 DPI e bordi più lisci a risoluzioni superiori, mentre il file SVG aumenta. Incrementare il valore non migliora necessariamente ogni dettaglio né modifica ogni immagine esportata.
SVGOptions.setPicturesCompression controlla la riduzione della risoluzione delle immagini e può mascherare l’effetto della variazione della risoluzione di rasterizzazione del metafile. SVGOptions.setJpegQuality controlla la qualità della codifica JPEG, non la risoluzione di rasterizzazione del metafile.
Assegna ID stabili a forme e testo
Usa ISvgShapeFormattingController per impostare ISvgShape.setId per ogni forma SVG. Per impostare anche i valori ISvgTSpan.setId sugli elementi tspan del testo, implementa ISvgShapeAndTextFormattingController. Assegna uno dei due controller con SVGOptions.setShapeFormattingController.
Il controller seguente utilizza IShape.getOfficeInteropShapeId, che è stabile per la durata della forma, e un contatore ripetibile per i suoi tspan di testo. Questo rende gli ID generati adatti per il post‑processo di una presentazione non modificata.
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();
}
Aggiungi gestori di eventi SVG
In un ISvgShapeFormattingController, chiama ISvgShape.setEventHandler con un valore SvgEvent per aggiungere un gestore di eventi JavaScript a una forma esportata. Assegna il controller con SVGOptions.setShapeFormattingController e definisci la funzione JavaScript nella pagina o nel documento SVG che ospita il risultato.
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();
}
La pagina host può definire la funzione JavaScript a cui fa riferimento il gestore. L’assegnazione di ID e gestori di eventi abilita i visualizzatori di diapositive, miglioramenti di accessibilità e altri flussi di lavoro SVG interattivi.
FAQ
Quando dovrei usare SVGOptions.setVectorizeText invece di SvgExternalFontsHandling.Vectorize?
Usa SVGOptions.setVectorizeText quando tutto il testo deve essere indipendente dai caratteri. Usa SvgExternalFontsHandling.Vectorize quando solo il testo che utilizza caratteri esterni deve essere convertito in grafica.
Qual è il modo migliore per rendere un SVG più piccolo?
Inizia comprimendo le immagini incorporate, eliminando le aree di immagine ritagliate e scegliendo file di caratteri collegati quando l’ambiente di destinazione può servirli. Testa il risultato perché una risoluzione immagine più bassa, una qualità JPEG più bassa e il testo vettorizzato hanno ciascuno compromessi diversi tra qualità e dimensione.
Posso modificare gli elementi SVG esportati dopo l’esportazione?
Sì. Assegna ID tramite un controller di formattazione, quindi seleziona gli elementi SVG corrispondenti nel tuo strumento di post‑processo o nello script del browser.