Missing text rendering in svg image

[leonbohmann]

Hello! I have a svg-Image containing some text. The rendering of lines and areas works fine but the text does not render.

I already tried converting the text to contours but without success.

Original Image

Rendering

Source (I truncated a lot of the tags to make it shorter)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.0"
   width="100.0252mm"
   height="52.0192mm"
   id="svg269"
   sodipodi:docname="Flaechenlast.WMF">
  <metadata
     id="metadata273">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview271"
     showgrid="false" />
  <defs
     id="defs3">
    <pattern
       id="WMFhbasepattern"
       patternUnits="userSpaceOnUse"
       width="6"
       height="6"
       x="0"
       y="0" />
  </defs>
  <path
     style="fill:#c9f6c3;fill-rule:evenodd;fill-opacity:1;stroke:none;"
     d="  M 64.896,136.128   L 245.568,175.392   L 245.568,175.392   L 346.656,107.616   L 346.656,107.616   L 303.936,98.304   L 303.936,98.304   L 245.76,137.28   L 245.76,137.28   L 249.216,143.328   L 249.216,143.328   L 245.76,143.328   L 245.76,143.328   L 242.208,143.328   L 242.208,143.328   L 245.76,137.28   L 245.76,137.28   L 139.392,114.24   L 139.392,114.24   L 107.712,107.328   L 107.712,107.328   L 64.896,136.128   L 64.896,136.128  z "
     id="path5" />
    
  ...
  
  <path
     style="fill:#000000;fill-rule:evenodd;fill-opacity:1;stroke:none;"
     d="  M 34.56,96.672   L 30.336,89.28   L 30.336,89.28   L 26.016,96.672   L 26.016,96.672   L 30.336,96.672   L 30.336,96.672   L 34.56,96.672   L 34.56,96.672  z "
     id="path205" />
  <text
     xml:space="preserve"
     style="font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;line-height:125.000000%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;text-align:start;text-anchor:start;"
     transform="matrix(1.000000,-0.000000,0.000000,1.000000,92.736000,38.208000)"
     x="0.000000"
     y="0.000000"
     id="text211"><tspan
       sodipodi:role="line"
       x="0.000000"
       y="0.000000"
       id="tspan209"><tspan
         dx="0.000000"
         dy="0.000000"
         style="fill:#000000;font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;font-family:Arial;"
         id="tspan207">V</tspan></tspan></text>
  <path
     style="fill:none;stroke:#000000;stroke-width:1.824px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
     d="  M 86.592,54.336   L 90.336,47.904  "
     id="path213" />
  
  ...
  
  <path
     style="fill:#000000;fill-rule:evenodd;fill-opacity:1;stroke:none;"
     d="  M 90.336,47.904   L 82.944,47.904   L 82.944,47.904   L 86.592,54.336   L 86.592,54.336   L 90.336,47.904   L 90.336,47.904  z "
     id="path219" />
  <text
     xml:space="preserve"
     style="font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;line-height:125.000000%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;text-align:start;text-anchor:start;"
     transform="matrix(1.000000,-0.000000,0.000000,1.000000,37.440000,93.408000)"
     x="0.000000"
     y="0.000000"
     id="text225"><tspan
       sodipodi:role="line"
       x="0.000000"
       y="0.000000"
       id="tspan223"><tspan
         dx="0.000000"
         dy="0.000000"
         style="fill:#000000;font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;font-family:Arial;"
         id="tspan221">z</tspan></tspan></text>
  <path
     style="fill:none;stroke:#000000;stroke-width:1.824px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
     d="  M 64.896,136.128   L 165.888,68.352  "
     id="path227" />
  
  ...
  
  <path
     style="fill:none;stroke:#000000;stroke-width:1.824px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
     d="  M 245.568,175.392   L 346.656,107.616  "
     id="path233" />
  <text
     xml:space="preserve"
     style="font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;line-height:125.000000%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;text-align:start;text-anchor:start;"
     transform="matrix(1.000000,-0.000000,0.000000,1.000000,171.936000,52.224000)"
     x="0.000000"
     y="0.000000"
     id="text239"><tspan
       sodipodi:role="line"
       x="0.000000"
       y="0.000000"
       id="tspan237"><tspan
         dx="0.000000"
         dy="0.000000"
         style="fill:#000000;font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;font-family:Arial;"
         id="tspan235">p</tspan></tspan></text>
  <path
     style="fill:none;stroke:#000000;stroke-width:1.824px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
     d="  M 30.336,143.232   L 92.256,156.672  "
     id="path241" />
  
	...
	
  <path
     style="fill:none;stroke:#000000;stroke-width:1.248px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;"
     d="  M 64.896,133.152   L 64.992,104.064  "
     id="path255" />
  <text
     xml:space="preserve"
     style="font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;line-height:125.000000%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;text-align:start;text-anchor:start;"
     transform="matrix(1.000000,-0.000000,0.000000,1.000000,98.304000,172.128000)"
     x="0.000000"
     y="0.000000"
     id="text261"><tspan
       sodipodi:role="line"
       x="0.000000"
       y="0.000000"
       id="tspan259"><tspan
         dx="0.000000"
         dy="0.000000"
         style="fill:#000000;font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;font-family:Arial;"
         id="tspan257">x</tspan></tspan></text>
  <text
     xml:space="preserve"
     style="font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;line-height:125.000000%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;text-align:start;text-anchor:start;"
     transform="matrix(1.000000,-0.000000,0.000000,1.000000,81.408000,115.488000)"
     x="0.000000"
     y="0.000000"
     id="text267"><tspan
       sodipodi:role="line"
       x="0.000000"
       y="0.000000"
       id="tspan265"><tspan
         dx="0.000000"
         dy="0.000000"
         style="fill:#000000;font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;font-family:Arial;"
         id="tspan263">y</tspan></tspan></text>
</svg>

[wieslawsoltes]

the <tspan> tag is not yet supported only basic <text> tags

[leonbohmann]

In your svg you have <tspan /> which is not supported currently, only simple text inside <text /> tags like <text x="20" y="35">My</text>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

  <text
     xml:space="preserve"
     style="font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;line-height:125.000000%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;text-align:start;text-anchor:start;"
     transform="matrix(1.000000,-0.000000,0.000000,1.000000,92.736000,38.208000)"
     x="0.000000"
     y="0.000000"
     id="text211"><tspan
       sodipodi:role="line"
       x="0.000000"
       y="0.000000"
       id="tspan209"><tspan
         dx="0.000000"
         dy="0.000000"
         style="fill:#000000;font-size:18.062500px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:Normal;font-family:Arial;"
         id="tspan207">V</tspan></tspan></text>

[leonbohmann]

Do you know of a way in which I convert that svg to a compatible one?

[skaman]

I'm facing the same issue too

[leonbohmann]

When exporting the svg from Illustrator or InkScape you need to convert text to paths. Another possibility is to use a XAML Converter (that is what I did) like this one.

[skaman]

Unlucky our scenario is different. From one side we have a chart library that export a chart in SVG and from the other side we render it on a PDF with QuestPDF and SKIA. I think, at the moment, the only way to workaround the problem for us, is to export the chart as PNG instead of SVG. It will be nice if tspan support will be available in future.

[leonbohmann]

I know there are some libraries which can export svgs. Maybe load them in that library (cant remember the name) and export using the text->path conversion?

[skaman]

I know there are some libraries which can export svgs. Maybe load them in that library (cant remember the name) and export using the text->path conversion?

I will look into it, thanks

[Happypig375]

Fixed by https://github.com/wieslawsoltes/Svg.Skia/pull/115

[wieslawsoltes]

Chrome: