Skip to content

Commit 7519ba1

Browse files
willmcguganwillmcgugan
authored
Merge pull request #2242 from Textualize/svg-redux
Svg redux
2 parents bb00fc9 + 994cd96 commit 7519ba1

File tree

10 files changed

+825
-1367
lines changed

10 files changed

+825
-1367
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [Unreleased]
9+
10+
### Changed
11+
12+
- Change SVG export to create a simpler SVG
13+
814
## [12.3.0] - 2022-04-26
915

1016
### Added

‎docs/images/svg_export.svg‎

Lines changed: 542 additions & 814 deletions
Loading

‎docs/source/conf.py‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919

2020

2121
import pkg_resources
22-
2322
import sphinx_rtd_theme
2423

2524
html_theme = "sphinx_rtd_theme"
@@ -72,3 +71,7 @@
7271
intersphinx_mapping = {"python": ("http://docs.python.org/3", None)}
7372

7473
autodoc_typehints = "description"
74+
75+
html_css_files = [
76+
"https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/fira_code.min.css"
77+
]

‎docs/source/console.rst‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,10 @@ You can customize the theme used during SVG export by importing the desired them
278278
console = Console(record=True)
279279
console.save_svg("example.svg", theme=MONOKAI)
280280

281-
Alternatively, you can create a them of your own by constructing a :class:`rich.terminal_theme.TerminalTheme` instance yourself and passing that in.
281+
Alternatively, you can create a theme of your own by constructing a :class:`rich.terminal_theme.TerminalTheme` instance yourself and passing that in.
282+
283+
.. note::
284+
The SVGs reference the Fira Code font. If you embed a Rich SVG in your page, you may also want to add a link to the `Fira Code CSS <https://cdnjs.com/libraries/firacode>`_
282285

283286
Error console
284287
-------------

‎poetry.lock‎

Lines changed: 61 additions & 59 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rich/_export_format.py‎

