Properly exporting latex to HTML from org-mode using dvisvgm / dvipng

I need to export my org notes containing latex to HTML format. Example document :

#+latex_class: article
#+latex_compiler: pdflatex
#+options: tex:t
#+date: \today
#+title: something
#+author: me

$$U_l=\frac{-A}{6}\Bigg[\frac{2}{\alpha^2-4}+\frac{2}{\alpha^2}+\ln{\Big(\frac{\alpha^2-4}{\alpha^2}\Big)}\Bigg]$$

$$\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] \underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}} <=>[+ 2OH-][+ 2H+] \underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}}$$

$$\chemfig{C*3(---)}$$


As I am using chemfig and other packages, using mathjax #+options: tex:t (default), won't render them in the HTML page:

Now I have two methods to solve this, either to use dvipng or dvisvgm.

Using dvipng

To use dvipng, I changed mathjax to #+options: tex:dvipng, however as it can be seen, it does not render chemfig (and few other like tikz) properly (instead of 'C', there should have been a cyclopropane molecule) :

Imagemagick also shows the same behaviour. So my first question is : how can I get dvipng to render the correct output?

Using dvisvgm

Next I tried to use dvisvgm using #+options: tex:dvisvgm, and while it renders everything correctly, It also scales the images to almost the full width of the page :

However I can fix this by modifying .org-svg { width: 90%; } to .org-svg { width: auto; } in the HTML source code as mentioned here. So my second question would be : How can I implement this setting for all org files whenever I export to HTML automatically? (as doing it manually each time I export would be tedious).

My third question would be that is it possible to use mathjax for normal math and dvipng/dvisvgm for other packages like packages like chemfig in the HTML output?

Please also suggest if there is another method to achieve this..

Here is my (maybe somewhat hacky) fix. Put this in your config file.

(with-eval-after-load 'ox-html
(replace-regexp-in-string
".org-svg { width: 90%; }"
".org-svg { width: auto; }"
org-html-style-default)))


How did I came up with this? Reading the org-mode manual's section about CSS export, I found out about org-html-style-default. Then doing C-h v org-html-style-default RET, we read the documentation,

The default style specification for exported HTML files. You can use ‘org-html-head’ and ‘org-html-head-extra’ to add to this style. If you don’t want to include this default style, customize ‘org-html-head-include-default-style’.

We see that org-html-style-default is a string and we want to edit a small section of it. Namely, .org-svg { width: 90%; } to .org-svg { width: auto; }.

In order to do that, I thought we could just copy over org-html-style-default to org-html-head and replace the substring .org-svg { width: 90%; } to .org-svg { width: auto; }. Which is exactly what the above given code does.

Now, I am not an expert in elisp so I am not sure if the above way or the function replace-regexp-in-string is the best way of accomplishing what we want. I played around in the scratch buffer a bit to test that it does not change the original string which in our case is org-html-style-default and assigns a new one (org-html-style) after modifying the substring in the original string.