Display SVG file missing text elements

I am using processing 3 and when I was displaying a svg file, all the text tags are missing.
Here is a example of text tag in the svg file

<g id="g4408" transform="matrix(0.41926233,0,0,0.41926233,358.69347,78.772123)">
      <text linespacing="125%" id="text4402" y="141.68008" x="1300.9614" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve">
        <tspan y="141.68008" x="1300.9614" id="tspan4404" role="line">Hello</tspan>
        <tspan id="tspan4406" y="191.68008" x="1300.9614" role="line">World</tspan>
      </text>
    </g>

The code to load the image:

PShape por_shp;
por_shp = loadShape(image);
shapeMode(CENTER);
shape(por_shp, 0, 0, dx, dy);

Other elements are all showing properly, only these texts are missing.

Is there anyone has any idea?

yes, actually the SVG renders only using the basic SVG features,
newer ones are ignored or even lead to error.

1 Like

Thanks. Do you know if there is any library can be used to render all the features?

I’m not sure – I’ve seen past discussion of integrating Batik, but it seemed like a Big Project at the time.

See for example:

Could your use case convert the SVGs to rastor on load? That might be a way of using inline conversion with a 3rd party or even command-line tool, and then dealing with a cache of PImages.

Simplest solution I use is to expand the text to paths in whatever vector editor you use. The text is no longer editable but it renders just fine.

So, change text-to-paths in Illustrator, or Inkscape, or etc, then save? What editor do you use?

Happy cakeday.

Adobe Illustrator CC (Creative Cloud) is my primary vector editor, I’m sure you could do this in Inkscape, I haven’t.

In Illustrator:

Select text > object > expand.

Outputting the SVG I use these settings:

File > Save As >  save as type : .svg > use artboards > range > select artboard number that you want to export

SVG Profiles: SVG 1.1
Type: Convert to outline
Image Location: Embed
CSS Properties: Presentation Attributes
Decimal Places: 1
Encoding: Unicode (UTF-8)

This always gives me a .svg that renders properly, although just as I said before, text is not editable as it is a path.

1 Like