Lines changed: 39 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -20,123 +20,47 @@
2020
"""
2121

2222
CONSOLE_SVG_FORMAT = """\
23-
<svg width="{total_width}" height="{total_height}" viewBox="0 0 {total_width} {total_height}"
24-
xmlns="http://www.w3.org/2000/svg">
23+
<svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
2524
<style>
26-
@font-face {{
27-
font-family: "{font_family}";
28-
src: local("FiraCode-Regular"),
29-
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
30-
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
31-
font-style: normal;
32-
font-weight: 400;
33-
}}
34-
@font-face {{
35-
font-family: "{font_family}";
36-
src: local("FiraCode-Bold"),
37-
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
38-
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
39-
font-style: bold;
40-
font-weight: 700;
41-
}}
42-
.{classes_prefix}-terminal-wrapper span {{
43-
display: inline-block;
44-
white-space: pre;
45-
vertical-align: top;
46-
font-size: {font_size}px;
47-
font-family:'{font_family}','Cascadia Code',Monaco,Menlo,'DejaVu Sans Mono',consolas,'Courier New',monospace;
48-
}}
49-
.{classes_prefix}-terminal-wrapper a {{
50-
text-decoration: none;
51-
color: inherit;
52-
}}
53-
.{classes_prefix}-terminal-body .blink {{
54-
animation: {classes_prefix}-blinker 1s infinite;
55-
}}
56-
@keyframes {classes_prefix}-blinker {{
57-
from {{ opacity: 1.0; }}
58-
50% {{ opacity: 0.3; }}
59-
to {{ opacity: 1.0; }}
60-
}}
61-
.{classes_prefix}-terminal-wrapper {{
62-
padding: {margin}px;
63-
padding-top: 100px;
64-
}}
65-
.{classes_prefix}-terminal {{
66-
position: relative;
67-
display: flex;
68-
flex-direction: column;
69-
align-items: center;
70-
background-color: {theme_background_color};
71-
border-radius: 14px;
72-
box-shadow: 0 0 0 1px #484848;
73-
}}
74-
.{classes_prefix}-terminal:after {{
75-
position: absolute;
76-
width: 100%;
77-
height: 100%;
78-
content: '';
79-
border-radius: 14px;
80-
background: rgb(71,77,102);
81-
background: linear-gradient(90deg, #804D69 0%, #4E4B89 100%);
82-
transform: rotate(-4.5deg);
83-
z-index: -1;
84-
}}
85-
.{classes_prefix}-terminal-header {{
86-
position: relative;
87-
width: 100%;
88-
background-color: #2e2e2e;
89-
margin-bottom: 12px;
90-
font-weight: bold;
91-
border-radius: 14px 14px 0 0;
92-
color: {theme_foreground_color};
93-
font-size: 18px;
94-
box-shadow: inset 0px -1px 0px 0px #4e4e4e,
95-
inset 0px -4px 8px 0px #1a1a1a;
96-
}}
97-
.{classes_prefix}-terminal-title-tab {{
98-
display: inline-block;
99-
margin-top: 14px;
100-
margin-left: 124px;
101-
font-family: sans-serif;
102-
padding: 14px 28px;
103-
border-radius: 6px 6px 0 0;
104-
background-color: {theme_background_color};
105-
box-shadow: inset 0px 1px 0px 0px #4e4e4e,
106-
0px -4px 4px 0px #1e1e1e,
107-
inset 1px 0px 0px 0px #4e4e4e,
108-
inset -1px 0px 0px 0px #4e4e4e;
109-
}}
110-
.{classes_prefix}-terminal-traffic-lights {{
111-
position: absolute;
112-
top: 24px;
113-
left: 20px;
114-
}}
115-
.{classes_prefix}-terminal-body {{
116-
line-height: {line_height}px;
117-
padding: 14px;
118-
}}
119-
{stylesheet}
25+
26+
@font-face {{
27+
font-family: "Fira Code";
28+
src: local("FiraCode-Regular"),
29+
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
30+
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
31+
font-style: normal;
32+
font-weight: 400;
33+
}}
34+
@font-face {{
35+
font-family: "Fira Code";
36+
src: local("FiraCode-Bold"),
37+
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
38+
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
39+
font-style: bold;
40+
font-weight: 700;
41+
}}
42+
43+
.{unique_id}-matrix {{
44+
font-family: Fira Code, monospace;
45+
font-size: {char_height}px;
46+
font-variant: east-asian-width-values;
47+
line-height: {line_height}px;
48+
}}
49+
50+
.{unique_id}-title {{
51+
font-size: 18px;
52+
opacity: 0.8;
53+
font-weight: bold;
54+
font-family: arial;
55+
}}
56+
57+
{styles}
12058
</style>
121-
<foreignObject x="0" y="0" width="100%" height="100%">
122-
<body xmlns="http://www.w3.org/1999/xhtml">
123-
<div class="{classes_prefix}-terminal-wrapper">
124-
<div class="{classes_prefix}-terminal">
125-
<div class="{classes_prefix}-terminal-header">
126-
<svg class="{classes_prefix}-terminal-traffic-lights" width="90" height="21" viewBox="0 0 90 21" xmlns="http://www.w3.org/2000/svg">
127-
<circle cx="14" cy="8" r="8" fill="#ff6159"/>
128-
<circle cx="38" cy="8" r="8" fill="#ffbd2e"/>
129-
<circle cx="62" cy="8" r="8" fill="#28c941"/>
130-
</svg>
131-
<div class="{classes_prefix}-terminal-title-tab">{title}</div>
132-
</div>
133-
<div class="{classes_prefix}-terminal-body">
134-
{code}
135-
</div>
136-
</div>
137-
</div>
138-
</body>
139-
</foreignObject>
59+
{chrome}
60+
<g transform="translate({terminal_x}, {terminal_y})">
61+
{backgrounds}
62+
<text alignment-baseline="baseline" class="{unique_id}-matrix" font-variant="east-asian-width-values">{matrix}</text>
63+
</g>
14064
</svg>
14165
"""
14266

0 commit comments

Comments
 (0)