High-quality figures in html

Question

I'm writing the documentation for something using some tools that generate html. I would like to embed some high-quality figures into my pages that correspond to:

• font size and type should be the same as in the overall html content;
• fully vectorized.

All my figures are generated from LaTeX with tikz. It would be nice to use the same code to generate the figure for html.

I know that svg is supported by browsers but whenever I export my figure to svg, the font type and size are messed up even though I export text as text and not as paths. If the svg has text as text, isn't the browser supposed to print it with the current font type/size?

Is there another way to embed such figures?

Answer 1

The text should be the same size as long as they are defined the same and the SVG diagram is scaled at 1:1.

However, if your SVG has a viewBox, it will probably end up scaled differently, thus affecting the font size. Even if the font size is defined in real-world/physical units like points (pt) or centimetres (cm).

Demo: http://jsfiddle.net/vbYvU/1/