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 acara 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, serta pemrosesan otomatis setelahnya. Aspose.Slides untuk Android melalui 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 seluruh peramban, atau siap untuk penggunaan interaktif.

Ekspor Slide sebagai SVG

Buat sebuah Presentation, pilih sebuah slide, dan tuliskan ke stream dengan ISlide.writeAsSvg. Contoh berikut mengekspor setiap slide dalam 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.

Konfigurasikan Output SVG

SVGOptions mengontrol rendering SVG. Untuk bingkai teks, SVGOptions.setUseFrameSize menyertakan bingkai teks dalam area rendering, dan SVGOptions.setUseFrameRotation menentukan apakah rotasi bingkai diterapkan. Atur 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();
}

Kendalikan Pemangkasan Ujung Garis pada Kepala Panah

SVG 1.1 tidak memiliki pengaturan inset penanda untuk menentukan di mana garis harus berhenti di bawah kepala panah. Secara default, Aspose.Slides memendekkan garis yang diekspor sehingga goresannya tidak menonjol melalui penanda. Panggil SVGOptions.setDisableLineEndCropping dengan true untuk menggambar goresan hingga ke titik akhir asli garis. Pengaturan ini hanya memengaruhi output SVG. Garis tetap mempertahankan posisi dan panjangnya pada slide.

Contoh ini menggambar kepala panah segitiga dan berlian pada garis dengan lebar 2 dan 10 poin. Ia mengekspor slide yang sama dua kali, hanya mengubah opsi pemangkasan.

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

Perbandingan memperlihatkan kepala panah segitiga pada garis 10 poin. Dengan pemangkasan diaktifkan, ujungnya tajam. Dengan pemangkasan dinonaktifkan, goresan menonjol melalui sisi miring penanda dan meninggalkan ujung datar.

Segitiga 10 poin yang diperbesar dengan ujung tajam ketika pemangkasan diaktifkan dan ujung datar ketika pemangkasan dinonaktifkan

Pada garis lain dari contoh, goresan yang menonjol kurang terlihat pada segitiga 2 poin. Berlian yang diisi menutupi ujung goresan pada kedua lebar.

Kendalikan Teks dan Font

Saat mengekspor slide ke SVG, Anda dapat mengontrol apakah teks tetap sebagai teks atau diubah menjadi grafik vektor, serta bagaimana font eksternal termasuk atau direferensikan. Opsi-opsi berikut membantu Anda menyeimbangkan konsistensi visual, pemilihan teks, dan ketergantungan font dalam SVG yang diekspor.

Vektorkan Semua Teks

Atur SVGOptions.setVectorizeText ke true untuk menuliskan semua teks slide sebagai grafik vektor. Ini menghilangkan ketergantungan pada font dan membuat hasil visual lebih konsisten di seluruh peramban, namun 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 ke 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 pengkodean JPEG. Pengaturan ini mengurangi ukuran file 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();
}

Kendalikan Resolusi Rasterisasi Metafile

SVGOptions.setMetafileRasterizationDpi menentukan batas resolusi rendah untuk rasterisasi metafile selama ekspor SVG. Gunakan ini untuk menyeimbangkan detail dan ukuran file ketika gambar EMF atau WMF di‑rasterisasi. Ini tidak menentukan DPI global untuk SVG atau memaksa setiap objek pada slide menjadi gambar raster.

Unduh metafile-rasterization.pptx, yang berisi gambar EMF dengan garis diagonal berjarak rapat. Contoh berikut mengekspor slide pertamanya pada tiga resolusi rasterisasi melalui ISlide.writeAsSvg. Semua pengaturan ekspor lainnya tetap identik sehingga hasilnya dapat dibandingkan.

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

Dalam output, EMF menjadi satu PNG tersemat di setiap SVG. Pengukuran berikut adalah untuk presentasi yang disertakan; tidak merupakan rumus umum untuk mengonversi DPI ke dimensi piksel.

DPI rasterisasi Metafile	Dimensi PNG Tersemat	Ukuran file SVG (byte)
72	1196 × 596	170,221
150	2492 × 1242	423,149
300	4983 × 2483	1,027,169

Perbandingan di bawah memperlihatkan area yang sama dari raster tersemat pada ukuran tampilan yang diperbesar sama. Garis diagonal menunjukkan pixelasi yang terlihat pada 72 DPI dan tepi yang lebih halus pada resolusi lebih tinggi, sementara ukuran file SVG meningkat. Meningkatkan nilai tersebut tidak selalu memperbaiki setiap detail atau mengubah setiap gambar yang diekspor.

Detail garis diagonal yang diperbesar pada 72, 150, dan 300 DPI

SVGOptions.setPicturesCompression mengontrol pengurangan resolusi gambar dan dapat menyamarkan efek perubahan resolusi rasterisasi metafile. SVGOptions.setJpegQuality mengontrol kualitas pengkodean JPEG, bukan resolusi rasterisasi metafile.

Berikan ID Stabil untuk Bentuk dan Teks

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

Kontroler berikut menggunakan IShape.getOfficeInteropShapeId, yang stabil selama masa hidup bentuk, dan penghitung berulang untuk rentang teksnya. Ini membuat ID yang dihasilkan cocok untuk pemrosesan lanjutan 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 Penangkap Acara SVG

Dalam sebuah ISvgShapeFormattingController, panggil ISvgShape.setEventHandler dengan nilai SvgEvent untuk menambahkan penangkap acara JavaScript ke bentuk yang diekspor. Tetapkan kontroler dengan SVGOptions.setShapeFormattingController dan definisikan fungsi JavaScript di halaman atau dokumen SVG yang menampung hasilnya.

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 direferensikan oleh penangkap. Penetapan ID dan penangkap acara memungkinkan penampil slide, peningkatan aksesibilitas, dan alur kerja SVG interaktif lainnya.

Tanya Jawab

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 membuat SVG lebih kecil?

Mulailah dengan mengompresi 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 vektorisasi masing‑masing memiliki kompromi kualitas dan ukuran yang berbeda.

Apakah saya dapat memodifikasi elemen SVG yang diekspor setelah ekspor?

Ya. Tetapkan ID melalui kontroler pemformatan, lalu pilih elemen SVG yang cocok dalam alat pemrosesan lanjutan atau skrip peramban Anda.

Konversi PPT dan PPTX ke PDF di Android [Fitur Lanjutan Termasuk] Konversi PPT dan PPTX ke JPG di Android