Intro

Exporting charts is not only about taking a screenshot. Reports, dashboards, documentation, and web pages often need output that stays sharp at any size. This post shows how TMS FNC Chart exports a professional mixed chart to SVG across FMX, VCL and WEB using the same core approach: render the chart through ITMSFNCGraphicsExport into TTMSFNCGraphicsSVG.

Quick Highlights

• One export flow works across FMX and VCL with framework-specific units and the same chart export concept.

• TTMSFNCGraphicsSVG captures the chart as real SVG output, preserving paths, text, markers, labels, and annotations.

• The sample combines an area series, bar series, and line series in one dashboard-style chart, making the export visually rich enough for real-world use.

Building a Mixed Chart for Export

The sample builds a regional revenue dashboard with three coordinated series: operating profit as an area chart, revenue as colored bars, and the plan as a line with markers. This gives the SVG export a representative mix of filled shapes, strokes, labels, markers, legend items, and annotations.

ProfitSerie := FChart.Series.Add;
ProfitSerie.LegendText := 'Operating profit';
ProfitSerie.ChartType := ctArea;
ProfitSerie.AutoYRange := arCommonZeroBased;
ProfitSerie.YValues.Positions := [ypLeft];
ProfitSerie.XValues.Positions := [xpBottom];
ProfitSerie.XGrid.Visible := True;
ProfitSerie.YGrid.Visible := True;

RevenueSerie := FChart.Series.Add;
RevenueSerie.LegendText := 'Revenue';
RevenueSerie.ChartType := ctBar;
RevenueSerie.Labels.Visible := True;
RevenueSerie.Labels.Format := '%.0f';

TargetSerie := FChart.Series.Add;
TargetSerie.LegendText := 'Plan';
TargetSerie.ChartType := ctLine;
TargetSerie.Stroke.Width := 3;
TargetSerie.Markers.Visible := True;

Each revenue bar receives its own color through MakeGraphicsColor, while the line series adds markers and an annotation to demonstrate that detailed chart elements are included in the SVG output.

Highlight: SVG export is especially useful for mixed charts because text, grid lines, markers, bars, and annotations stay crisp in documentation, reports, and web pages.

Configuring the Chart Presentation

The chart is configured with a white background, subtle axis colors, a top-right legend, and a clear title. The goal is to make the exported file immediately usable in a report or presentation without extra styling.

FChart.Fill.Color := gcWhite;
FChart.Stroke.Color := MakeGraphicsColor(205, 214, 222);
FChart.Title.Text := 'Regional Revenue, Profit and Plan';
FChart.Title.Height := 56;
FChart.Title.Font.Size := 20;
FChart.Title.Font.Color := MakeGraphicsColor(27, 49, 76);

FChart.Legend.Visible := True;
FChart.Legend.Position := lpTopRight;
FChart.Legend.Fill.Color := gcWhite;
FChart.Legend.Font.Color := gcDarkslategray;

FChart.XAxis.Positions := [xpBottom];
FChart.YAxis.Positions := [ypLeft];

The same visual setup is used in the FMX and VCL demos, so the exported result remains consistent across frameworks.

Exporting the Chart to SVG

The actual export is compact. The chart implements ITMSFNCGraphicsExport, so the sample creates a TTMSFNCGraphicsSVG instance with the chart dimensions, starts an SVG scene, and asks the chart to export itself into that graphics context.

SVG := TTMSFNCGraphicsSVG.Create(ExportWidth, ExportHeight);
try
  SVG.BeginScene;
  try
    Exporter := FChart as ITMSFNCGraphicsExport;
    Exporter.Export(SVG, RectF(0, 0, ExportWidth, ExportHeight));
  finally
    SVG.EndScene;
  end;

  TFile.WriteAllText(FileName, SVG.Build, TEncoding.UTF8);
finally
  SVG.Free;
end;

The SVG.Build call returns the complete SVG document as text. From there, the result can be written to disk, downloaded in a browser, embedded in HTML, or passed into another document generation workflow.

Highlight: The chart is not converted to a bitmap first. The export path writes vector output directly through the FNC graphics abstraction.

Output

The SVG is saved to the user's documents folder and then opened with the system default SVG viewer. This makes the demo easy to run and easy to inspect.

function TFormExportSVG.ExportFileName: string;
begin
  Result := TPath.Combine(TPath.GetDocumentsPath,
    'TMSFNCChart_SVG_Export.svg');
end;

TFile.WriteAllText(FileName, SVG.Build, TEncoding.UTF8);
TTMSFNCUtils.OpenFile(FileName);

The resulting file is plain SVG and can be opened in a browser, inserted into documentation, edited in a vector graphics tool, or embedded directly into a web page.

Conclusion

TMS FNC Chart makes SVG export a straightforward Delphi workflow: build the chart, create TTMSFNCGraphicsSVG, export through ITMSFNCGraphicsExport, and save the result. The same pattern works across FMX, VCL and WEB, making it easy to deliver sharp, scalable chart output from desktop and web applications.