# How to Resolve Text Overflow and Element Misalignment in Generated SVG Pages

> Fix text overflow and element misalignment in generated SVG pages. Learn to regenerate slides, adjust coordinates, or use a Python script for precise solutions.

- Repository: [HugoHe/ppt-master](https://github.com/hugohe3/ppt-master)
- Tags: how-to-guide
- Published: 2026-04-24

---

**Regenerate faulty slides with a high-precision LLM, manually adjust SVG coordinates, or run the [`finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/finalize_svg.py) post-processing pipeline to systematically fix overflow and alignment issues.**

The **hugohe3/ppt-master** repository generates presentation slides as SVG files with absolute-positioned text and graphics. Because an LLM calculates the layout coordinates during generation, text overflow and element misalignment typically stem from the model’s spatial reasoning limits rather than rendering bugs in the codebase itself.

## Why Overflow Occurs in LLM-Generated SVGs

PPT Master creates each slide as an SVG with absolute-positioned text and graphics. The LLM driving the generation computes all coordinates, bounding boxes, and alignment properties. When the model miscalculates text width or container boundaries, you get overflow or cropped elements. According to the project FAQ, model choice significantly impacts layout accuracy: GPT series models tend to produce more layout issues such as text overflowing containers and misaligned elements, while Claude (Opus or Sonnet) generates the most reliable layouts.

## Fix by Regenerating with a High-Precision Model

The fastest fix is often to have a more capable model recalculate the slide.

1. **Switch to Claude Opus or Sonnet** for layout-critical slides. The FAQ in [`docs/faq.md`](https://github.com/hugohe3/ppt-master/blob/main/docs/faq.md) notes that Claude produces fewer coordinate-calculation errors than GPT variants.

2. **Regenerate the specific slide** by importing the SVG back into the project manager and requesting a rewrite:

   ```bash
   python3 skills/ppt-master/scripts/project_manager.py import-sources projects/my_project slide_03.svg
   ```

   The agent will recompute the SVG coordinates and overwrite `slide_03.svg` with corrected positioning.

## Manual SVG Editing for Precise Control

When you need pixel-perfect adjustments, open the SVG in an editor and modify the offending attributes directly.

- **Adjust `x`, `y`, `dx`, and `dy` attributes** on `<text>` or `<tspan>` elements to shift content away from overflows.
- **Reposition images** that are cropped incorrectly by updating their `x` and `y` coordinates or adjusting their `width` and `height`.

Example of fixing a horizontal overflow by reducing font size and shifting the starting position:

```xml
<!-- Before -->
<text x="50" y="120">
  <tspan x="50" dy="1.2em">This is a very long line that overflows the container</tspan>
</text>

<!-- After -->
<text x="30" y="120" font-size="12">
  <tspan x="30" dy="1.2em">This is a very long line that overflows the container</tspan>
</tspan>
</text>

```

## Systematic Cleanup with the Post-Processing Pipeline

For persistent alignment and overflow issues, run the [`finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/finalize_svg.py) script. This pipeline applies idempotent transformations that cure most rendering glitches before the SVG reaches PowerPoint.

Execute specific fixes using the `--only` flag:

```bash
python3 skills/ppt-master/scripts/finalize_svg.py my_project \
    --only embed-icons fix-aspect embed-images flatten-text fix-rounded

```

Key transformations include:

- **`fix-aspect`** – Normalizes image aspect ratios to prevent stretching when PowerPoint converts the SVG, implemented in [`skills/ppt-master/scripts/finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/skills/ppt-master/scripts/finalize_svg.py) at lines 85–98.
- **`flatten-text`** – Collapses multi-line `<tspan>` structures into independent `<text>` nodes so PowerPoint’s text engine respects line breaks, found in [`skills/ppt-master/scripts/svg_finalize/flatten_tspan.py`](https://github.com/hugohe3/ppt-master/blob/main/skills/ppt-master/scripts/svg_finalize/flatten_tspan.py) at lines 68–78.
- **`fix-rounded`** – Converts `<rect>` elements with rounded corners to `<path>` objects, eliminating shape-conversion errors, defined in [`skills/ppt-master/scripts/finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/skills/ppt-master/scripts/finalize_svg.py) at lines 29–33.

Run the complete six-step pipeline to produce a clean `svg_final/` directory:

```bash
python3 skills/ppt-master/scripts/finalize_svg.py projects/my_project

```

The tools are idempotent—re-running them will only touch files that still need correction.

## Summary

- **Text overflow** in PPT Master originates from LLM coordinate-calculation limits, not code bugs.
- **Use Claude Opus/Sonnet** instead of GPT models to minimize layout errors during generation.
- **Regenerate individual slides** via [`project_manager.py`](https://github.com/hugohe3/ppt-master/blob/main/project_manager.py) to have the AI recalculate positions.
- **Edit SVG attributes** (`x`, `y`, `dx`, `dy`) manually for fine-tuned corrections.
- **Run [`finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/finalize_svg.py)** with `fix-aspect`, `flatten-text`, and `fix-rounded` to systematically clean up alignment and overflow issues.

## Frequently Asked Questions

### Why does text overflow occur in PPT Master slides?

Text overflow occurs because the LLM calculates absolute positioning coordinates for SVG elements during slide generation. When the model underestimates text width or container boundaries, the resulting `<text>` or `<tspan>` elements extend beyond their intended boxes. This is a limitation of the model’s spatial reasoning rather than a rendering bug in the PPT Master codebase.

### Which LLM produces the most reliable SVG layouts?

According to [`docs/faq.md`](https://github.com/hugohe3/ppt-master/blob/main/docs/faq.md) in the hugohe3/ppt-master repository, **Claude Opus and Sonnet** produce the most reliable SVG layouts with fewer overflow and misalignment issues. The FAQ explicitly notes that GPT series models tend to generate more layout problems, including text overflowing containers and misaligned elements.

### What is the `flatten-text` flag in [`finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/finalize_svg.py)?

The `flatten-text` flag triggers a transformation that collapses multi-line `<tspan>` structures into separate `<text>` elements. This prevents PowerPoint’s text engine from concatenating lines or ignoring line breaks, which commonly causes vertical overflow or cramped text in imported slides. The logic resides in [`skills/ppt-master/scripts/svg_finalize/flatten_tspan.py`](https://github.com/hugohe3/ppt-master/blob/main/skills/ppt-master/scripts/svg_finalize/flatten_tspan.py).

### Can I run the post-processing pipeline multiple times?

Yes. The [`finalize_svg.py`](https://github.com/hugohe3/ppt-master/blob/main/finalize_svg.py) pipeline is **idempotent**, meaning you can re-run it safely on the same project directory. It will only modify files that still require correction, making it safe to iterate until all overflow and alignment issues are resolved.