Exporting SVG and text doesn't work as expected

Community Help
1

Hi everyone! I have a question about exporting maps as SVG when they have text labels on them. Currently, when I try to export maps like this example:

image
image1920×924 171 KB

All my text gets whited out. The SVG code to produce the text labels is as such:

  worldMap.append("g")
      .attr("id", "names")
      .selectAll("text")
      .data(topNodes)
      .join("text")
      .attr("transform", d => `translate(${mapProjection([d[baseX], d[baseY]])})`)
      .attr("font-size", "0.3em")
      .attr("font-family", "Akkurat LL")
      .attr("fill", "#000")
      .attr("stroke", "white")
      .attr("stroke-width", "0.31em")
      .attr("paint-order", "stroke")
      .text(d => aggregationType === "Cities" ? d["city"] : d["iata"]);

Should I order the stroke in a different way to ensure that it renders correctly on my map when I export it to svg?

allRoutes (4)
allRoutes (4)1938×970 414 KB

2

paste a link to your notebook so we can fork it and experiment on a solution.

3

Would love to see the SVG to look into its structure.
Is the font available on the exported system? Does not stating a font at all help as it would use default font.
Does the paint order effect the export.

4

Most likely the font is missing in the export. Make sure that you include the font declaration inside your SVG, e.g. by adding a <style> tag with an @import rule. This notebook might also help you: Embedding Fonts Into An SVG / Fabian Iwand | Observable

Also note that you’ll have to share how/where you are viewing your exported SVG, as different viewers have different ranges of support for features such as webfonts or even CSS.

Oh, and also set a fallback font, e.g.:

.attr("font-family", "Akkurat LL, sans-serif")
2 Likes