Inline LaTeX fragments exported to SVG (dvisvgm) don't show inline in HTML

[Perangelot]

First of all: Thank you for all the great effort you put into this package! I am surely not the only one who appreciates this so much. I have a request concerning formulae and drawing tikz pictures. If this was solved, I could finally write proper formulae in my blog!

Actual Behavior

Using the option #+tex:dvisvgm, LaTeX images are created, which works fine in general. There are just two caveats:

1. The svg images are, unlike the usual org-preview-images, not generated with the emacs theme colors, but in black with no background. This is, in principle, what you want, but those who use a dark theme like me need other colors (I, for example, need the font color to be light gray).
2. The images are exported to markdown according to this template: <img src="/image-folder/name-of-img" alt="LaTeX-code" class="org-svg" />. This has all images be put on a new line. It happens often times that you need the image in-line, though, e.g. when you use in-line formulas.

Expected Behavior

1. Have customizable variables governing the foreground and background colors of the images.
2. Have a customizable variable which governs whether (LaTeX-)images are standardly put on a new line or not (and a way to make exceptions for some cases).

How to Reproduce the Issue

In org-mode

#+title: tryout svg
#+startup: latexpreview
#+options: tex:dvisvgm

Let us try an inline formula like $p \to q$. Does this work? $r \to s$ 

Does this =tikz= picture work?

$\begin{tikzpicture}
  \draw (9,3) -- (1,4);
\end{tikzpicture}$

In markdown

+++
draft = false
+++

Let us try an inline formula like <img src="/ltximg/tryout_8db7f3fe2e08b21ad93b31c0aca68f660486ee54.svg" alt="tryout_8db7f3fe2e08b21ad93b31c0aca68f660486ee54.svg" class="org-svg" />. Does this work? <img src="/ltximg/tryout_3016109b459a025d2698f41529c8fd1ed5842f3f.svg" alt="tryout_3016109b459a025d2698f41529c8fd1ed5842f3f.svg" class="org-svg" />

Does this `tikz` picture work?

<img src="/ltximg/tryout_59c58c65ab8c6db1a3d13b01ec879cd4289eef4a.svg" alt="tryout_59c58c65ab8c6db1a3d13b01ec879cd4289eef4a.svg" class="org-svg" />

In org-mode: HTML output:

[kaushalmodi]

Hello,

Thanks for writing up a good issue report.

The images are exported to markdown according to this template: <img src="/image-folder/name-of-img" alt="LaTeX-code" class="org-svg" />. This has all images be put on a new line.

img elements do not show up on new lines by default. I would have to guess that the CSS in your theme is setting display: block; for all img elements (or something similar).

You can see on this ox-hugo's dvisvgm test page that the inline image rendering (the a + b formula) is rendering correctly: https://ox-hugo.scripter.co/test/posts/equations-exported-to-svg/ (Markdown file exported by ox-hugo).

Here's the Org source of that test, for the inline and block equations part:

Example of an inline equation: \[ a + b \]

Example of a block equation:

\begin{equation}
C = W\log_{2} (1+\mathrm{SNR})
\end{equation}

Can you also share the Markdown file generated when you export that MWE?

[kaushalmodi]

@Perangelot I have cleaned up my earlier comments, edited my last comment, and moved the discussion related to SVG foreground/background colors to https://github.com/kaushalmodi/ox-hugo/discussions/612.

[kaushalmodi]

@Perangelot I have added your inline equation example to the same test and it's rendering inline. So it looks like what I guessed initially.. something to do with your CSS:

• Test HTML
  • Test Markdown exported by ox-hugo

[Perangelot]

Thanks for your fast answer! I now completely left out the .css file and still got the same result, so I think it is the theme I am using rather then the styling (which would be weird anyway because it only defines the APA citation style). If I find out something new, I'll get back to you. About the black color: I'm on it.

[Perangelot]

Okay, I've got it working now, it actually was the .css file and your predication about the img block was absolutely correct. I somehow misread .csl file... Sorry for the hassle, you helped me out a lot!