search

owid / owid-grapher

A platform for creating interactive data visualizations
https://ourworldindata.org
MIT License
1.35k stars 227 forks source link

SVG exports are rendering incorrectly in SVG editing programs #2247

Open ikesau opened 1 year ago

ikesau commented 1 year ago

The following SVG export from this Grapher breaks when imported into several popular SVG editing tools. This is likely due to how MarkdownTextWrap is placing text and the hack we use to create superscript.

SVG embed (renders correctly)

annual-co2-emissions-per-country

Fixing it without any regressions for browsers may be difficult, but I'm creating this ticket so we're at least aware of the issue.

Illustrator:

image

Affinity Designer:

image

Figma:

image

marcelgerber commented 1 year ago

Just a hunch:

Currently, we place the block using CSS: <g style="transform:translate(15px, 615px)">

What I would guess has better support is: <g transform="translate(15, 615)"> (note that yes, we need to get rid of the px, too, for this to work)

ikesau commented 1 year ago

Ah right! that'll fix the DoD positioning, though the superscript issue may remain.