Bad font rendering of svgs, probably due to missing dvips options

[heindel]

Describe the bug All svgs on https://tikz.dev/tikz-animations seem to have missing font options. For example, in the first picture, the two os in Moon are overlapping.

Screenshots

Device / OS / Browser Ubuntu firefox

remedy proposed here's what an expected svg would look like

it is obtain by using the following command to process the source below

dvilualatex animationTest.tex; ./dvisvgm --font-format=ttf,ah animationTest.dvi

this uses a self-compiled dvisvgm with autohinting, but even the -n option instead of --font-format=ttf,a should produce better results

%animationTest.tex
\documentclass[preview,dvisvgm]{standalone}

\usepackage{tikz}
\usetikzlibrary{animations}

\begin{document}
{\tiny
\begin{verbatim}
$ dvilualatex animationTest.tex; ./dvisvgm --font-format=ttf,ah animationTest.dvi; firefox animationTest.svg
https://tikz.dev/tikz-animations
\end{verbatim}
}
\begin{tikzpicture}[
  animate/orbit/.style 2 args = {
    myself:shift = {
      along = {
        (0,0) circle [radius=#1]
      } sloped in #2s/10,
      repeats }} ]

  \node :color = {0s = "orange",
    2s = "red",
    4s = "orange",
    repeats}
  {Sun};

  \begin{scope}[animate={orbit={2.5cm}{365}}]
    \node {Earth};
    \node [animate={orbit={1cm}{28}}] {Moon};
  \end{scope}

  \useasboundingbox (-3.8,-3.8) (3.8,3.8);
\end{tikzpicture}
\end{document}

happy bug fixing !

[DominikPeters]

Thanks for reporting this, sorry it'll take me a while to fix this. It looks correct on my system (MacOS with different browsers) and I don't have easy access to other systems at the moment. Have you checked how it looks for you in other browsers?

[hbghlyj]

It looks correct on my system (Win11 with Firefox). The SVG in question has element <font-face>:

According to MDN doc, the SVG element <font> and <font-face> is Deprecated. Converting embedded SVG fonts to TTF will increase the file size. We could keep SVG in src in CSS @font-face, like:

@font-face {
    font-family: "nf0"
    src: url(data:image/svg+xml;charset=utf-8, ... ),
    font-weight: normal;
    font-style: normal;
}

[heindel]

for purpose of clarification, the issue seems to be related to (my) firefox on ubuntu (and unfortunately I have not yet gotten around to look into this in more detail ...) as all is showing fine on, e.g., chromium