Renderowanie slajdów prezentacji jako obrazy SVG w Javie

O czym jest ta strona

Eksportuj slajdy PowerPoint jako obrazy SVG w Javie i kontroluj czcionki, tekst, obrazy, identyfikatory oraz zdarzenia za pomocą Aspose.Slides.

Przegląd

SVG jest skalowalnym formatem obrazu opartym na XML, który dobrze sprawdza się w publikacji internetowej, przeglądarkach slajdów, procesach dostępności oraz automatycznym przetwarzaniu po zakończeniu. Aspose.Slides eksportuje każdy slajd do osobnego pliku SVG i pozwala kontrolować sposób zapisu tekstu, czcionek, obrazów i elementów SVG.

Użyj SVGOptions gdy wyeksportowany SVG musi być kompaktowy, przewidywalny w różnych przeglądarkach lub gotowy do interaktywnego użycia.

Eksportowanie slajdu 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 w 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 użyciu IShape.writeAsSvg , gdy przeglądarka slajdów lub strona internetowa potrzebuje tylko tego kształtu.

Konfigurowanie wyjścia SVG

SVGOptions kontroluje renderowanie SVG. Dla ramek tekstowych, SVGOptions.setUseFrameSize includuje ramkę tekstową w obszarze renderowania, a SVGOptions.setUseFrameRotation określa, czy rotacja ramki jest stosowana. 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 tekstu i czcionek

Wektoryzacja całego tekstu

Ustaw SVGOptions.setVectorizeText na true, aby zapisać cały tekst slajdu jako grafikę wektorową. Eliminujesz w ten sposób zależności od czcionek i zapewniasz bardziej jednolity wygląd w różnych przeglądarkach, ale tekst nie będzie 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 czcionek zewnętrznych

SVGOptions.setExternalFontsHandling używa wartości SvgExternalFontsHandling dla czcionek ładowanych z zewnątrz. Wybierz AddLinksToFontFiles, aby odwoływać się do osobnych plików czcionek, Embed, aby dołączyć dane czcionki do SVG, lub Vectorize, aby renderować tylko tekst używający czcionek zewnętrznych jako grafikę. Sprawdź 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();
}

Zmniejszanie rozmiaru 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 jakoś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();
}

Przypisywanie stałych 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 również na elementach tekstowych tspan, zaimplementuj ISvgShapeAndTextFormattingController. Przypisz jeden z kontrolerów za pomocą SVGOptions.setShapeFormattingController.

Poniższy kontroler używa IShape.getOfficeInteropShapeId , który jest stabilny przez cały czas życia kształtu, oraz powtarzalnego licznika dla jego elementów tekstowych. Dzięki temu wygenerowane identyfikatory nadają się do dalszego 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 za pomocą SVGOptions.setShapeFormattingController i zdefiniuj funkcję JavaScript w stronie lub dokumencie SVG, który hostuje 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, do której odwołuje się obsługa zdarzenia. Przypisywanie identyfikatorów i obsługi 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 wykorzystujący czcionki zewnętrzne powinien być konwertowany na grafikę.

Jaki jest najlepszy sposób, aby zmniejszyć SVG?

Rozpocznij od kompresji osadzonych obrazów, usunięcia przyciętych obszarów obrazów oraz wyboru połączonych plików czcionek, gdy docelowe środowisko może je udostępniać. Przetestuj wynik, 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ć wyeksportowane elementy SVG po eksporcie?

Tak. Przypisz identyfikatory za pomocą kontrolera formatowania, a następnie wybierz odpowiednie elementy SVG w narzędziu do post‑processingu lub w skrypcie przeglądarki.