Vykreslit snímky prezentace jako SVG obrázky v PHP

Přehled

SVG je škálovatelný formát obrázků založený na XML, který se dobře hodí pro publikování na webu, prohlížeče snímků, pracovní postupy přístupnosti a automatické následné zpracování. Aspose.Slides exportuje každý snímek do samostatného souboru SVG a umožňuje vám řídit, jak jsou zapisovány text, písma, obrázky a elementy SVG.

Použijte SVGOptions, když musí být exportované SVG kompaktní, předvídatelné napříč prohlížeči nebo připravené pro interaktivní použití.

Exportovat snímek jako SVG

Vytvořte Presentation, vyberte snímek a zapište jej do proudu pomocí Slide.writeAsSvg. Následující příklad exportuje každý snímek v prezentaci jako samostatný soubor SVG.

$presentation = new Presentation("presentation.pptx");
try {
    $slideCount = java_values($presentation->getSlides()->size());

    for ($slideIndex = 0; $slideIndex < $slideCount; $slideIndex++) {
        $slide = $presentation->getSlides()->get_Item($slideIndex);
        $slideNumber = java_values($slide->getSlideNumber());
        $outputFileName = sprintf("slide-%d.svg", $slideNumber);

        $svgStream = new Java("java.io.FileOutputStream", $outputFileName);
        $slide->writeAsSvg($svgStream);
        $svgStream->close();
    }
} finally {
    $presentation->dispose();
}

Název souboru používá Slide.getSlideNumber místo indexu smyčky. Můžete také exportovat jednotlivý tvar pomocí Shape.writeAsSvg, když prohlížeč snímků nebo webová stránka potřebuje jen tento tvar.

Konfigurace výstupu SVG

SVGOptions řídí vykreslování SVG. Pro textové rámečky zahrnuje SVGOptions.setUseFrameSize textový rámec do oblasti vykreslování a SVGOptions.setUseFrameRotation určuje, zda se použije otáčení rámce. Nastavte SVGOptions.setDisableFontLigatures na true, když musí být text vykreslen bez ligatur.

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $svgOptions = new SVGOptions();
    $svgOptions->setDisableFontLigatures(true);
    $svgOptions->setUseFrameSize(true);
    $svgOptions->setUseFrameRotation(false);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "slide-with-custom-options.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $presentation->dispose();
}

Ovládání textu a písem

Při exportu snímků do SVG můžete řídit, zda text zůstane jako text nebo bude převeden na vektorovou grafiku, a jak jsou zahrnuta nebo odkazována externí písma. Následující možnosti vám pomohou vyvážit vizuální konzistenci, výběr textu a závislosti na písmu v exportovaném SVG.

Vektorizovat celý text

Nastavte SVGOptions.setVectorizeText na true, aby byl veškerý text snímku zapsán jako vektorová grafika. Tím se odstraní závislost na písmu a výsledek bude vizuálně konzistentnější napříč prohlížeči, ale text již nebude možné ve SVG vybírat ani vyhledávat.

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $svgOptions = new SVGOptions();
    $svgOptions->setVectorizeText(true);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "slide-with-vectorized-text.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $presentation->dispose();
}

Zvolte, jak zacházet s externími písmy

SVGOptions.setExternalFontsHandling používá hodnotu SvgExternalFontsHandling pro písma načítaná externě. Vyberte AddLinksToFontFiles pro odkazování na samostatné soubory písem, Embed pro zahrnutí dat písem do SVG, nebo Vectorize pro vykreslení pouze textu, který používá externí písma jako grafiky. Před vložením písem ověřte licencování písem.

$presentation = new Presentation("presentation.pptx");
try {
    $slide = $presentation->getSlides()->get_Item(0);

    $linkedFontsOptions = new SVGOptions();
    $linkedFontsOptions->setExternalFontsHandling(SvgExternalFontsHandling::AddLinksToFontFiles);
    $linkedFontsStream = new Java("java.io.FileOutputStream", "slide-with-font-links.svg");
    try {
        $slide->writeAsSvg($linkedFontsStream, $linkedFontsOptions);
    } finally {
        $linkedFontsStream->close();
    }

    $embeddedFontsOptions = new SVGOptions();
    $embeddedFontsOptions->setExternalFontsHandling(SvgExternalFontsHandling::Embed);
    $embeddedFontsStream = new Java("java.io.FileOutputStream", "slide-with-embedded-fonts.svg");
    try {
        $slide->writeAsSvg($embeddedFontsStream, $embeddedFontsOptions);
    } finally {
        $embeddedFontsStream->close();
    }

    $vectorizedExternalFontsOptions = new SVGOptions();
    $vectorizedExternalFontsOptions->setExternalFontsHandling(SvgExternalFontsHandling::Vectorize);
    $vectorizedExternalFontsStream = new Java("java.io.FileOutputStream", "slide-with-vectorized-external-fonts.svg");
    try {
        $slide->writeAsSvg($vectorizedExternalFontsStream, $vectorizedExternalFontsOptions);
    } finally {
        $vectorizedExternalFontsStream->close();
    }
} finally {
    $presentation->dispose();
}

Snížení velikosti vložených obrázků

Použijte SVGOptions.setPicturesCompression ke snížení rozlišení vložených obrázků, SVGOptions.setDeletePicturesCroppedAreas k vynechání oříznutých částí zdrojových obrázků a SVGOptions.setJpegQuality pro řízení kvality JPEG kódování. Tato nastavení snižují velikost souboru na úkor věrnosti obrazu nebo uchování dat obrazu.

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $svgOptions = new SVGOptions();
    $svgOptions->setPicturesCompression(PicturesCompression::Dpi150);
    $svgOptions->setDeletePicturesCroppedAreas(true);
    $svgOptions->setJpegQuality(80);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "compressed-slide.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $presentation->dispose();
}

Ovládání rozlišení rastrování metsouborů

SVGOptions.setMetafileRasterizationDpi nastavuje spodní limit rozlišení při rastrování metsouborů během exportu SVG. Použijte jej k vyvážení detailu a velikosti souboru, když je rastrován obrázek EMF nebo WMF. Nedefinuje globální DPI pro SVG ani nenutí každý objekt na snímku stát se rastrovým obrázkem.

Stáhněte metafile-rasterization.pptx, který obsahuje EMF obrázek s těsně umístěnými úhlopříčnými čarami. Následující příklad exportuje jeho první snímek ve třech rozlišeních rastrování pomocí Slide.writeAsSvg. Všechna ostatní nastavení exportu zůstávají shodná, aby bylo možné výsledky porovnat.

$presentation = new Presentation("metafile-rasterization.pptx");

try {
    foreach ([72, 150, 300] as $dpi) {
        $svgOptions = new SVGOptions();
        $svgOptions->setMetafileRasterizationDpi($dpi);
        $svgOptions->setPicturesCompression(PicturesCompression::Dpi330);
        $svgOptions->setJpegQuality(90);

        $outputFileName = sprintf("slide-%d.svg", $dpi);
        $svgStream = new Java("java.io.FileOutputStream", $outputFileName);

        try {
            $presentation->getSlides()->get_Item(0)->writeAsSvg($svgStream, $svgOptions);
        } finally {
            $svgStream->close();
        }
    }
} finally {
    $presentation->dispose();
}

Ve výstupu se EMF proměnil na jeden vložený PNG v každém SVG. Následující měření platí pro dodanou prezentaci; nejsou obecnou formulí pro převod DPI na rozměry pixelů.

Rozlišení rastrování metsouboru DPI Rozměry vloženého PNG Velikost souboru SVG (bajty)
72 1196 × 596 170,221
150 2492 × 1242 423,149
300 4983 × 2483 1,027,169

Porovnání níže ukazuje stejnou oblast vloženého rastru při stejném zvětšeném zobrazení. Úhlopříčkové čáry vykazují viditelnou pixelaci při 72 DPI a hladší hrany při vyšších rozlišeních, zatímco velikost SVG souboru roste. Zvýšení hodnoty nutně neznamená zlepšení každého detailu ani změnu každého exportovaného obrázku.

Zvětšený detail úhlopříčkových čar při 72, 150 a 300 DPI

