Text size to small in WPF SvgViewBox and SvgCanvas

[mcdikki]

I have a SVG with very basic geometries and texts.
When I try to render it in the WPF SvgViewBox or SvgCanvas, the text is rendered way to small.
The SVG renders fine in all Browser I've tested (FF, Opera and Chromium).

WPF SvgViewBox:

Browser (Opera), expected:

My WPF part:

<svgc:SvgViewbox StreamSource="{Binding Service.SvgStream}" AutoSize="false" TextAsGeometry="True" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Service.SvgStream is a MemoryStream with the SVG data.

The svg:

<svg viewBox="0 0 5380 2370" class="layout"><defs><pattern id="svg-diagonalHatch" patternUnits="userSpaceOnUse" width="25" height="25"><path d="M-10,10 l20,-20 M0,25 l25,-25 M170,190 l20,-20" class="svg-pattern" stroke="grey" stroke-width="2" /></pattern></defs><rect width="5280" height="2070" x="0" y="300" class="svg-sheet" stroke="grey" stroke-width="5" fill="url(#svg-diagonalHatch)"/><style> .dim { font: bold 100px sans-serif; } </style><style> .ref { font: bold 125px sans-serif; fill:grey; } </style><rect x="15" y="315" width="2600" height="1150" class="svg-part svg-l2" fill="rgb(71, 193, 161)" stroke="Red" onmousemove="showSVGTooltip(evt,'5902;CO 2600 x 1150');" onmouseout="hideSVGTooltip();" /><text x="1315" y="890" class="ref" text-anchor="middle">202011: 1111</text><line stroke="blue" stroke-width="10" x1="20" x2="2610" y1="325" y2="325" /><line stroke="blue" stroke-width="10" x1="20" x2="2610" y1="1455" y2="1455" /><line stroke="blue" stroke-width="10" x1="25" x2="25" y1="320" y2="1460" /><line stroke="blue" stroke-width="10" x1="2605" x2="2605" y1="320" y2="1460" /><text x="1315" y="890" class="dim" text-anchor="middle" transform="translate(0, -455)">2600</text><text x="1315" y="890" class="dim" text-anchor="middle" transform="rotate(-90,1315,890) translate(0, -1180)">1150</text><rect x="2619.8" y="315" width="2600" height="1150" class="svg-part svg-l2" fill="rgb(71, 193, 161)" stroke="Red" onmousemove="showSVGTooltip(evt,'5902;CO 2600 x 1150');" onmouseout="hideSVGTooltip();" /><text x="3919.8" y="890" class="ref" text-anchor="middle">202011: 1111</text><line stroke="blue" stroke-width="10" x1="2624.8" x2="5214.8" y1="325" y2="325" /><line stroke="blue" stroke-width="10" x1="2624.8" x2="5214.8" y1="1455" y2="1455" /><line stroke="blue" stroke-width="10" x1="2629.8" x2="2629.8" y1="320" y2="1460" /><line stroke="blue" stroke-width="10" x1="5209.8" x2="5209.8" y1="320" y2="1460" /><text x="3919.8" y="890" class="dim" text-anchor="middle" transform="translate(0, -455)">2600</text><text x="3919.8" y="890" class="dim" text-anchor="middle" transform="rotate(-90,3919.8,890) translate(0, -1180)">1150</text><line x1="0" y1="2272.2" x2="5282.4" y2="2272.2" stroke="red" stroke-width="4.8" /><rect x="15" y="1469.8" width="2600" height="800" class="svg-part svg-l2" fill="rgb(71, 193, 161)" stroke="Red" onmousemove="showSVGTooltip(evt,'5906;CO 2600 x 800');" onmouseout="hideSVGTooltip();" /><text x="1315" y="1869.8" class="ref" text-anchor="middle">202017: 1111</text><line stroke="blue" stroke-width="10" x1="20" x2="2610" y1="1479.8" y2="1479.8" /><line stroke="blue" stroke-width="10" x1="20" x2="2610" y1="2259.8" y2="2259.8" /><line stroke="blue" stroke-width="10" x1="25" x2="25" y1="1474.8" y2="2264.8" /><line stroke="blue" stroke-width="10" x1="2605" x2="2605" y1="1474.8" y2="2264.8" /><text x="1315" y="1869.8" class="dim" text-anchor="middle" transform="translate(0, -280)">2600</text><text x="1315" y="1869.8" class="dim" text-anchor="middle" transform="rotate(-90,1315,1869.8) translate(0, -1180)">800</text><rect x="2619.8" y="1469.8" width="2600" height="800" class="svg-part svg-l2" fill="rgb(71, 193, 161)" stroke="Red" onmousemove="showSVGTooltip(evt,'5906;CO 2600 x 800');" onmouseout="hideSVGTooltip();" /><text x="3919.8" y="1869.8" class="ref" text-anchor="middle">202017: 1111</text><line stroke="blue" stroke-width="10" x1="2624.8" x2="5214.8" y1="1479.8" y2="1479.8" /><line stroke="blue" stroke-width="10" x1="2624.8" x2="5214.8" y1="2259.8" y2="2259.8" /><line stroke="blue" stroke-width="10" x1="2629.8" x2="2629.8" y1="1474.8" y2="2264.8" /><line stroke="blue" stroke-width="10" x1="5209.8" x2="5209.8" y1="1474.8" y2="2264.8" /><text x="3919.8" y="1869.8" class="dim" text-anchor="middle" transform="translate(0, -280)">2600</text><text x="3919.8" y="1869.8" class="dim" text-anchor="middle" transform="rotate(-90,3919.8,1869.8) translate(0, -1180)">800</text><line x1="0" y1="1467.4" x2="5282.4" y2="1467.4" stroke="red" stroke-width="4.8" /><text  x="2640"  y="280"  class="dim" text-anchor="middle">5280</text><text  x="0"  y="1335"  class="dim" text-anchor="middle" transform="rotate(-90,0,1335) translate(0, 5370)">2070</text><text x="0"  y="150"  class="ref" word-spacing="4">753737 - xxxFP15 - P638ST10</text></svg>

