# Display SVG file missing text elements

**URL:** <https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969>\
**Category:** Processing\
**Created:** [June 10, 2019, 3:04pm UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969 "2019-06-10T15:04:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jen](https://avatars.discourse-cdn.com/v4/letter/j/ecae2f/32.png) [@Jen](https://discourse.processing.org/u/Jen)\
**Post date:** [June 10, 2019, 3:04pm UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/1 "2019-06-10T15:04:36Z")

</div>

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

```auto
<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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 11, 2019, 12:52am UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/2 "2019-06-11T00:52:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jen](https://avatars.discourse-cdn.com/v4/letter/j/ecae2f/32.png) [@Jen](https://discourse.processing.org/u/Jen)\
**Post date:** [June 11, 2019, 1:04pm UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/3 "2019-06-11T13:04:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 13, 2019, 7:19pm UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/4 "2019-06-13T19:19:56Z")

</div>

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

- [https://github.com/processing/processing/issues?utf8=✓&q=is%3Aissue+svg](https://github.com/processing/processing/issues?utf8=%E2%9C%93&q=is%3Aissue+svg)
- [https://github.com/processing/processing/issues?utf8=✓&q=is%3Aissue+batik](https://github.com/processing/processing/issues?utf8=%E2%9C%93&q=is%3Aissue+batik)

See for example:

> <https://github.com/processing/processing/issues/3179>

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.

---

<div class="post-metadata">

**Author:** ![tribblesontoast](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tribblesontoast](https://discourse.processing.org/u/tribblesontoast)\
**Post date:** [June 19, 2019, 11:20am UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/5 "2019-06-19T11:20:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 19, 2019, 3:15pm UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/6 "2019-06-19T15:15:45Z")

</div>

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

Happy cakeday.

---

<div class="post-metadata">

**Author:** ![tribblesontoast](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tribblesontoast](https://discourse.processing.org/u/tribblesontoast)\
**Post date:** [June 25, 2019, 1:43am UTC](https://discourse.processing.org/t/display-svg-file-missing-text-elements/11969/7 "2019-06-25T01:43:12Z")

</div>

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.