Repository: Textualize/rich (python)

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


Pull request:
SVG export - Safari - Prevent box appearing on rounded corners
## Type of changes

- [x] Bug fix
- [ ] New feature
- [ ] Documentation / docstrings
- [ ] Tests
- [ ] Other

## Checklist

- [x] I've run the latest [black](https://github.com/psf/black) with default args on new code.
- [x] I've updated CHANGELOG.md and CONTRIBUTORS.md where appropriate.
- [x] I've added tests for new code.
- [x] I accept that @willmcgugan may be pedantic in the code review.

## Description

Closes #2171 

Uses box-shadow in place of outline, since Safari has buggy outline support. Note that this doesn't fix the issue with the rotated background panel not showing on Safari, but at least the output no longer looks broken.

### Before
<img width="474" alt="Screenshot 2022-04-19 at 17 31 10" src="https://user-images.githubusercontent.com/5740731/164053496-5469b530-b758-4261-bd76-1171a54331c3.png">

### After
<img width="529" alt="Screenshot 2022-04-19 at 17 31 28" src="https://user-images.githubusercontent.com/5740731/164053501-3fd7ddef-f2f8-4a13-a02d-0106a3d33b9b.png">

### Example with light theme
<img width="488" alt="Screenshot 2022-04-19 at 17 32 10" src="https://user-images.githubusercontent.com/5740731/164053502-1efcea4c-d5b7-4043-b573-8880d84182c9.png">




Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e66cb4e1..86b56e44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fall back to `sys.__stderr__` on POSIX systems when trying to get the terminal size (fix issues when Rich is piped to another process)
 - Fixed markup escaping issue https://github.com/Textualize/rich/issues/2187
+- Safari - Box appearing around SVG export https://github.com/Textualize/rich/pull/2201
 
 ## [12.2.0] - 2022-04-05
 
diff --git a/rich/_export_format.py b/rich/_export_format.py
index f9217b2a..d67fc81a 100644
--- a/rich/_export_format.py
+++ b/rich/_export_format.py
@@ -69,7 +69,7 @@ CONSOLE_SVG_FORMAT = """\
             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
index 3305202b..b0cdfe5b 100644
--- a/tests/test_console.py
+++ b/tests/test_console.py
@@ -543,7 +543,7 @@ EXPECTED_SVG = """\
             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;