SVG textPath not working in local image viewers

Community Help
1

Hello, I am creating an svg using D3 and have exported my code to an svg file. When I run the svg file in browsers it works as intended, but when I run it in an image viewer or editor such as gimp, it is ignoring text that is using a textPath via a hyperlink. Is there a way to make these image viewers read the hyperlink or is there another way to format my text properly to my path. The code below is how I’m referencing it, thanks!

.attr('xlink:href', function(d,i) { return '#ID' + i;})
2

How are you exporting the SVG? Are you exporting it from an Observable notebook cell using “Download SVG” in the cell menu on the left? Could you share the SVG file or the notebook?

4

I am exporting my SVG data like so:
var svgFile = $(“svg”)[0].outerHTML;
fs.writeFile(“image.svg”, svgFile, (err) => {
if(err) throw err;
});

I cannot show you my code, but an example would be located at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath, this example gives me the same issue when putting the svg in a text file and loading it on the image viewer.

5

As far as I’m aware any applications that aren’t web-based will ignore external resources. The same applies to e.g. web fonts. You could try to fetch the remote resources and embed them base64 encoded.

By the way, your snippet makes use of fs, so I assume that it’s part of a node script. What is the relation to Observable?

6

I see, thank you for explaining, I found this site through the D3 website, so I thought that the question was related. You mentioned about fetching the remote resources to embed them base64 encoded, would you happen to have a link to an example of this?

7

Sure! Check out this notebook, which embeds webfonts into an SVG:

1 Like
8

I went and imported your image using the link provided and the font does not work in non browser applications, it defaults to a regular font

9

Please see the section “Compatibility” in the notebook, right below the download button.

10

Ah I see, the issue is that I’m trying to export this SVG and use it to put in a report, and the software I’m using to write the report is not browser based, which is why I’m having this issue