SVG output of MathJax

Question

I have a basic MathJax code of

<script type="text/javascript">
    MathJax.Hub.Config({
    extensions: ["tex2jax.js", "TeX/AMSmath.js"],
    jax: ["input/TeX", "output/SVG"],
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<div>$$a = b + c$$</div>

I expect the formula should be replaced with an SVG code, but the result is the same as HTML output, MathML codes:

<div>
    <span class="MathJax_Preview" style="color: inherit; display: none;"></span>
    <span class="mjx-chtml MJXc-display" style="text-align: center;">
        <span id="MathJax-Element-1-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="
            <math
                xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;>
                <mi>a</mi>
                <mo>=</mo>
                <mi>b</mi>
                <mo>+</mo>
                <mi>c</mi>
            </math>" role="presentation" style="font-size: 113%; text-align: center; position: relative;">
            <span id="MJXc-Node-1" class="mjx-math" aria-hidden="true">
                <span id="MJXc-Node-2" class="mjx-mrow">
                    <span id="MJXc-Node-3" class="mjx-mi">
                        <span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">a</span>
                    </span>
                    <span id="MJXc-Node-4" class="mjx-mo MJXc-space3">
                        <span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.058em; padding-bottom: 0.335em;">=</span>
                    </span>
                    <span id="MJXc-Node-5" class="mjx-mi MJXc-space3">
                        <span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.279em;">b</span>
                    </span>
                    <span id="MJXc-Node-6" class="mjx-mo MJXc-space2">
                        <span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.279em; padding-bottom: 0.445em;">+</span>
                    </span>
                    <span id="MJXc-Node-7" class="mjx-mi MJXc-space2">
                        <span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.224em; padding-bottom: 0.279em;">c</span>
                    </span>
                </span>
            </span>
            <span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
                <math
                    xmlns="http://www.w3.org/1998/Math/MathML" display="block">
                    <mi>a</mi>
                    <mo>=</mo>
                    <mi>b</mi>
                    <mo>+</mo>
                    <mi>c</mi>
                </math>
            </span>
        </span>
    </span>
    <script type="math/tex; mode=display" id="MathJax-Element-1">a = b + c</script>
</div>

How can I get the output as SVG vector elements?

Answer 1

MathJax configuration script should be type of text/x-mathjax-config not text/javascript. Moreover ?config=TeX-MML-AM_CHTML seems to be somehow overriding the output/SVG. I used ?config=default. You can get more information about the configuration files here

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        extensions: ["tex2jax.js", "TeX/AMSmath.js"],
        jax: ["input/TeX", "output/SVG"],
    })
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=default"></script>
<div>$$a = b + c$$</div>

Answer 2

In case anyone is still using MathJax 2.7.x, modifying the config parameter will work for rendering svg on initial load.

So change TeX-AMS_CHTML to TeX-AMS_SVG

or change TeX-MML-AM_CHTML to TeX-MML-AM_SVG

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG"></script>