DEV Community

IronSoftware
IronSoftware

Posted on

How to Convert SVG to PDF in C# (Tutorial)

#dotnet #csharp

SVG graphics are resolution-independent and perfect for logos, charts, and diagrams. Converting them to PDF while preserving that crisp quality requires understanding one critical detail.

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new [ChromePdfRenderer](https://ironpdf.com/blog/videos/how-to-render-html-string-to-pdf-in-csharp-ironpdf/)();
var pdf = renderer.RenderHtmlAsPdf(@"
    <html>
    <body>
        <img src='chart.svg' width='600' height='400'>
    </body>
    </html>");
pdf.SaveAs("report.pdf");
Enter fullscreen mode Exit fullscreen mode

The SVG renders at full quality in the PDF. But there's a catch—those width and height attributes are mandatory.

Why Do SVGs Need Explicit Dimensions?

SVGs are vector graphics. Unlike PNGs or JPEGs, they don't have inherent pixel dimensions. An SVG can scale to any size.

When a PDF renderer encounters an SVG without explicit dimensions, it has no reference for how large to render it. Different renderers handle this differently:

  • Some collapse the SVG to zero size
  • Some use arbitrary defaults
  • Some fail silently

The solution is explicit: always specify width and height when embedding SVGs for PDF conversion.

How Do I Convert an SVG File to PDF?

For SVG files on disk, embed them in HTML with dimensions:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var svgPath = @"C:\graphics\logo.svg";

var html = $@"
    <html>
    <body style='margin:0; padding:20px;'>
        <img src='file:///{svgPath.Replace("\\", "/")}'
             width='800'
             height='600'>
    </body>
    </html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("logo.pdf");
Enter fullscreen mode Exit fullscreen mode

The file:/// protocol loads local files. Swap forward slashes for Windows paths.

How Do I Convert Inline SVG to PDF?

If your SVG exists as a string (from a database, API, or generated programmatically):

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var svgContent = @"
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <circle cx='50' cy='50' r='40' fill='#3498db'/>
        <text x='50' y='55' text-anchor='middle' fill='white'>C#</text>
    </svg>";

var html = $@"
    <html>
    <body>
        <div style='width:400px; height:400px;'>
            {svgContent}
        </div>
    </body>
    </html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("badge.pdf");
Enter fullscreen mode Exit fullscreen mode

Inline SVGs inherit dimensions from their container. Wrapping in a div with explicit size solves the dimension problem.

How Do I Handle SVGs Without viewBox?

The viewBox attribute tells browsers how to scale SVG content. Without it, you need root-level width and height attributes:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

// SVG without viewBox - add explicit dimensions
var svgNoViewBox = @"
    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
        <rect x='10' y='10' width='180' height='180' fill='#e74c3c'/>
    </svg>";

// SVG with viewBox - dimensions come from container
var svgWithViewBox = @"
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
        <rect x='10' y='10' width='180' height='180' fill='#2ecc71'/>
    </svg>";
Enter fullscreen mode Exit fullscreen mode

If you're working with SVGs from unknown sources, validate that they have either a viewBox or explicit dimensions before conversion.

How Do I Convert Multiple SVGs to One PDF?

Combine multiple SVGs into a single page or multiple pages:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var svgs = new[] { "chart1.svg", "chart2.svg", "chart3.svg" };

// Option 1: All on one page
var singlePageHtml = @"
    <html>
    <body>
        <h1>Quarterly Charts</h1>" +
        string.Join("", svgs.Select(svg =>
            $"<img src='file:///{svg}' width='500' height='300' style='margin:20px;'>")) +
    @"</body>
    </html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(singlePageHtml);
pdf.SaveAs("charts-single-page.pdf");

// Option 2: Each SVG on its own page
var multiPageHtml = @"
    <html>
    <body>" +
        string.Join("", svgs.Select((svg, i) =>
            $@"<div style='page-break-after: always;'>
                <h2>Chart {i + 1}</h2>
                <img src='file:///{svg}' width='700' height='500'>
            </div>")) +
    @"</body>
    </html>";

var multiPagePdf = renderer.RenderHtmlAsPdf(multiPageHtml);
multiPagePdf.SaveAs("charts-multi-page.pdf");
Enter fullscreen mode Exit fullscreen mode

The page-break-after: always CSS property forces a new page after each chart.

How Do I Preserve SVG Quality in PDFs?

SVGs are inherently scalable—they don't pixelate when zoomed. To maintain this quality:

Don't rasterize prematurely. Some converters turn SVGs into bitmaps before embedding. This loses the vector quality. IronPDF's HTML-to-PDF approach preserves the SVG as vector data in the final PDF.

Set appropriate dimensions. Larger dimensions give more detail when the PDF is printed or zoomed:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Higher resolution for print-quality output
var html = @"
    <html>
    <body>
        <img src='detailed-diagram.svg' width='1200' height='800'>
    </body>
    </html>";

renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A3;
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("print-quality.pdf");
Enter fullscreen mode Exit fullscreen mode

How Do I Style SVGs for PDF Output?

CSS works on SVGs just like other HTML elements:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var html = @"
    <html>
    <head>
        <style>
            svg { border: 2px solid #333; }
            svg text { font-family: Arial, sans-serif; }
            .highlight { fill: #f39c12; }
        </style>
    </head>
    <body>
        <svg width='300' height='200' viewBox='0 0 300 200'>
            <rect class='highlight' x='20' y='20' width='260' height='160'/>
            <text x='150' y='110' text-anchor='middle'>Styled SVG</text>
        </svg>
    </body>
    </html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("styled.pdf");
Enter fullscreen mode Exit fullscreen mode

Inline styles in SVG elements work too. External stylesheets can style SVG elements if they're not blocked by scope.

How Do I Convert SVG Charts (D3.js, Chart.js)?

JavaScript-generated charts pose a challenge. The rendering happens client-side, which the PDF converter doesn't execute by default.

Option 1: Server-side rendering

Generate charts server-side using libraries like ScottPlot, OxyPlot, or LiveCharts2:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

// Using a server-side charting library
var chartSvg = GenerateChartAsSvg(salesData); // Your charting code

var html = $@"
    <html>
    <body>
        <h1>Sales Report</h1>
        <div style='width:600px; height:400px;'>
            {chartSvg}
        </div>
    </body>
    </html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
Enter fullscreen mode Exit fullscreen mode

Option 2: Enable JavaScript rendering

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript(500); // Wait for chart to render

var html = @"
    <html>
    <head>
        <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
    </head>
    <body>
        <canvas id='myChart' width='400' height='200'></canvas>
        <script>
            // Chart.js creates a canvas, not SVG
            // But the concept applies
        </script>
    </body>
    </html>";

var pdf = renderer.RenderHtmlAsPdf(html);
Enter fullscreen mode Exit fullscreen mode

What About SVGs with External References?

SVGs can reference external images, fonts, or stylesheets. These need to be accessible:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

// Set base URL so relative paths resolve correctly
renderer.RenderingOptions.BaseUrl = new Uri("https://yourcdn.com/assets/");

var html = @"
    <html>
    <body>
        <!-- SVG references /images/background.png -->
        <img src='diagram.svg' width='600' height='400'>
    </body>
    </html>";

var pdf = renderer.RenderHtmlAsPdf(html);
Enter fullscreen mode Exit fullscreen mode

The BaseUrl setting ensures relative paths in your SVG resolve to the correct location.

Quick Troubleshooting Guide

Problem Solution
SVG renders as blank Add width and height to img tag
SVG appears tiny Check viewBox; add container with dimensions
External images missing Set BaseUrl or use absolute paths
Fonts not rendering Embed fonts or use web-safe alternatives
SVG cut off Increase page size or reduce SVG dimensions

SVG to PDF conversion in C# is straightforward once you understand the dimension requirement. Explicit sizing prevents 90% of issues.

For more examples and edge cases, see the IronPDF SVG documentation.

Written by Jacob Mellor, CTO at Iron Software. Jacob created IronPDF and leads a team of 50+ engineers building .NET document processing libraries.

Top comments (0)