Images in SVGs are not rendered

If a plantuml diagram contains an image, it is not rendered:

PlantUML:

!define AzurePuml https://raw.githubusercontent.com/plantuml-stdlib/Azure-PlantUML/master/dist

!includeurl AzurePuml/AzureCommon.puml
!includeurl AzurePuml/Compute/AzureFunction.puml

AzureFunction(test, "test", "test", "test")

SVG generated using node-plantuml:

Source:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="195px" preserveAspectRatio="none" style="width:131px;height:195px;" version="1.1" viewBox="0 0 131 195" width="131px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f1hffugpgh7vwj" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
            <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
        </filter>
    </defs>
    <g>        <!--entity test-->
        <rect fill="#FFFFFF" filter="url(#f1hffugpgh7vwj)" height="175.5313" style="stroke: #3C7FC0; stroke-width: 1.5;" width="114" x="6" y="8.47"/>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="94" x="16" y="30.927">«AzureFunction»</text>
        <text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="28" x="49" y="50.1731">test</text>
        <image height="70" width="70" x="28" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAIAAAD+THXTAAADP0lEQVR4Xu3YvY7UMBQF4HlaXoFX4BV4haGli0RLswU10hQIUSABokCIAungjXey4f7Yx9dxZma1R7dKYsff3ngmOwc8uRzkgdvPM+kWsh/p7vOvQMlZiOxEOn3/o5dbrR+//8qJiOxE0sutVvoryFm47EGKtUjOQmcPkl5utWKPXM5wUqBF4UcuZzhp+vizqTo9GE1K69OLLtRdxxZaMpakF10uOT6UgaTWFvV8JKwzkKQXXaj+LbRkFKmpRZtsoSURUlrBVHvu9boLJQfPmaLUZlK6zYs3p1THD9/kuXOaWmQ+cmnyfJeAqo20eMoqvW6vyp6YqoEkPLkm9djwLTLXmo7ru5hXemFJpufl20/6k1cv3SsxMCdNmKbV9+JVFIn38C3SY5d0quok3pOO6KWbZW6hdXpUFRLvyRfr1etiloUOVYnU5OFbZA43E1O5pCYP6BZ5w70EVDap1UO2qLqFzLSqDFKrB3SL5DA6TSpJCnjIFslhjeFV/5ECHnAtKs9AhlQ9kmKedDa9kpUrtoXMMKoH0mS9WVU9mP8Q2rBVmY+rp1ouvieFPUyLekrvk5yy6hB73nKGtsjz5HiqNOpgnmA8Q1tU9uSkBeiVJ87h1bsv4uiR29DjWsR4cP6bisUnzv1eWjfqOG/KqfZNP65FpGf5L+b1+6/rFqWFPXziZdXx7KmqBrXI/IjTEd+EWbXs/8fvpfVFVVUanE4xxeNjnlzH1a8g8u1BX+2pyJCkHo94Vo13PD2mR6VXr2tDDzQJzsiYimnRth6YJDjjAyoNGO2BR4IzS5OKaRHznW6uxPOgQIIzF6/SgB08KJPgzMioqi0a5EGVBGfeqkob9vGAIcGZvaAqt2ioByQJzj08lWbs5gFPgnMnrSq0iPGcrF/VeQ+aSLBU4maFN3SNN9PpQSsJSiXOTvMbpC7Sk9PjQYCElUoc91rU5MkJexAjYX7i5SGnReaVTMIDgyQds0XhZfVkM5Ju0UU82IqkWxTbBptkG5Jo0QU92IQkWnRZDzYhrVt0cQ/6SesWXYMH/aSlRVfiQSdpaZF+k7hguki5RVflQQ8pt+jaPOghneYfh+XRK0icdLV5Jt1CniDpH1bk9SNFzprUAAAAAElFTkSuQmCC" y="53.6888"/>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="25" x="50.5" y="136.1458">[test]</text>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="65" y="153.3157"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="23" x="51.5" y="170.9251">test</text>        <!--
@startuml

skinparam defaultTextAlignment center

skinparam wrapWidth 200
skinparam maxMessageSize 150

skinparam rectangle {
    StereotypeFontSize 12
}

skinparam Arrow {
    Color #666666
    FontColor #666666
    FontSize 12
}

sprite $AzureFunction [70x70/16z] {
xTI7RWCn30DGojIj___WJWE-yDnAC8GTPgy7nWkhUOUFB22D6gkeqaggb8oALLHfM8XBbf0c255H1HLLhA9AgwX2f4FNAZee2OtNjKaL-J_RTJ561lCN4Z6y
VkAJAkpozHF6o6cZYWwAdOE94QrYK2Q5c0vAXb44r4696KMqYY75A08Aac8KCHsKc554gm0HCqTCa9XHHAiOGcQEs3RIW0pZ3mJS_es_Cgw8Lfc7K8PF10mH
OTWVxuX5o8Zr3iVFmyiOCet0jkix1yvln7qmbaUQ-zw7u_n6RWpZwRclghsFgUmMQ_SmGDotyN8m4aO8WPX9837364amCH8mMiMcI8O9aGp324an4P9Y620v
PWbHXZEanGZ0yHsRdhm32HbynmUY31657R61A4F4QVtBWiWNSZ51rk8LYCaXknQlGAm2WLSWLe70An2JGtOjNe5O1O96rEITJm
}

