HTML & SVG Embedding

A good HTML design gives you the typography, spacing, palette, and composition for a deck. Preserve those choices when building native slides, browser captures, or a hybrid.

Choose the right output

HTML capture preserves browser pixels. It does not translate arbitrary CSS into editable PowerPoint shapes. The bundled skill's content-embedding.md guide covers the native reconstruction workflow and examples/html_embedding/ builds both versions.

Optional dependencies

pip install 'power-pptx[embedding]'
python -m playwright install chromium

The [html] and [svg] extras are also available separately. An existing Chromium can be selected with browser_path orPOWER_PPTX_CHROMIUM. These APIs are new in this source tree; check availability when using a pinned older package.

Styled sections into a deck

from pathlib import Path
from power_pptx.compose import from_html

# One visible, 1280 × 720 <section data-slide> per slide.
prs = from_html(
    Path("deck.html"),
    selector="[data-slide]",
    viewport=(1280, 720), slide_size="16:9",
    device_scale_factor=2, fit="contain",
    # For asynchronous charts: wait_for_function="window.deckReady === true"
)
prs.save("deck.pptx")

Sections are captured in DOM order with one browser session. Keep them visible in normal document flow, using fixed dimensions matching the deck. Local CSS, images, and fonts under the HTML directory are served temporarily on localhost. Inline markup should use data URLs or absolute asset URLs.

Capture waits for decoded images and ready web fonts, disables CSS animations, and hides carets. Use an explicit ready condition for application-rendered charts. Container overflow raises by default; check_overflow=False permits intentional overflow. The default wait is load; choose networkidle explicitly when needed.

Visible text is copied to notes and picture alt text. data-title,aria-label, or the first heading names each picture. Notes preserve content but do not make text inside the picture selectable or editable.

Embed individual visuals

from power_pptx import BBox, add_html_figure, add_svg_figure

picture = add_html_figure(
    slide, "diagram.html", *BBox.from_inches(1, 1.5, 8, 4.5),
    selector="#architecture", fit="contain", omit_background=True,
)
picture.alt_text = "Request flow through the gateway to services."

# Native SVG in modern Office, with a PNG companion for other renderers.
add_svg_figure(slide, "logo.svg", *BBox.from_inches(0.5, 0.5, 2, 1))

contain preserves proportions, cover crops to fill, andstretch changes proportions. Capture density changes resolution, not physical size. A CSS selector must match one visible element. JSON figure specs andfigure_slide forward capture settings through html_options.

Portable SVG

SVG inputs accept markup, bytes, paths, and binary streams. Repeated identical media are shared across slides. Use self-contained SVG with a viewBox and embedded image resources. Web fonts, scripts, foreignObject, and complex CSS filters can differ between Office and CairoSVG; capture the containing HTML for those visuals. An explicitpng_fallback can provide a high-resolution raster companion.

Compare the rendered result

Keep editable text and business data native where useful. Map browser bounds relative to each section to BBox, using the deck's real dimensions. At 1280px → 13⅓ inches, 64px CSS type maps to 48pt. Run native layout checks, then render and compare with the HTML reference: the linter cannot inspect text inside a picture. A long full_page screenshot is one image; it does not paginate a webpage.