inline svg

[k1ng440]

The problem

mediumZoom('#svg-element') does not work

A concise description of why you want a new feature. we are using mermaid in our docute, we would love to have this working

Solution

Add inline SVG support

[yankeeinlondon]

I have exactly the same desire. I'm using Mermaid and the SVG's would really benefit from some zoom.

[calumk]

I have exactly the same desire. I'm using Mermaid and the SVG's would really benefit from some zoom.

+1

Exactly the same issue

[Isengo1989]

Same here - did someone find a solution for that?

I saw mermaid is using https://github.com/bumbu/svg-pan-zoom - but would rather stick with one additional dependency :)

[hockdudu]

I had this same problem with Docusaurus. I was able to solve it by rendering the SVG as an image using data URI.

First, swizzle the mermaid theme. Then, replace the component on the newly created TSX file:

function MermaidRenderResult({renderResult}: {renderResult: RenderResult}): ReactNode {
    return (
        <div
            className={`${MermaidContainerClassName} ${styles.container}`}
        >
            <img
                alt="Diagram"
                src={`data:image/svg+xml;utf8,${encodeURIComponent(renderResult.svg)}`}
            />
        </div>
    );
}