SVGOptions.setPicturesCompression řídí snížení rozlišení obrázků a může skrýt efekt změny rozlišení rastrování metsouboru. SVGOptions.setJpegQuality řídí kvalitu JPEG kódování, ne rozlišení rastrování metsouboru.

Přiřazení stabilních ID tvarům a textu

Poskytněte formátovací zpětné volání pro SVGOptions.setShapeFormattingController, aby nastavil SvgShape.setId pro každý SVG tvar. Zpětné volání může také nastavit hodnoty SvgTSpan.setId na textových tspan elementech.

PhpJavaBridge nemůže zavolat PHP zpětné volání z writeAsSvg, když běží v režimu proudu. Umístěte logiku formátování do malé Java pomocné třídy, zkompilujte ji a přidejte vzniklý JAR soubor do classpath mostu. Pomocná třída může použít Shape.getOfficeInteropShapeId, který je stabilní po celou životnost tvaru, a opakovatelný čítač pro jeho textové spany. Viz Java implementace StableSvgIdController pro zdrojový kód pomocníka.

Po přidání zkompilované třídy com.example.slides.StableSvgIdController do classpath mostu ji z PHP vytvořte a přiřaďte k SVGOptions:

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $shapeFormattingController = new Java("com.example.slides.StableSvgIdController");

    $svgOptions = new SVGOptions();
    $svgOptions->setShapeFormattingController($shapeFormattingController);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "slide-with-stable-ids.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $presentation->dispose();
}

Přidání obslužných rutin událostí SVG

Ve formátovacím zpětném volání zavolejte SvgShape.setEventHandler s hodnotou SvgEvent, abyste přidali JavaScriptový obslužný program události k exportovanému tvaru. Zpětné volání přiřaďte pomocí SVGOptions.setShapeFormattingController a definujte JavaScriptovou funkci na stránce nebo v SVG dokumentu, který výsledek hostí.

Stejně jako u stabilních ID implementujte zpětné volání v Java pomocné třídě, když PhpJavaBridge používá režim proudu. Java implementace SvgEventController přiřazuje ID a obslužný program OnClick tvaru pojmenovanému ActionButton. Zkompilujte tuto pomocnou třídu, přidejte ji do classpath mostu jako com.example.slides.SvgEventController a použijte ji z PHP následovně:

$presentation = new Presentation("presentation.pptx");
$svgStream = null;
try {
    $shapeFormattingController = new Java("com.example.slides.SvgEventController");

    $svgOptions = new SVGOptions();
    $svgOptions->setShapeFormattingController($shapeFormattingController);

    $slide = $presentation->getSlides()->get_Item(0);
    $svgStream = new Java("java.io.FileOutputStream", "interactive-slide.svg");
    $slide->writeAsSvg($svgStream, $svgOptions);
} finally {
    $svgStream->close();
    $presentation->dispose();
}

Hostitelská stránka může definovat JavaScriptovou funkci odkazovanou obslužným programem. Přiřazení ID a obslužných programů umožňuje prohlížečům snímků, vylepšení přístupnosti a další interaktivní pracovní postupy SVG.

Často kladené otázky

Kdy bych měl použít SVGOptions.setVectorizeText místo SvgExternalFontsHandling.Vectorize?

Použijte SVGOptions.setVectorizeText, když musí být celý text nezávislý na písmu. Použijte SvgExternalFontsHandling.Vectorize, když by měl být převeden na grafiku jen text, který používá externí písma.

Jaký je nejlepší způsob, jak zmenšit SVG?

Začněte kompresí vložených obrázků, odstraňováním oříznutých oblastí obrázků a výběrem odkazovaných souborů písem, pokud je cílové prostředí schopno je poskytovat. Otestujte výsledek, protože nižší rozlišení obrazu, nižší kvalita JPEG a vektorizovaný text mají různé kompromisy mezi kvalitou a velikostí.

Mohu po exportu upravovat exportované elementy SVG?

Ano. Přidělte ID pomocí formátovacího zpětného volání a poté vyberte odpovídající SVG elementy ve svém nástroji pro následné zpracování nebo ve skriptu prohlížeče.