SVG: Classes in CSS have no effect.

[matte250]

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]

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.