QuestPDF / QuestPDF

QuestPDF is a modern open-source .NET library for PDF document generation. Offering comprehensive layout engine powered by concise and discoverable C# Fluent API. Easily generate PDF reports, invoices, exports, etc.
https://www.questpdf.com
Other
11.64k stars 604 forks source link

SVG: Classes in CSS have no effect. #849

Open matte250 opened 5 months ago

matte250 commented 5 months ago

Hi,

after uppdating from 2023 to 2024 one of the problems that i encountered was that most of our SVGs do not display properly anymore. After some testing it seems like that styling from classes have no effect on the output.

Below is an example that should output a red circle but instead outputs a black circle...

using System.Diagnostics;
using QuestPDF.Fluent;
using QuestPDF.Helpers;
using QuestPDF.Infrastructure;

QuestPDF.Settings.License = LicenseType.Professional;
var filePath = "invoice.pdf";
var document = new TestDocument();

document.GeneratePdf(filePath);
Process.Start("explorer.exe", filePath);

public class TestDocument : IDocument
{
    const string Svg = """
                       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100">
                       <style type="text/css">
                        .st0{fill:red;}
                       </style>
                       <g>
                        <circle class="st0" cx="50" cy="50" r="50" />
                       </g>
                       </svg>
                       """;
    public TestDocument()
    {
    }

    public void Compose(IDocumentContainer container)
    {
        container.Page(page =>
        {
            page.Size(PageSizes.A4);
            page
                .Content()
                .Column(column =>
                {
                    column.Item().Text("Hello world!");
                    column.Item().Height(100).Svg(SvgImage.FromText(Svg)).FitArea();
                });
        });
    }
}
MarcinZiabek commented 5 months ago

Thank you for finding this issue 😄

I am afraid that CSS classes are not supported at this moment. The SVG rendering engine has changed. QuestPDF now uses the SVG module included in the Skia project. It covers the vast majority of SVG features. Only the CSS classes are not supported. You can find more information in this article: https://shopify.github.io/react-native-skia/docs/images-svg/#svg-support

I will update the documentation to highlight this finding.