skinparam rectangle<<AzureFunction>> {
    BackgroundColor #FFFFFF
    BorderColor #3C7FC0
}

rectangle "==test\n<color:#0072C6><$AzureFunction></color>\n//<size:12>[test]</size>//\n\n test" <<AzureFunction>> as test

@enduml

PlantUML version 1.2019.06(Fri May 24 19:10:25 CEST 2019)
(GPL source distribution)
Java Runtime: OpenJDK Runtime Environment
JVM: OpenJDK 64-Bit Server VM
Java Version: 21.0.1+12-LTS
Operating System: Windows 11
OS Version: 10.0
Default Encoding: UTF-8
Language: en
Country: US
-->    </g>
</svg>

SVG that is rendered (copied from source code of the final HTML page)

Source:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlnsXLink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="195px" preserveAspectRatio="none" style="width: 131px; height: 195px;" version="1.1" viewBox="0 0 131 195" width="131px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f1hffugpgh7vwj" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur>
            <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend>
        </filter>
    </defs>
    <g>
        <rect fill="#FFFFFF" filter="url(#f1hffugpgh7vwj)" height="175.5313" style="stroke: rgb(60, 127, 192); stroke-width: 1.5px;" width="114" x="6" y="8.47"></rect>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="94" x="16" y="30.927">«AzureFunction»</text>
        <text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="28" x="49" y="50.1731">test</text>
        <image height="70" width="70" x="28" xLinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAIAAAD+THXTAAADP0lEQVR4Xu3YvY7UMBQF4HlaXoFX4BV4haGli0RLswU10hQIUSABokCIAungjXey4f7Yx9dxZma1R7dKYsff3ngmOwc8uRzkgdvPM+kWsh/p7vOvQMlZiOxEOn3/o5dbrR+//8qJiOxE0sutVvoryFm47EGKtUjOQmcPkl5utWKPXM5wUqBF4UcuZzhp+vizqTo9GE1K69OLLtRdxxZaMpakF10uOT6UgaTWFvV8JKwzkKQXXaj+LbRkFKmpRZtsoSURUlrBVHvu9boLJQfPmaLUZlK6zYs3p1THD9/kuXOaWmQ+cmnyfJeAqo20eMoqvW6vyp6YqoEkPLkm9djwLTLXmo7ru5hXemFJpufl20/6k1cv3SsxMCdNmKbV9+JVFIn38C3SY5d0quok3pOO6KWbZW6hdXpUFRLvyRfr1etiloUOVYnU5OFbZA43E1O5pCYP6BZ5w70EVDap1UO2qLqFzLSqDFKrB3SL5DA6TSpJCnjIFslhjeFV/5ECHnAtKs9AhlQ9kmKedDa9kpUrtoXMMKoH0mS9WVU9mP8Q2rBVmY+rp1ouvieFPUyLekrvk5yy6hB73nKGtsjz5HiqNOpgnmA8Q1tU9uSkBeiVJ87h1bsv4uiR29DjWsR4cP6bisUnzv1eWjfqOG/KqfZNP65FpGf5L+b1+6/rFqWFPXziZdXx7KmqBrXI/IjTEd+EWbXs/8fvpfVFVVUanE4xxeNjnlzH1a8g8u1BX+2pyJCkHo94Vo13PD2mR6VXr2tDDzQJzsiYimnRth6YJDjjAyoNGO2BR4IzS5OKaRHznW6uxPOgQIIzF6/SgB08KJPgzMioqi0a5EGVBGfeqkob9vGAIcGZvaAqt2ioByQJzj08lWbs5gFPgnMnrSq0iPGcrF/VeQ+aSLBU4maFN3SNN9PpQSsJSiXOTvMbpC7Sk9PjQYCElUoc91rU5MkJexAjYX7i5SGnReaVTMIDgyQds0XhZfVkM5Ju0UU82IqkWxTbBptkG5Jo0QU92IQkWnRZDzYhrVt0cQ/6SesWXYMH/aSlRVfiQSdpaZF+k7hguki5RVflQQ8pt+jaPOghneYfh+XRK0icdLV5Jt1CniDpH1bk9SNFzprUAAAAAElFTkSuQmCC" y="53.6888"></image>
        <text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="25" x="50.5" y="136.1458">[test]</text>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="0" x="65" y="153.3157"></text>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="23" x="51.5" y="170.9251">test</text>
    </g>
</svg>

I suspect its due to some transformation by the svgr library that Docusaurus is using, but I am not sure.

mstroppel / remark-local-plantuml

Images in SVGs are not rendered #6