search

AVATEAM-IT-SYSTEMHAUS / mkdocs-kroki-plugin

MkDocs plugin for Kroki-Diagrams
MIT License
41 stars 27 forks source link

SVGs images are embaded as `<img>` -> they loose the fonts #35

Closed Lazzaretti closed 1 month ago

Lazzaretti commented 1 year ago

I try to use an excalidraw diagram. The diagram is shown; however, the fonts are incorrect (the fallback fonts are used).

Problem

The fonts are not embedded; they are links. These links don't work when you add an SVG with an <img tag in HTML.

Example

excalidraw in mkdocs: image

When opening the image in a new tab: image

The diagram is copied from https://kroki.io/#try

``` ```kroki-excalidraw { "type": "excalidraw", "version": 2, "source": "https://excalidraw.com", "elements": [ { "type": "rectangle", "version": 175, "versionNonce": 279344008, "isDeleted": false, "id": "2ZYh24ed28FJ0yE-S3YNY", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 580, "y": 140, "strokeColor": "#000000", "backgroundColor": "#15aabf", "width": 80, "height": 19.999999999999996, "seed": 521916552, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "Be1y2yzhV3Zd4nwCro__8" ] }, { "type": "rectangle", "version": 180, "versionNonce": 164784376, "isDeleted": false, "id": "bO0OVt6m7LowYpq22ePCA", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 660, "y": 140, "strokeColor": "#000000", "backgroundColor": "#4c6ef5", "width": 120, "height": 19.999999999999996, "seed": 1303206904, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "KaCO9-QjUenSyCuuanoTo" ] }, { "type": "rectangle", "version": 183, "versionNonce": 27181704, "isDeleted": false, "id": "jz0Huq9-s6pNxDw0RqHcR", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 780, "y": 140, "strokeColor": "#000000", "backgroundColor": "#fab005", "width": 180, "height": 19.999999999999996, "seed": 861962120, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "74ifmqmu0vN0NK0_0FwPm" ] }, { "type": "rectangle", "version": 192, "versionNonce": 2123008504, "isDeleted": false, "id": "UnmNTmwJtm6moubcGtSgB", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 960, "y": 140, "strokeColor": "#000000", "backgroundColor": "#fa5252", "width": 80, "height": 19.999999999999996, "seed": 277814520, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "1v60NED2criGG-wo9-oQL" ] }, { "type": "rectangle", "version": 202, "versionNonce": 1823814024, "isDeleted": false, "id": "of76J4WOJHnHi0L61Vst_", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 1040, "y": 140, "strokeColor": "#000000", "backgroundColor": "#be4bdb", "width": 180, "height": 19.999999999999996, "seed": 1496796808, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "jjuPzyRneMv3f65lps_6a" ] }, { "type": "rectangle", "version": 193, "versionNonce": 1234602744, "isDeleted": false, "id": "SlvbjeV-9lXbcrlKib-hj", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 1220, "y": 140, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 60, "height": 19.999999999999996, "seed": 1938865656, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "5QQzhw_uqk_rBaW2wMriT" ] }, { "type": "text", "version": 81, "versionNonce": 1188901129, "isDeleted": false, "id": "vrdt3JfbD2Xwz4K4TWScI", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 840, "y": -60, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 190, "height": 45, "seed": 1499217288, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [], "fontSize": 36, "fontFamily": 1, "text": "JavaScript", "baseline": 32, "textAlign": "left", "verticalAlign": "top" }, { "type": "arrow", "version": 343, "versionNonce": 1369065096, "isDeleted": false, "id": "Be1y2yzhV3Zd4nwCro__8", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 597.5075333823274, "y": 299, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 40, "height": 139, "seed": 666255096, "groupIds": [], "strokeSharpness": "round", "boundElementIds": [], "startBinding": { "focus": -0.41953339688473495, "gap": 1, "elementId": "UxgtvUBaIPnDWJZ9kUQH8" }, "endBinding": { "focus": -0.11111111111111113, "gap": 1, "elementId": "2ZYh24ed28FJ0yE-S3YNY" }, "points": [ [ 0, 0 ], [ -17.507533382327438, -59 ], [ 22.492466617672562, -139 ] ], "lastCommittedPoint": null, "startArrowhead": null, "endArrowhead": "arrow" }, { "type": "text", "version": 81, "versionNonce": 690339976, "isDeleted": false, "id": "UxgtvUBaIPnDWJZ9kUQH8", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 580, "y": 300, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 94, "height": 45, "seed": 84626568, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "Be1y2yzhV3Zd4nwCro__8" ], "fontSize": 36, "fontFamily": 1, "text": "Fetch", "baseline": 32, "textAlign": "left", "verticalAlign": "top" }, { "type": "rectangle", "version": 60, "versionNonce": 897215480, "isDeleted": false, "id": "-Lq0agjWQ31TR_Av5Z4HW", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 520, "y": -60, "strokeColor": "#000000", "backgroundColor": "transparent", "width": 820, "height": 540, "seed": 495165432, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "jjuPzyRneMv3f65lps_6a" ] }, { "type": "arrow", "version": 537, "versionNonce": 1626949112, "isDeleted": false, "id": "KaCO9-QjUenSyCuuanoTo", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 721.0588599991052, "y": 60.17790458606555, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 1.0588599991051524, "height": 79.82209541393445, "seed": 637565832, "groupIds": [], "strokeSharpness": "round", "boundElementIds": [], "startBinding": null, "endBinding": { "focus": 0, "gap": 1, "elementId": "bO0OVt6m7LowYpq22ePCA" }, "points": [ [ 0, 0 ], [ -1.0588599991051524, 39.82209541393445 ], [ -1.0588599991051524, 79.82209541393445 ] ], "lastCommittedPoint": null, "startArrowhead": null, "endArrowhead": "arrow" }, { "type": "text", "version": 112, "versionNonce": 358083143, "isDeleted": false, "id": "4hEOdlcwK6AHyVhjc-MXS", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 660, "y": 20, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 103, "height": 45, "seed": 352116984, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [], "fontSize": 36, "fontFamily": 1, "text": "Parse", "baseline": 32, "textAlign": "left", "verticalAlign": "top" }, { "type": "arrow", "version": 534, "versionNonce": 983577992, "isDeleted": false, "id": "74ifmqmu0vN0NK0_0FwPm", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 841.6574209245741, "y": 219, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 43.15128973100309, "height": 59.174989629909305, "seed": 1853344392, "groupIds": [], "strokeSharpness": "round", "boundElementIds": [], "startBinding": { "focus": 0.09211398277003865, "gap": 1, "elementId": "K4so-arfr0JX0NJx8vd7T" }, "endBinding": { "focus": -0.2163077865936296, "gap": 1, "elementId": "jz0Huq9-s6pNxDw0RqHcR" }, "points": [ [ 0, 0 ], [ -1.6574209245741258, 1 ], [ 41.493868806428964, -58.174989629909305 ] ], "lastCommittedPoint": null, "startArrowhead": null, "endArrowhead": "arrow" }, { "type": "text", "version": 118, "versionNonce": 1185705864, "isDeleted": false, "id": "K4so-arfr0JX0NJx8vd7T", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 640, "y": 220, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 366, "height": 45, "seed": 765854200, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "74ifmqmu0vN0NK0_0FwPm" ], "fontSize": 36, "fontFamily": 1, "text": "Compile and Optimize", "baseline": 32, "textAlign": "left", "verticalAlign": "top" }, { "type": "arrow", "version": 791, "versionNonce": 1724761848, "isDeleted": false, "id": "1v60NED2criGG-wo9-oQL", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 960, "y": 320, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 80, "height": 160, "seed": 1764571528, "groupIds": [], "strokeSharpness": "round", "boundElementIds": [], "startBinding": { "focus": -0.1637630662020906, "gap": 1, "elementId": "dviXudWNxiHYQMZfqHWsH" }, "endBinding": { "focus": 0.07692307692307691, "gap": 1, "elementId": "UnmNTmwJtm6moubcGtSgB" }, "points": [ [ 0, 0 ], [ 80, -40 ], [ 40, -160 ] ], "lastCommittedPoint": null, "startArrowhead": null, "endArrowhead": "arrow" }, { "type": "text", "version": 194, "versionNonce": 473574648, "isDeleted": false, "id": "dviXudWNxiHYQMZfqHWsH", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 720, "y": 320, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 484, "height": 45, "seed": 1988297464, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "1v60NED2criGG-wo9-oQL" ], "fontSize": 36, "fontFamily": 1, "text": "Re-optimize and Deoptimize", "baseline": 32, "textAlign": "left", "verticalAlign": "top" }, { "type": "arrow", "version": 708, "versionNonce": 185615496, "isDeleted": false, "id": "jjuPzyRneMv3f65lps_6a", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 1140, "y": 80, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 20, "height": 60, "seed": 1767688328, "groupIds": [], "strokeSharpness": "round", "boundElementIds": [], "startBinding": { "focus": -0.3021784319542362, "gap": 14.800415739789742, "elementId": "qhkjvI1VmWZdnKvU5QKZK" }, "endBinding": { "focus": 0.15789473684210528, "gap": 1, "elementId": "of76J4WOJHnHi0L61Vst_" }, "points": [ [ 0, 0 ], [ -20, 20 ], [ 0, 60 ] ], "lastCommittedPoint": null, "startArrowhead": null, "endArrowhead": "arrow" }, { "type": "text", "version": 213, "versionNonce": 2105884296, "isDeleted": false, "id": "qhkjvI1VmWZdnKvU5QKZK", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 1080, "y": 20.19958426021026, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 139, "height": 45, "seed": 2115494904, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "jjuPzyRneMv3f65lps_6a" ], "fontSize": 36, "fontFamily": 1, "text": "Execute", "baseline": 32, "textAlign": "left", "verticalAlign": "top" }, { "type": "arrow", "version": 707, "versionNonce": 543827960, "isDeleted": false, "id": "5QQzhw_uqk_rBaW2wMriT", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 1220, "y": 240, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 20, "height": 80, "seed": 2059564936, "groupIds": [], "strokeSharpness": "round", "boundElementIds": [], "startBinding": { "focus": 0.7391304347826086, "gap": 2, "elementId": "C6fyzTg2FHAmrRYfC_THm" }, "endBinding": { "focus": 0.3333333333333333, "gap": 1, "elementId": "SlvbjeV-9lXbcrlKib-hj" }, "points": [ [ 0, 0 ], [ 20, -40 ], [ 20, -80 ] ], "lastCommittedPoint": null, "startArrowhead": null, "endArrowhead": "arrow" }, { "type": "text", "version": 227, "versionNonce": 2002374136, "isDeleted": false, "id": "C6fyzTg2FHAmrRYfC_THm", "fillStyle": "hachure", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 1, "opacity": 100, "angle": 0, "x": 1160, "y": 220, "strokeColor": "#000000", "backgroundColor": "#868e96", "width": 58, "height": 45, "seed": 1651025144, "groupIds": [], "strokeSharpness": "sharp", "boundElementIds": [ "5QQzhw_uqk_rBaW2wMriT" ], "fontSize": 36, "fontFamily": 1, "text": "GC", "baseline": 32, "textAlign": "left", "verticalAlign": "top" } ], "appState": { "viewBackgroundColor": "#ffffff", "gridSize": 20 } } ``` ```

Possible Solution

A possible solution would be to use EmbedImages https://github.com/AVATEAM-IT-SYSTEMHAUS/mkdocs-kroki-plugin/issues/31

oniboni commented 1 year ago

Hi, I was working on this issue quite some time ago. See #9 and #8 for reference. I decided to delete the PR, because it introduced too much dependencies here.

I've just published the (companion) plugin to Pypi. If you have any issues, feel free to open them on the dedicated issue tracker.

llibeohs commented 7 months ago

my solution

@oniboni @Lazzaretti plugin.py

        if get_url is not None:
            return f"![Kroki]({get_url})"

change to

        if get_url is not None:
        return f'<object type="image/svg+xml" data="{get_url}" style="max-width:100%"></object>'
oniboni commented 1 month ago

@llibeohs I've tried your solution, sadly the fonts are still missing in Firefox and Chrome for me. But the investigation goes on :detective: