fix writing svg to file including emojis

[mattijn]

Fix #3002

Isolated the issue:

content = '🐄'
with open('cow.txt', mode='w') as f:
    f.write(content)

UnicodeEncodeError: 'charmap' codec can't encode character '\U0001f404' in position 0: character maps to <undefined>

The fix introduced behave as follows:

content = '🐄'.encode()
with open('cow.txt', mode='wb') as f:
    f.write(content)

So the SVG str is written as encoded utf-8 byte-string.

Edit:
Tests failing. Should not save as utf-8 byte string, make sure it is writing in utf-8 str:

content = '🐄'
with open('cow.txt', mode='w', encoding='utf-8') as f:
    f.write(content)

[mattijn]

Now all tests pass and the issue raised in OP of #3002 is fixed.

I still have the same error in Github Actions as was raised here #3002 (comment):

ERROR Error: Failed to locate text in SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/[19](https://github.com/altair-viz/altair/actions/runs/4638683091/jobs/8208723842?pr=3015#step:5:20)99/xlink" version="1.1" width="100" height="100">
    <text x="[20](https://github.com/altair-viz/altair/actions/runs/4638683091/jobs/8208723842?pr=3015#step:5:21)" y="50" font-size="45" font-family="sans-serif">🐄</text>
</svg>
["Group(Group { id: \"\", transform: Transform { a: 1.0, b: 0.0, c: 0.0, d: 1.0, e: 0.0, f: 0.0 }, opacity: NormalizedF64(FiniteF64(1.0)), blend_mode: Normal, isolate: false, clip_path: None, mask: None, filters: [], filter_fill: None, filter_stroke: None, enable_background: None })"]
    at Object.sg.textMetrics.width (<anon>:14:30)
    at Be (https://cdn.skypack.dev/-/vega-scenegraph@v4.9.4-Rfd7OGmaS9T7w10Fz4Yx/dist=es2020,mode=imports,min/optimized/vega-scenegraph.js:1:29874)
    at $ (https://cdn.skypack.dev/-/vega-view-transforms@v4.5.8-jtX42Ax7WNjhu4BmY9kH/dist=es2020,mode=imports,min/optimized/vega-view-transforms.js:1:1587)
    at https://cdn.skypack.dev/-/vega-view-transforms@v4.5.8-jtX42Ax7WNjhu4BmY9kH/dist=es2020,mode=imports,min/optimized/vega-view-transforms.js:1:1277
    at Array.forEach (<anonymous>)
    at gt.transform (https://cdn.skypack.dev/-/vega-view-transforms@v4.5.8-jtX42Ax7WNjhu4BmY9kH/dist=es2020,mode=imports,min/optimized/vega-view-transforms.js:1:1258)
    at gt.evaluate (https://cdn.skypack.dev/-/vega-dataflow@v5.7.4-DrCzG6Luqf74SfPN5Hxw/dist=es2020,mode=imports,min/optimized/vega-dataflow.js:1:15456)
    at gt.run (https://cdn.skypack.dev/-/vega-dataflow@v5.7.4-DrCzG6Luqf74SfPN5Hxw/dist=es2020,mode=imports,min/optimized/vega-dataflow.js:1:15313)
    at ne.Jt [as evaluate] (https://cdn.skypack.dev/-/vega-dataflow@v5.7.4-DrCzG6Luqf74SfPN5Hxw/dist=es2020,mode=imports,min/optimized/vega-dataflow.js:1:1[21](https://github.com/altair-viz/altair/actions/runs/4638683091/jobs/8208723842?pr=3015#step:5:22)00)
    at ne.evaluate (https://cdn.skypack.dev/-/vega-view@v5.11.0-qj2ShFtxO2P3GWqTy2DZ/dist=es2020,mode=imports,min/optimized/vega-view.js:2:1621)

But for me locally all docs are created fine. I think that this is a different issue.

VlConvert seems to work fine:

import vl_convert as vlc
from IPython.display import Image, SVG, display
vl_spec = '''
{
  "data": {"values": [{}]},
  "mark": {"type": "text", "size": 50, "text": "🐄"},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.6.1.json"
}
'''

# compile spec
png_data = vlc.vegalite_to_png(vl_spec=vl_spec)
svg_data = vlc.vegalite_to_svg(vl_spec=vl_spec)

# display as (top) SVG & (bottom) PNG
display(SVG(svg_data))
display(Image(png_data))

[mattijn]

Merging this.
cdn.skypack.dev is not included in altair, but it is defined in VlConvert, see https://github.com/search?q=repo%3Avega%2Fvl-convert%20cdn.skypack.dev&type=code. cc @jonmmease.

[jonmmease]

If the png conversion works locally but not on CI then I would expect it's a difference in what system fonts are available

[mattijn]

That feels like a sensible explanation. Thanks for the quick prompt @jonmmease!