Known issue: config_display: columns bad dimensions

[lowlighter]

When config_display option is set to columns, it uses CSS @media queries to adjust width dynamically.
However, since height needs to be fixed by the viewbox and height of the SVG, dynamic height resizing is hard (impossible?) to achieve (see #374).

Current workaround is to manually split the image by using multiples jobs, and use <img align="{left|right|center}"> to embed metrics.

If you know how to fix it, feel free to open an issue or comment

[JayantGoel001]

Hello @lowlighter,

Regarding the height issue (#814) and config_display (#839), I think instead of directly creating SVG file, we should create HTML code and convert that HTML code to SVG. 🤔

Metrics generated in the case of @Zenoo was https://raw.githubusercontent.com/Zenoo/zenoo/f0eb3da9562b73352d8cb69c310e4b0dcca35938/github-metrics.svg

I created corresponding code in HTML of the same (with few changes and I removed SVG & foreignObject dimensions).
https://codeshare.io/bvpngM

and Now using this website
https://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx
I converted HTML code to SVG.

This is the final output of SVG though the second column seems inappropriate yet the height issue is fixed.

[lowlighter]

Actually a similar system is already used: it renders the svg in an html page, compute bounding rect and crop it (btw this is also why the size may differ in the end because it's rendered on ubuntu+chrome+system fonts which may not have same height on other environment).

The "height oversize" is actually intentional for now. This mode implies "2 heights": one for 2 columns, one for 1 column.
However, just using the height for a single column would just look cropped on smaller displays (because when the media query triggers, the viewbox won't be updated) 😕

Note that it only happens when embed in an <img> tag, when viewing raw svg or in a html file it renders fine