Renderowanie slajdów prezentacji jako obrazy SVG na Androidzie
Przegląd
SVG jest skalowalnym formatem obrazu opartym na XML, który sprawdza się w publikacji internetowej, przeglądarkach slajdów, przepływach pracy dostępności oraz automatycznym przetwarzaniu. Aspose.Slides for Android via Java eksportuje każdy slajd do osobnego pliku SVG i pozwala kontrolować, jak zapisywany jest tekst, czcionki, obrazy i elementy SVG.
Użyj SVGOptions, gdy wyeksportowany SVG musi być kompaktowy, przewidywalny w różnych przeglądarkach lub gotowy do interaktywnego użycia.
Eksportuj slajd jako SVG
Utwórz Presentation, wybierz slajd i zapisz go do strumienia przy użyciu ISlide.writeAsSvg. Poniższy przykład eksportuje każdy slajd prezentacji jako osobny plik SVG.
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();
}
Nazwa pliku używa ISlide.getSlideNumber zamiast indeksu pętli. Możesz również wyeksportować pojedynczy kształt przy pomocy IShape.writeAsSvg, gdy przeglądarka slajdów lub strona internetowa potrzebuje tylko tego kształtu.
Konfiguracja wyjścia SVG
SVGOptions steruje renderowaniem SVG. Dla ramek tekstowych, SVGOptions.setUseFrameSize uwzględnia ramkę tekstową w obszarze renderowania, a SVGOptions.setUseFrameRotation określa, czy zastosować obrót ramki. Ustaw SVGOptions.setDisableFontLigatures na true, gdy tekst musi być renderowany bez ligatur.
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();
}
Kontrola przycinania końców linii przy grotach strzałek
SVG 1.1 nie posiada ustawienia wcięcia znacznika określającego, gdzie linia ma zakończyć się pod grotami strzałki. Domyślnie Aspose.Slides skraca wyeksportowaną linię, aby jej obrys nie wystawał poza znacznik. Wywołaj SVGOptions.setDisableLineEndCropping z wartością true, aby narysować obrys aż do pierwotnego punktu końcowego linii. To ustawienie wpływa tylko na wyjście SVG. Linia zachowuje swoją pozycję i długość na slajdzie.
Przykład rysuje trójkątne i diamentowe groty strzałek na liniach o szerokości 2 i 10 punktów. Eksportuje ten sam slajd dwukrotnie, zmieniając jedynie opcję przycinania.
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();
}
Porównanie pokazuje trójkątny grot na linii o szerokości 10 punktów. Przy włączonym przycinaniu końcówka jest ostra. Przy wyłączonym przycinaniu obrys wystaje przez pochyłe boki znacznika i pozostawia płaską końcówkę.
W pozostałych liniach z przykładu, wystający obrys jest mniej widoczny przy trójkącie o szerokości 2 punktów. Wypełniony diament zakrywa koniec obrysu przy obu szerokościach.
Kontrola tekstu i czcionek
Podczas eksportowania slajdów do SVG możesz kontrolować, czy tekst pozostaje tekstem, czy zostaje przekonwertowany na grafikę wektorową, oraz w jaki sposób zewnętrzne czcionki są dołączane lub odwoływane. Poniższe opcje pomagają zrównoważyć spójność wizualną, możliwość zaznaczania tekstu i zależności od czcionek w wyeksportowanym SVG.
Wektoryzuj cały tekst
Ustaw SVGOptions.setVectorizeText na true, aby zapisać cały tekst slajdu jako grafikę wektorową. Eliminują to zależności od czcionek i sprawia, że wynik wizualny jest bardziej spójny w różnych przeglądarkach, ale tekst nie jest już możliwy do zaznaczenia ani wyszukiwania jako tekst 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();
}
Wybierz sposób obsługi zewnętrznych czcionek
SVGOptions.setExternalFontsHandling korzysta z wartości SvgExternalFontsHandling dla czcionek ładowanych zewnętrznie. Wybierz SvgExternalFontsHandling.AddLinksToFontFiles, aby odwoływać się do oddzielnych plików czcionek, SvgExternalFontsHandling.Embed, aby dołączyć dane czcionki do SVG, lub SvgExternalFontsHandling.Vectorize, aby renderować tylko tekst używający zewnętrznych czcionek jako grafikę. Zweryfikuj licencję czcionek przed ich osadzeniem.
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();
}
Zmniejsz rozmiar osadzonych obrazów
Użyj SVGOptions.setPicturesCompression, aby zmniejszyć rozdzielczość osadzonych obrazów, SVGOptions.setDeletePicturesCroppedAreas, aby pominąć przycięte obszary źródłowe, oraz SVGOptions.setJpegQuality, aby kontrolować jakość kodowania JPEG. Te ustawienia zmniejszają rozmiar pliku kosztem wierności obrazu lub zachowanych danych obrazu.
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();
}
Kontrola rozdzielczości rastrowania metafili
SVGOptions.setMetafileRasterizationDpi ustawia dolny limit rozdzielczości przy rastrowaniu metafili podczas eksportu SVG. Użyj go, aby zrównoważyć szczegółowość i rozmiar pliku, gdy obraz EMF lub WMF jest rastrowany. Nie definiuje on globalnego DPI dla SVG ani nie wymusza, aby każdy obiekt na slajdzie stał się obrazem rastrowym.
Pobierz metafile-rasterization.pptx, który zawiera obraz EMF z ściśle rozmieszczonymi liniami diagonalnymi. Poniższy przykład eksportuje jego pierwszy slajd przy trzech rozdzielczościach rastrowania przy użyciu ISlide.writeAsSvg. Wszystkie pozostałe ustawienia eksportu pozostają identyczne, aby można było porównać wyniki.
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();
}
W wyniku EMF został zamieniony na jeden osadzony PNG w każdym SVG. Poniższe pomiary dotyczą dostarczonej prezentacji; nie stanowią ogólnej formuły konwersji DPI na wymiary w pikselach.
| Rastrowanie metafili DPI | Wymiary osadzonego PNG | Rozmiar pliku SVG (bajty) |
|---|---|---|
| 72 | 1196 × 596 | 170,221 |
| 150 | 2492 × 1242 | 423,149 |
| 300 | 4983 × 2483 | 1,027,169 |
Poniższe porównanie pokazuje ten sam obszar osadzonego rastra w tym samym powiększonym rozmiarze wyświetlania. Linie diagonalne wykazują widoczną pikselację przy 72 DPI oraz gładsze krawędzie przy wyższych rozdzielczościach, podczas gdy plik SVG rośnie. Zwiększenie wartości niekoniecznie poprawia każdy szczegół ani nie zmienia każdego wyeksportowanego obrazu.
SVGOptions.setPicturesCompression kontroluje redukcję rozdzielczości obrazu i może maskować wpływ zmiany rozdzielczości rastrowania metafili. SVGOptions.setJpegQuality kontroluje jakość kodowania JPEG, a nie rozdzielczość rastrowania metafili.
Przypisywanie stabilnych identyfikatorów kształtom i tekstowi
Użyj ISvgShapeFormattingController, aby ustawić ISvgShape.setId dla każdego kształtu SVG. Aby ustawić wartości ISvgTSpan.setId na elementach tekstowych tspan, zaimplementuj ISvgShapeAndTextFormattingController. Przypisz dowolny kontroler przy użyciu SVGOptions.setShapeFormattingController.
Poniższy kontroler używa IShape.getOfficeInteropShapeId, który jest stabilny przez cały okres życia kształtu, oraz powtarzalnego licznika dla jego fragmentów tekstowych. Dzięki temu wygenerowane identyfikatory są odpowiednie do późniejszego przetwarzania niezmienionej prezentacji.
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();
}
Dodawanie obsługi zdarzeń SVG
W ISvgShapeFormattingController wywołaj ISvgShape.setEventHandler z wartością SvgEvent, aby dodać obsługę zdarzenia JavaScript do wyeksportowanego kształtu. Przypisz kontroler przy użyciu SVGOptions.setShapeFormattingController i zdefiniuj funkcję JavaScript na stronie lub w dokumencie SVG, który udostępnia wynik.
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();
}
Strona hostująca może zdefiniować funkcję JavaScript odwołującą się do obsługi. Przypisywanie identyfikatorów i obsługiwaczy zdarzeń umożliwia przeglądarki slajdów, ulepszenia dostępności oraz inne interaktywne przepływy pracy z SVG.
FAQ
Kiedy powinienem używać SVGOptions.setVectorizeText zamiast SvgExternalFontsHandling.Vectorize?
Użyj SVGOptions.setVectorizeText, gdy cały tekst musi być niezależny od czcionek. Użyj SvgExternalFontsHandling.Vectorize, gdy tylko tekst korzystający z zewnętrznych czcionek powinien być konwertowany na grafikę.
Jaki jest najlepszy sposób na zmniejszenie rozmiaru SVG?
Rozpocznij od kompresji osadzonych obrazów, usunięcia przyciętych obszarów obrazów oraz wyboru powiązanych plików czcionek, gdy docelowe środowisko może je udostępniać. Przetestuj rezultat, ponieważ niższa rozdzielczość obrazu, niższa jakość JPEG i wektoryzowany tekst mają różne kompromisy między jakością a rozmiarem.
Czy mogę modyfikować elementy SVG po eksporcie?
Tak. Przypisz identyfikatory za pomocą kontrolera formatowania, a następnie wybierz pasujące elementy SVG w swoim narzędziu do post‑przetwarzania lub skrypcie przeglądarki.