Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[BUG] SVG output is not compatible with most tools beyond browsers
See original GitHub issueDescribe the bug
I’m looking at automating the conversion of rich’s SVG output to PNG for documentation purposes, but it appears that the full compatibly of these SVGs is currently limited to chromium-based browsers.
I’ll take the following test file as example (generate with rich 12.1.0):
Here is how it is displayed with macOS Finder’s Quicklook (missing background):
In Safari:
Inkscape:
Trying to convert to PNG using Inkscape’s CLI yields the following errors:
end_font_face_cb: font face rule limited support.
font-family : 'Fira Code';
src : local('FiraCode-Regular'), url(https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2) format('woff2'), url(https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff) format('woff');
font-style : normal;
font-weight : 400
end_font_face_cb: font face rule limited support.
font-family : 'Fira Code';
src : local('FiraCode-Bold'), url(https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2) format('woff2'), url(https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff) format('woff');
font-style : bold;
font-weight : 700
WARNING: unknown type: svg:foreignObject
Background RRGGBBAA: ffffff00
Similarly, CLI tools like rsvp-convert or ImageMagick’s convert completely fail to produce a useable output. The best I could get is from qlmanage (related to macOS QuickLook – I learned about it today), but still unusable:
Platform
Click to expand
macOS 12.3 Rich 12.1.0
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── <class 'rich.console.Console'> ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ A high level console interface. │
│ │
│ ╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │
│ │ <console width=284 None> │ │
│ ╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
│ color_system = None │
│ encoding = 'utf-8' │
│ file = <_io.TextIOWrapper name='<stdout>' mode='w' encoding='utf-8'> │
│ height = 13 │
│ is_alt_screen = False │
│ is_dumb_terminal = False │
│ is_interactive = False │
│ is_jupyter = False │
│ is_terminal = False │
│ legacy_windows = False │
│ no_color = False │
│ options = ConsoleOptions(size=ConsoleDimensions(width=284, height=13), legacy_windows=False, min_width=1, max_width=284, is_terminal=False, encoding='utf-8', max_height=13, justify=None, overflow=None, no_wrap=False, highlight=None, markup=None, height=None) │
│ quiet = False │
│ record = False │
│ safe_box = True │
│ size = ConsoleDimensions(width=284, height=13) │
│ soft_wrap = False │
│ stderr = False │
│ style = None │
│ tab_size = 8 │
│ width = 284 │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─── <class 'rich._windows.WindowsConsoleFeatures'> ────╮
│ Windows features available. │
│ │
│ ╭───────────────────────────────────────────────────╮ │
│ │ WindowsConsoleFeatures(vt=False, truecolor=False) │ │
│ ╰───────────────────────────────────────────────────╯ │
│ │
│ truecolor = False │
│ vt = False │
╰───────────────────────────────────────────────────────╯
╭───────────────────────────────────────────────────────────────────────────────────── Environment Variables ─────────────────────────────────────────────────────────────────────────────────────╮
│ {'TERM': 'xterm-256color', 'COLORTERM': None, 'CLICOLOR': None, 'NO_COLOR': None, 'TERM_PROGRAM': None, 'COLUMNS': None, 'LINES': None, 'JPY_PARENT_PID': None, 'VSCODE_VERBOSE_LOGGING': None} │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
platform="Darwin"
Issue Analytics
- State:
- Created a year ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Inkscape "Viewer does not support full SVG 1.1"
I have run into a bug in a diagram created on diagrams.net. When the file is opened in Inkscape, text is truncated and...
Read more >A Practical Guide To SVG And Design Tools
In this article, I'll shed light on three of the most popular design tools: Adobe Illustrator, Sketch, and Figma. There are also other...
Read more >How To Import & Export SVG, PDG, DXF Files & Vectors in ...
This tutorial explains exactly how to import and export SVG, DXF and PDF files in Vactric Vcarve desktop, pro and Aspire.
Read more >Accessible SVGs | CSS-Tricks
Browsers that support SVG: IE 10+, FF, Chrome and Safari; Most common ... a description – note this is not read by narrator...
Read more >4. Tools of the Trade - Using SVG with CSS3 and HTML5 [Book]
Many aspects of SVG were inspired by the capabilities of Illustrator, and Illustrator has long supported export of its graphics to SVG format....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For my project fastero, in order to convert the output to PNG, I used selenium to open the SVG file and take a screenshot then use PIL to crop it. This was the only method I could think of that actually worked, I’ve tried a lot of methods too, the one I used is definitely not optimal. But it does create some beautiful output (with custom CSS of course)
<figure class="image">Although this does take around 4-5 seconds, but I think it’s worth it
The alternatives I tried are, Inkscape, svglib, cairosvg and some other library I forgot the name of
Should be fixed in the last release