Inline SVG Rendering

Inline SVG Rendering

Inline SVG Rendering embeds PlantUML sequence diagrams directly into the HTML report as <svg> elements instead of using <img> tags pointing to rendered image URLs. This is a prerequisite for Internal Flow Tracking (clickable arrows) and can also be used independently for better SVG integration.

---

Enabling Inline SVG Rendering

Set InlineSvgRendering = true on your ReportConfigurationOptions:

new ReportConfigurationOptions
{
    InlineSvgRendering = true,
    PlantUmlImageFormat = PlantUmlImageFormat.Svg,  // Required for Server/Local
    // ... other options
}

Note: InternalFlowTracking defaults to true, which automatically forces InlineSvgRendering to true for Server/Local rendering — you don't need to set it explicitly.

---

How It Works

The behaviour depends on your PlantUmlRendering mode:

Server Rendering (PlantUmlRendering.Server)

1. During report generation, DefaultDiagramsFetcher fetches the SVG from the PlantUML server using HttpClient (instead of generating an <img src="..."> URL).
2. The XML declaration is stripped from the SVG response.
3. The raw SVG markup is embedded directly in the HTML report inside a <div class="plantuml-inline-svg" data-diagram-type="plantuml"> container.

Local Rendering (PlantUmlRendering.Local)

1. During report generation, DefaultDiagramsFetcher renders SVG bytes in-process via IKVM using LocalDiagramRenderer.
2. The XML declaration is stripped and the SVG markup is embedded inline, same as the server path.

Browser Rendering (PlantUmlRendering.BrowserJs)

Browser rendering already produces inline SVG (the PlantUML JS engine renders <svg> elements directly into the DOM). InlineSvgRendering has no additional effect in this mode.

---

When to Use

Use case	Recommended
You want Internal Flow Tracking	Automatic — InternalFlowTracking defaults to true and forces it
You want SVGs responsive to CSS styling	Yes — inline SVGs inherit page styles
You want to manipulate diagram SVGs with JavaScript	Yes — inline SVGs are part of the DOM
You want pre-rendered <img> tags for simplicity	No — use default rendering
You want loading="lazy" on images	No — inline SVGs are part of the page content

---

Configuration

Property	Type	Default	Description
InlineSvgRendering	bool	false	When true, embeds SVG diagrams inline in the HTML instead of using <img> tags. Requires PlantUmlImageFormat.Svg for Server/Local rendering. Automatically enabled when InternalFlowTracking is true.

---

HTML Output

With inline SVG rendering enabled, the report emits:

<div class="plantuml-inline-svg" data-diagram-type="plantuml">
  <svg xmlns="http://www.w3.org/2000/svg" ...>
    <!-- Full SVG content -->
  </svg>
</div>

Instead of the default:

<img src="https://plantuml.com/plantuml/svg/..." loading="lazy" />

The data-diagram-type="plantuml" attribute is used by DiagramContextMenu to locate diagram containers for right-click context menus and other interactive features.