cduck.me
Programmatically generate SVG (vector) images, animations, and interactive Jupyter widgets
Add google font embed
+95
-1
+17
README.md
+17
README.md
···
449
449
Note: The above example currently only works in `jupyter notebook`, not `jupyter lab`.
450
450
451
451
452
+
### Embed custom fonts
453
+
```python
454
+
import drawsvg as draw
455
+
456
+
d = draw.Drawing(400, 100, origin='center')
457
+
d.embed_google_font('Permanent Marker', text=set('Text with custom font'))
458
+
459
+
d.append(draw.Text('Text with custom font', 35, 0, 0, center=True,
460
+
font_family='Permanent Marker', font_style='italic'))
461
+
462
+
d.save_svg('font.svg')
463
+
d # Custom fonts work in most browsers but not in rasterize(), save_png(), or save_video()
464
+
```
465
+
466
+
[](https://github.com/cduck/drawsvg/blob/master/examples/font.svg)
467
+
468
+
452
469
---
453
470
454
471
# Full-feature install
+15
-1
drawsvg/drawing.py
+15
-1
drawsvg/drawing.py
···
6
6
import xml.sax.saxutils as xml
7
7
8
8
from . import (
9
-
types, elements as elements_module, raster, video, jupyter, native_animation
9
+
types, elements as elements_module, raster, video, jupyter,
10
+
native_animation, font_embed,
10
11
)
11
12
12
13
···
160
161
self.append(elements_module.Title(text, **kwargs))
161
162
def append_css(self, css_text):
162
163
self.css_list.append(css_text)
164
+
def embed_google_font(self, family, text=None, display='swap', **kwargs):
165
+
'''Download SVG-embeddable CSS from Google fonts.
166
+
167
+
Args:
168
+
family: Name of font family or list of font families.
169
+
text: The set of characters required from the font. Only a font
170
+
subset with these characters will be downloaded.
171
+
display: The font-display CSS value.
172
+
**kwargs: Other URL parameters sent to
173
+
https://fonts.googleapis.com/css?...
174
+
'''
175
+
self.append_css(font_embed.download_google_font_css(
176
+
family, text=text, display=display, **kwargs))
163
177
def append_javascript(self, js_text, onload=None):
164
178
if onload:
165
179
if self.svg_args.get('onload'):
+48
drawsvg/font_embed.py
+48
drawsvg/font_embed.py
···
1
+
import urllib.request, urllib.parse
2
+
import re
3
+
4
+
from . import url_encode
5
+
6
+
7
+
def download_url(url):
8
+
with urllib.request.urlopen(url) as r:
9
+
return r.read()
10
+
11
+
def download_url_to_data_uri(url, mime='application/octet-stream'):
12
+
data = download_url(url)
13
+
return url_encode.bytes_as_data_uri(data, strip_chars='', mime=mime)
14
+
15
+
def embed_css_resources(css):
16
+
'''Replace all URLs in the CSS string with downloaded data URIs.'''
17
+
regex = re.compile(r'url\((https?://[^)]*)\)')
18
+
def repl(match):
19
+
url = match[1]
20
+
uri = download_url_to_data_uri(url)
21
+
return f'url({uri})'
22
+
embedded, _ = regex.subn(repl, css)
23
+
return embedded
24
+
25
+
def download_google_font_css(family, text=None, display='swap', **kwargs):
26
+
'''Download SVG-embeddable CSS from Google fonts.
27
+
28
+
Args:
29
+
family: Name of font family or list of font families.
30
+
text: The set of characters required from the font. Only a font subset
31
+
with these characters will be downloaded.
32
+
display: The font-display CSS value.
33
+
**kwargs: Other URL parameters sent to
34
+
https://fonts.googleapis.com/css?...
35
+
'''
36
+
if not isinstance(family, str):
37
+
family = '|'.join(family) # Request a list of families
38
+
args = dict(family=family, display=display)
39
+
if text is not None:
40
+
if not isinstance(text, str):
41
+
text = ''.join(text)
42
+
args['text'] = text
43
+
args.update(kwargs)
44
+
params = urllib.parse.urlencode(args)
45
+
url = f'https://fonts.googleapis.com/css?{params}'
46
+
with urllib.request.urlopen(url) as r:
47
+
css = r.read().decode('utf-8')
48
+
return embed_css_resources(css)
+15
examples/font.svg
+15
examples/font.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
3
+
width="400" height="100" viewBox="-200.0 -50.0 400 100">
4
+
<style>/*<![CDATA[*/@font-face {
5
+
font-family: 'Permanent Marker';
6
+
font-style: normal;
7
+
font-weight: 400;
8
+
font-display: swap;
9
+
src: url(data:application/octet-stream;base64,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) format('truetype');
10
+
}
11
+
/*]]>*/</style>
12
+
<defs>
13
+
</defs>
14
+
<text x="0" y="0" font-size="35" font-family="Permanent Marker" font-style="italic" text-anchor="middle" dominant-baseline="central">Text with custom font</text>
15
+
</svg>
