Syncfusion Blazor Chart SVG Export - Exported SVG Renders Incomplete/Clipped

[Ashish Khanal]

When exporting a Syncfusion Blazor Chart as SVG using ExportAsync(ExportType.SVG, ...), the resulting SVG does not render the full chart as expected. 

Only a portion of the chart is visible, and the exported SVG appears clipped or incomplete when rendered in a browser or embedded in an email.

Runnable Minimal Repro:

https://blazorplayground.syncfusion.com/LXVSDbCoGTsotJEQ

Steps to Reproduce:

1. Render the chart and click "Export Chart as SVG".

2. The exported SVG is displayed below the chart.

3. The SVG does not show the full chart; only a portion is visible.

Expected:

The exported SVG should render the entire chart, matching what is visible in the Blazor component.

Request:

Help me get this chart exported correctly in SVG format so that I can use it to send it in emails. The PNG export won't work for my case.

Thank you.

[Ashish Khanal]

Repro code (for future reference): 

@using Syncfusion.Blazor.Charts

@using System.Text

<h3>Minimal Repro: Syncfusion Chart SVG Export Issue</h3>

<SfChart @ref="chartRef" Title="Grouped Column Chart" Width="700px" Height="400px">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" />

    <ChartPrimaryYAxis Title="Value" />

    <ChartSeriesCollection>

        @foreach (var info in SeriesInfos.OrderBy(s => s.Order))

        {

            <ChartSeries DataSource="@ChartPoints.Where(p => p.Series == info.Name)"

                         XName="Category"

                         YName="Value"

                         Name="@info.Name"

                         Fill="@info.Color"

                         Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

            </ChartSeries>

        }

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" />

    <ChartTooltipSettings Enable="true" Shared="true" Header="<b>${point.x}</b>" EnableHighlight="true" />

    <ChartEvents OnExportComplete="OnExportComplete" />

</SfChart>

<button class="e-btn" @onclick="ExportChart">Export Chart as SVG</button>

@if (!string.IsNullOrEmpty(ExportedSvgMarkup))

{

    <h4>Exported SVG Output:</h4>

    <div style="border:1px solid #ccc; margin-top:8px; padding:8px;">

        @((MarkupString)ExportedSvgMarkup)

    </div>

}

@code {

    private SfChart? chartRef;

    private string? ExportedSvgMarkup;

    // Series info

    private List<SeriesInfo> SeriesInfos = new()

    {

        new SeriesInfo("Gamma", "#a5a5a5", 1),

        new SeriesInfo("Beta", "#ed7d31", 2),

        new SeriesInfo("Alpha", "#4472c4", 3)

    };

    private List<DataPoint> ChartPoints = new()

    {

        new DataPoint("08/05-AM", "Alpha", 10),

        new DataPoint("08/05-PM", "Gamma", 12),

        new DataPoint("08/05-PM", "Beta", 15),

        new DataPoint("08/05-PM", "Alpha", 20),

        new DataPoint("08/06-PM", "Gamma", 22),

        new DataPoint("08/06-PM", "Beta", 25),

        new DataPoint("08/06-PM", "Alpha", 30),

        new DataPoint("08/07-AM", "Gamma", 32),

        new DataPoint("08/07-AM", "Beta", 35),

    };

    public record SeriesInfo(string Name, string Color, int Order);

    public class DataPoint

    {

        public DataPoint(string category, string series, double value)

        {

            Category = category;

            Series = series;

            Value = value;

        }

        public string Category { get; set; }

        public string Series { get; set; }

        public double Value { get; set; }

    }

    private async Task ExportChart()

    {

        if (chartRef is not null)

        {

            await chartRef.ExportAsync(Syncfusion.Blazor.Charts.ExportType.SVG, "ChartExport", null, false, true);

        }

    }

    private void OnExportComplete(ExportEventArgs args)

    {

        // Decode the base64 SVG and render it inline

        ExportedSvgMarkup = Encoding.UTF8.GetString(Convert.FromBase64String(args.Base64));

        StateHasChanged();

    }

}

[Durga Gopalakrishnan]

Hi Ashish,

Thank you for reaching out.

We recommend normalizing the SVG before rendering by specifying the viewBox with appropriate width, height, and aspect ratio. This ensures consistent scaling and proper rendering across different screen sizes.

For your reference, we’ve attached the updated sample along with a screenshot demonstrating the changes.

@if (!string.IsNullOrEmpty(ExportedSvgMarkup))

{

    <h4>Exported SVG Output:</h4>

    <div id="exportedSvgContainer">

        @((MarkupString)NormalizeSvg(ExportedSvgMarkup, 700, 500))  @* match your chart size *@

    </div>

}

 

@code {

    private string NormalizeSvg(string rawSvg, int w, int h)

    {

        // Remove any existing width/height that may be 0 or too small

        rawSvg = System.Text.RegularExpressions.Regex.Replace(rawSvg, @"\swidth=""[^""]*""", "");

        rawSvg = System.Text.RegularExpressions.Regex.Replace(rawSvg, @"\sheight=""[^""]*""", "");

 

        // Ensure a viewBox exists so the browser knows the intrinsic aspect ratio

        if (!System.Text.RegularExpressions.Regex.IsMatch(rawSvg, @"viewBox\s*="))

            rawSvg = rawSvg.Replace("<svg", $"<svg viewBox='0 0 {w} {h}'");

 

        // Give it an explicit size so it contributes to layout 

        // (and don’t let it collapse)

        rawSvg = rawSvg.Replace(

            "<svg",

            $"<svg width='{w}' height='{h}' preserveAspectRatio='xMidYMid meet' style='display:block'");

 

        return rawSvg;

    }

}

Sample : https://blazorplayground.syncfusion.com/BDByZPivKDaGaRdO

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.