Render Slide Presentasi sebagai Gambar SVG di Android

Tentang apa halaman ini

Ekspor slide PowerPoint sebagai gambar SVG di Android dan kendalikan font, teks, gambar, ID, serta peristiwa dengan Aspose.Slides.

Gambaran Umum

SVG adalah format gambar berbasis XML yang skalabel dan bekerja dengan baik untuk penerbitan web, penampil slide, alur kerja aksesibilitas, dan pemrosesan pasca otomatis. Aspose.Slides untuk Android via Java mengekspor setiap slide ke file SVG terpisah dan memungkinkan Anda mengontrol bagaimana teks, font, gambar, dan elemen SVG ditulis.

Gunakan SVGOptions ketika SVG yang diekspor harus kompak, dapat diprediksi di semua peramban, atau siap untuk penggunaan interaktif.

Mengekspor Slide sebagai SVG

Buat sebuah Presentation, pilih sebuah slide, dan tulis ke aliran dengan ISlide.writeAsSvg. Contoh berikut mengekspor setiap slide dalam sebuah presentasi sebagai file SVG terpisah.

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();
}

Nama file menggunakan ISlide.getSlideNumber bukan indeks perulangan. Anda juga dapat mengekspor bentuk individual dengan IShape.writeAsSvg ketika penampil slide atau halaman web hanya membutuhkan bentuk tersebut.

Mengkonfigurasi Output SVG

SVGOptions mengontrol perenderan SVG. Untuk bingkai teks, SVGOptions.setUseFrameSize menyertakan bingkai teks dalam area perenderan, dan SVGOptions.setUseFrameRotation menentukan apakah rotasi bingkai diterapkan. Setel SVGOptions.setDisableFontLigatures ke true ketika teks harus dirender tanpa 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();
}

Mengontrol Teks dan Font

Vektorkan Semua Teks

Setel SVGOptions.setVectorizeText ke true untuk menulis semua teks slide sebagai grafik vektor. Ini menghilangkan ketergantungan pada font dan membuat hasil visual lebih konsisten di semua peramban, tetapi teks tidak lagi dapat dipilih atau dicari sebagai teks 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();
}

Pilih Cara Penanganan Font Eksternal

SVGOptions.setExternalFontsHandling menggunakan nilai SvgExternalFontsHandling untuk font yang dimuat secara eksternal. Pilih SvgExternalFontsHandling.AddLinksToFontFiles untuk merujuk file font terpisah, SvgExternalFontsHandling.Embed untuk menyertakan data font dalam SVG, atau SvgExternalFontsHandling.Vectorize untuk merender hanya teks yang menggunakan font eksternal sebagai grafik. Verifikasi lisensi font sebelum menyematkan font.

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();
}

Kurangi Ukuran Gambar Tersemat

Gunakan SVGOptions.setPicturesCompression untuk mengurangi resolusi gambar tersemat, SVGOptions.setDeletePicturesCroppedAreas untuk menghilangkan area sumber yang dipotong, dan SVGOptions.setJpegQuality untuk mengontrol kualitas enkoding JPEG. Pengaturan ini mengurangi ukuran berkas dengan mengorbankan kesetiaan gambar atau data gambar yang dipertahankan.

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();
}

Tetapkan ID Stabil untuk Bentuk dan Teks

Gunakan ISvgShapeFormattingController untuk menyetel ISvgShape.setId bagi setiap bentuk SVG. Untuk menyetel nilai ISvgTSpan.setId pada elemen tspan teks juga, terapkan ISvgShapeAndTextFormattingController. Tetapkan salah satu controller dengan SVGOptions.setShapeFormattingController.

Pengontrol berikut menggunakan IShape.getOfficeInteropShapeId, yang stabil selama masa hidup bentuk, dan penghitung berulang untuk rentang teksnya. Ini menjadikan ID yang dihasilkan cocok untuk pemrosesan pasca pada presentasi yang tidak diubah.

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();
}

Tambahkan Penangan Peristiwa SVG

Dalam sebuah ISvgShapeFormattingController, panggil ISvgShape.setEventHandler dengan nilai SvgEvent untuk menambahkan penangan peristiwa JavaScript pada bentuk yang diekspor. Tetapkan controller dengan SVGOptions.setShapeFormattingController dan definisikan fungsi JavaScript di halaman atau dokumen SVG yang menampung hasil tersebut.

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();
}

Halaman host dapat mendefinisikan fungsi JavaScript yang dirujuk oleh penangan. Penetapan ID dan penangan peristiwa memungkinkan penampil slide, peningkatan aksesibilitas, dan alur kerja SVG interaktif lainnya.

FAQ

Kapan saya harus menggunakan SVGOptions.setVectorizeText alih-alih SvgExternalFontsHandling.Vectorize?

Gunakan SVGOptions.setVectorizeText ketika semua teks harus independen dari font. Gunakan SvgExternalFontsHandling.Vectorize ketika hanya teks yang menggunakan font eksternal yang harus diubah menjadi grafik.

Apa cara terbaik untuk memperkecil ukuran SVG?

Mulailah dengan mengompres gambar tersemat, menghapus area gambar yang dipotong, dan memilih file font yang ditautkan ketika lingkungan target dapat menyediakannya. Uji hasilnya karena resolusi gambar yang lebih rendah, kualitas JPEG yang lebih rendah, dan teks yang dipindai menjadi vektor masing‑masing memiliki kompromi kualitas dan ukuran yang berbeda.

Bisakah saya memodifikasi elemen SVG yang diekspor setelah ekspor?

Ya. Tetapkan ID melalui controller format, lalu pilih elemen SVG yang cocok dalam alat pemrosesan pasca atau skrip peramban Anda.