Repository: Textualize/rich

Issue:
[BUG] SVG gets surrounded in a black box
**Describe the bug**

Making an SVG, ideally a light-mode SVG, creates a black box around the terminal with square edges. Ideally, I think, the corners could be rounded to match the terminal application, otherwise, the box should be removed. Or both + a drop shadow, which would look really nice, I think. This is on the `terminal` div.

![result](https://user-images.githubusercontent.com/4616906/161826947-223c22a7-b5f9-413d-9b45-06dfca82e7c8.svg)

(I'm not sure why this only shows the top corner in the GitHub preview, but you still the extra box corner a bit there depending on your GitHub mode. Hey, you can click it and see the whole thing, nice! Thought it does lose some but not all of the styling. Though I'd also really like a way to just display the inner contents too with color inline. Anyway, back to the issue...)

PNG images to illustrate:

<img width="109" alt="Screen Shot 2022-04-05 at 2 43 45 PM" src="https://user-images.githubusercontent.com/4616906/161827390-eb475297-4a1f-4cb0-aefd-470bedc8eb1a.png">

<img width="308" alt="Screen Shot 2022-04-05 at 2 43 54 PM" src="https://user-images.githubusercontent.com/4616906/161827398-0d7c6cfa-2509-435e-96d3-461c6cb50dba.png">

Ahhh, this might be a Safari bug. There's a border radius already, but it's not showing up on the the `terminal` div. Replacing outline with `box-shadow: black 5px 5px 10px;` does look fantastic, though, and that does follow the curved outline even on Safari.

<img width="507" alt="Screen Shot 2022-04-05 at 2 57 47 PM" src="https://user-images.githubusercontent.com/4616906/161830253-68c59e87-bf3d-4e5e-8682-9bd29c175649.png">


This seems to be a bug on Safari (https://github.com/tailwindlabs/tailwindcss/discussions/7649 and others) that used to be present on other browsers, but now mostly Safari.

**Platform**
<details>
<summary>Click to expand</summary>

What platform (Win/Linux/Mac) are you running on? What terminal software are you using?

macOS, Safari.

I may ask you to copy and paste the output of the following commands. It may save some time if you do it now.

If you're using Rich in a terminal:

```console
$ python -m rich.diagnose
╭───────────────────────── <class 'rich.console.Console'> ─────────────────────────╮
│ A high level console interface.                                                  │
│                                                                                  │
│ ╭──────────────────────────────────────────────────────────────────────────────╮ │
│ │ <console width=193 ColorSystem.TRUECOLOR>                                    │ │
│ ╰──────────────────────────────────────────────────────────────────────────────╯ │
│                                                                                  │
│     color_system = 'truecolor'                                                   │
│         encoding = 'utf-8'                                                       │
│             file = <_io.TextIOWrapper name='<stdout>' mode='w' encoding='utf-8'> │
│           height = 75                                                            │
│    is_alt_screen = False                                                         │
│ is_dumb_terminal = False                                                         │
│   is_interactive = True                                                          │
│       is_jupyter = False                                                         │
│      is_terminal = True                                                          │
│   legacy_windows = False                                                         │
│         no_color = False                                                         │
│          options = ConsoleOptions(                                               │
│                        size=ConsoleDimensions(width=193, height=75),             │
│                        legacy_windows=False,                                     │
│                        min_width=1,                                              │
│                        max_width=193,                                            │
│                        is_terminal=True,                                         │
│                        encoding='utf-8',                                         │
│                        max_height=75,                                            │
│                        justify=None,                                             │
│                        overflow=None,                                            │
│                        no_wrap=False,                                            │
│                        highlight=None,                                           │
│                        markup=None,                                              │
│                        height=None                                               │
│                    )                                                             │
│            quiet = False                                                         │
│           record = False                                                         │
│         safe_box = True                                                          │
│             size = ConsoleDimensions(width=193, height=75)                       │
│        soft_wrap = False                                                         │
│           stderr = False                                                         │
│            style = None                                                          │
│         tab_size = 8                                                             │
│            width = 193                                                           │
╰──────────────────────────────────────────────────────────────────────────────────╯
╭─── <class 'rich._windows.WindowsConsoleFeatures'> ────╮
│ Windows features available.                           │
│                                                       │
│ ╭───────────────────────────────────────────────────╮ │
│ │ WindowsConsoleFeatures(vt=False, truecolor=False) │ │
│ ╰───────────────────────────────────────────────────╯ │
│                                                       │
│ truecolor = False                                     │
│        vt = False                                     │
╰───────────────────────────────────────────────────────╯
╭────── Environment Variables ───────╮
│ {                                  │
│     'TERM': 'xterm-256color',      │
│     'COLORTERM': 'truecolor',      │
│     'CLICOLOR': None,              │
│     'NO_COLOR': None,              │
│     'TERM_PROGRAM': 'iTerm.app',   │
│     'COLUMNS': None,               │
│     'LINES': None,                 │
│     'JPY_PARENT_PID': None,        │
│     'VSCODE_VERBOSE_LOGGING': None │
│ }                                  │
╰────────────────────────────────────╯
platform="Darwin"
$ pip freeze | grep rich
rich==12.2.0
```


</details>

PS: it was really trivial to add this to my app, and is amazing, love the feature! Don't want to sound negative opening an issue. :D



Discussion:
Yeah, Safari has a bunch of issues. We think we can work around them.

Resolving patch:
diff --git a/rich/_export_format.py b/rich/_export_format.py
--- a/rich/_export_format.py
+++ b/rich/_export_format.py
@@ -69,7 +69,7 @@
             align-items: center;
             background-color: {theme_background_color};
             border-radius: 14px;
-            outline: 1px solid #484848;
+            box-shadow: 0 0 0 1px #484848;
         }}
         .{classes_prefix}-terminal:after {{
             position: absolute;


Test patch:
diff --git a/tests/test_console.py b/tests/test_console.py
--- a/tests/test_console.py
+++ b/tests/test_console.py
@@ -543,7 +543,7 @@ def test_export_html_inline():
             align-items: center;
             background-color: #0c0c0c;
             border-radius: 14px;
-            outline: 1px solid #484848;
+            box-shadow: 0 0 0 1px #484848;
         }
         .rich-svg-${SVG_HASH}-terminal:after {
             position: absolute;