Display SVG file missing text elements

Processing
1

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?

2

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

1 Like
3

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

4

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.

5

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.

6

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

Happy cakeday.

7

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.

2 Likes