search

wieslawsoltes / Svg.Skia

An SVG rendering library.
https://wieslawsoltes.github.io/Svg.Skia/
MIT License
457 stars 57 forks source link

Missing text rendering in svg image #106

Closed leonbohmann closed 2 years ago

leonbohmann commented 2 years ago

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 grafik

Rendering grafik

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 commented 2 years ago

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

leonbohmann commented 2 years ago

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 commented 2 years ago

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

skaman commented 2 years ago

I'm facing the same issue too

leonbohmann commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

wieslawsoltes commented 2 years ago

image

Chrome:

image