Renderizar slides de apresentação como imagens SVG em PHP

Sobre o que é esta página

Exportar slides do PowerPoint como imagens SVG em PHP e controlar fontes, texto, imagens, IDs e eventos com Aspose.Slides.

Visão geral

SVG é um formato de imagem escalável baseado em XML que funciona bem para publicação na Web, visualizadores de slides, fluxos de trabalho de acessibilidade e pós‑processamento automatizado. Aspose.Slides exporta cada slide para um arquivo SVG separado e permite controlar como texto, fontes, imagens e elementos SVG são gravados.

Use SVGOptions quando o SVG exportado precisar ser compacto, previsível entre navegadores ou pronto para uso interativo.

Exportar um slide como SVG

Crie uma Presentation, selecione um slide e grave‑o em um fluxo com Slide.writeAsSvg. O exemplo a seguir exporta cada slide de uma apresentação como um arquivo SVG separado.

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

O nome do arquivo usa Slide.getSlideNumber em vez do índice do laço. Você também pode exportar uma forma individual com Shape.writeAsSvg quando um visualizador de slides ou página da Web precisar somente dessa forma.

Configurar a saída SVG

SVGOptions controla a renderização do SVG. Para quadros de texto, SVGOptions.setUseFrameSize inclui o quadro de texto na área de renderização, e SVGOptions.setUseFrameRotation determina se a rotação do quadro é aplicada. Defina SVGOptions.setDisableFontLigatures como true quando o texto precisar ser renderizado sem ligaduras.

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

Controlar o corte de extremidade de linha em cabeças de seta

SVG 1.1 não possui configuração de inserção de marcador para especificar onde uma linha deve terminar sob uma cabeça de seta. Por padrão, Aspose.Slides encurta a linha exportada para que seu traço não ultrapasse o marcador. Chame SVGOptions::setDisableLineEndCropping com true para desenhar o traço até o ponto final original da linha. Essa configuração afeta somente a saída SVG. A linha mantém sua posição e comprimento no slide.

O exemplo desenha cabeças de seta triangular e em diamante em linhas de 2 e 10 pontos de largura. Ele exporta o mesmo slide duas vezes, alterando apenas a opção de corte.

use aspose\slides\FillType;
use aspose\slides\LineArrowheadStyle;
use aspose\slides\Presentation;
use aspose\slides\ShapeType;
use aspose\slides\SVGOptions;

$presentation = new Presentation();
try {
    $slide = $presentation->getSlides()->get_Item(0);
    $y = 40;

    foreach ([LineArrowheadStyle::Triangle, LineArrowheadStyle::Diamond] as $style) {
        foreach ([2, 10] as $width) {
            $line = $slide->getShapes()->addAutoShape(ShapeType::Line, 40, $y, 200, 0);
            $format = $line->getLineFormat();
            $format->getFillFormat()->setFillType(FillType::Solid);
            $color = new Java("java.awt.Color", 0, 0, 139);
            $format->getFillFormat()->getSolidFillColor()->setColor($color);
            $format->setWidth($width);
            $format->setEndArrowheadStyle($style);
            $y += 50;
        }
    }

    $options = new SVGOptions();
    $options->setDisableLineEndCropping(false);
    $cropped = new Java("java.io.FileOutputStream", "cropped.svg");
    try {
        $slide->writeAsSvg($cropped, $options);
    } finally {
        $cropped->close();
    }

    $options->setDisableLineEndCropping(true);
    $uncropped = new Java("java.io.FileOutputStream", "uncropped.svg");
    try {
        $slide->writeAsSvg($uncropped, $options);
    } finally {
        $uncropped->close();
    }
} finally {
    $presentation->dispose();
}

A comparação mostra a cabeça de seta triangular na linha de 10 pontos. Com o corte habilitado, a ponta fica afiada. Com o corte desabilitado, o traço ultrapassa os lados inclinados do marcador e deixa um extremo plano.

Nas demais linhas do exemplo, o traço que ultrapassa é menos visível na seta triangular de 2 pontos. O diamante preenchido cobre a extremidade do traço em ambas as larguras.

Controlar texto e fontes

Ao exportar slides para SVG, você pode controlar se o texto permanece como texto ou é convertido em gráficos vetoriais, e como fontes externas são incluídas ou referenciadas. As opções a seguir ajudam a equilibrar consistência visual, seleção de texto e dependências de fontes no SVG exportado.

Vetorização de todo o texto

Defina SVGOptions.setVectorizeText como true para gravar todo o texto do slide como gráficos vetoriais. Isso elimina dependências de fontes e torna o resultado visual mais consistente entre navegadores, porém o texto deixa de ser selecionável ou pesquisável como texto SVG.

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

Escolher como fontes externas são tratadas

SVGOptions.setExternalFontsHandling usa um valor SvgExternalFontsHandling para fontes carregadas externamente. Escolha AddLinksToFontFiles para referenciar arquivos de fontes separados, Embed para incluir os dados da fonte no SVG ou Vectorize para renderizar apenas o texto que usa fontes externas como gráficos. Verifique a licença das fontes antes de incorporá‑las.

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

Reduzir o tamanho de imagens incorporadas

Use SVGOptions.setPicturesCompression para reduzir a resolução das imagens incorporadas, SVGOptions.setDeletePicturesCroppedAreas para omitir áreas de origem recortadas e SVGOptions.setJpegQuality para controlar a qualidade da codificação JPEG. Essas configurações reduzem o tamanho do arquivo ao custo da fidelidade ou dos dados de imagem retidos.

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

Controlar a resolução de rasterização de metarquivo

SVGOptions.setMetafileRasterizationDpi define o limite inferior de resolução para rasterizar metarquivos durante a exportação SVG. Use‑lo para equilibrar detalhe e tamanho de arquivo quando uma imagem EMF ou WMF for rasterizada. Ele não define um DPI global para o SVG nem força que todo objeto do slide se torne uma imagem raster.

Faça o download de metafile-rasterization.pptx, que contém uma imagem EMF com linhas diagonais espaçadas de perto. O exemplo a seguir exporta seu primeiro slide em três resoluções de rasterização através de Slide.writeAsSvg. Todas as demais configurações de exportação permanecem idênticas para que os resultados possam ser comparados.

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

Na saída, o EMF tornou‑se um PNG incorporado em cada SVG. As medições a seguir referem‑se à apresentação fornecida; não são uma fórmula geral para converter DPI em dimensões de pixel.

DPI de rasterização do metarquivo	Dimensões do PNG incorporado	Tamanho do arquivo SVG (bytes)
72	1196 × 596	170,221
150	2492 × 1242	423,149
300	4983 × 2483	1,027,169

A comparação abaixo mostra a mesma área do raster incorporado no mesmo tamanho de exibição ampliado. As linhas diagonais apresentam pixelização visível em 72 DPI e bordas mais suaves em resoluções maiores, enquanto o arquivo SVG cresce. Aumentar o valor não melhora necessariamente cada detalhe nem altera todas as imagens exportadas.

SVGOptions.setPicturesCompression controla a redução da resolução da imagem e pode mascarar o efeito da mudança na resolução de rasterização do metarquivo. SVGOptions.setJpegQuality controla a qualidade da codificação JPEG, não a resolução de rasterização do metarquivo.

Atribuir IDs estáveis a formas e texto

Forneça um callback de formatação para SVGOptions.setShapeFormattingController a fim de definir SvgShape.setId para cada forma SVG. O callback também pode definir valores SvgTSpan.setId em elementos de texto tspan.

PhpJavaBridge não pode invocar um callback PHP a partir de writeAsSvg quando funciona em modo de fluxo. Coloque a lógica de formatação em uma pequena classe auxiliar Java, compile‑a e adicione o JAR resultante ao classpath da ponte. O auxiliar pode usar Shape.getOfficeInteropShapeId, que é estável enquanto a forma existir, e um contador repetível para seus trechos de texto. Consulte a implementação Java de StableSvgIdController para o código auxiliar.

Após adicionar a classe compilada com.example.slides.StableSvgIdController ao classpath da ponte, instancie‑a a partir do PHP e atribua‑a ao 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();
}

Adicionar manipuladores de evento SVG

Em um callback de formatação, chame SvgShape.setEventHandler com um valor SvgEvent para adicionar um manipulador de evento JavaScript a uma forma exportada. Atribua o callback com SVGOptions.setShapeFormattingController e defina a função JavaScript na página ou documento SVG que hospeda o resultado.

Assim como IDs estáveis, implemente o callback em um auxiliar Java quando o PhpJavaBridge usar modo de fluxo. A implementação Java de SvgEventController atribui um ID e um manipulador OnClick a uma forma chamada ActionButton. Compile esse auxiliar, adicione‑o ao classpath da ponte como com.example.slides.SvgEventController e use‑o a partir do PHP conforme segue:

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

A página host pode definir a função JavaScript referenciada pelo manipulador. Atribuir IDs e manipuladores de evento possibilita visualizadores de slides, aprimoramentos de acessibilidade e outros fluxos de trabalho SVG interativos.

FAQ

Quando devo usar SVGOptions.setVectorizeText em vez de SvgExternalFontsHandling.Vectorize?

Use SVGOptions.setVectorizeText quando todo o texto precisar ser independente de fontes. Use SvgExternalFontsHandling.Vectorize quando somente o texto que usa fontes externas deve ser convertido em gráficos.

Qual a melhor forma de tornar um SVG menor?

Comece comprimindo as imagens incorporadas, excluindo áreas de imagem recortadas e escolhendo arquivos de fontes vinculados quando o ambiente de destino puder servi‑los. Teste o resultado porque resolução de imagem menor, qualidade JPEG reduzida e texto vetorizado apresentam diferentes compromissos entre qualidade e tamanho.

Posso modificar os elementos SVG exportados após a exportação?

Sim. Atribua IDs por meio de um callback de formatação e, em seguida, selecione os elementos SVG correspondentes na sua ferramenta de pós‑processamento ou script de navegador.