Nuget-Package:

<PackageReference Include="SharpVectors.Reloaded" Version="1.6.0" />

Framework: Net Core 3.1

Thx!

Update: Tried to add the xmlns as suggest here #93 but without a difference.

[paulushub]

@mcdikki This is due to the unsupported CSS feature, font CSS shorthand property .
The commit 49a7df8 resolves this issue. Please verify this fix.

The added font CSS shorthand property parser passes all except one of the following test cases:

string[] inputs = {
    "bold 100px sans-serif",
    "10px sans-serif",
    "bold italic small-caps 1em/1.5em verdana,sans-serif",
    "1.2em \"Fira Sans\", sans-serif",
    "italic 1.2em \"Fira Sans\", serif",
    "italic small-caps bold 16px/2 cursive",
    "small-caps bold 24px/1 sans-serif",
    "caption",
    "bold 16px/1.5 Arial, sans-serif",
    "italic small-caps normal 13px/150% Arial, Helvetica, sans-serif",
    "normal normal 23px/250%",
    "condensed oblique 12pt \"Helvetica Neue\", serif",
    "300 italic 1.3em/1.7em \"FB Armada\", sans-serif",
    "condensed oblique 25deg 800 12pt \"Helvetica Neue\", serif", //<== This one fails due to that value: 25deg
    "900 14pt/16pt \"Heisei Mincho W9\", serif",
    "800 14pt/16.5pt \"Li Sung\", serif",
    "italic small-caps bold 18px/120% \"Josefin Sans\", sans-serif"
};

[mcdikki]

@paulushub Thank you very much for the quick response. Is the fix available in the latest nuget package or do I need to add it to my project in an other way?

[paulushub]

@mcdikki There is no nuget package yet, it is committed to the repository for testing. After resolving some other issues and/or code improvements, I will create a new nuget package.

[mcdikki]

Looks good.
The text in my SVGs is rendered fine now.

Thanks again.