Exporting SVG and text doesn't work as expected

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:

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?

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

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.

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