Log in / Register

Forum › How do I...?

How do I embed inline SVGs?

shiffman
Hello!

I am working with math notation. I started with MathML which worked, but without support for, say, MathJax or something equivalent, there were too many issues.

I was able to convert all of my math notation to SVGs, however, I'm running into an issue.

Let's say I have this very simple HTML document:

<html>
<body>
<p>Hello is written via an SVG: 
<svg:svg style="background-color:#00FF00"><svg:text>hello</svg:text</svg:svg>
Did it work?</p>
</body>
</html>


The browser renders it nicely as so:

browser.png


But prince gives me:

prince1.png


This makes sense as I could see how it would have no inherent sense of line-height or display-inline, etc.

I've tried modifying various CSS styles and/or SVG attributes but with little to no success. I'm generally getting odd results (different than the browser).

Does anyone have any tips???

Thanks!
Dan
  1. browser.png‎ 18.0 kB ‎
    browser
  2. prince1.png‎ 14.3 kB ‎
    prince1
mikeday
This is actually a HTML parser issue. Because you can't nest SVG inside HTML4, the parser is choking on it, and splitting the paragraph when it hits the <svg> tag, leaving the SVG as a block-level image that gets too big.

You can enable the experimental HTML5 parser with "-i html5" on the command-line, or switch to XML (making sure you define the svg: namespace prefix somewhere appropriately), either of these fixes the problem.

In the next release of Prince the HTML5 parser will become the default parser for all HTML documents.
shiffman
Oh wow, thank you, this is super helpful! I am so close!

One more hurdle. I'm generating SVGs from MathML via SVGMath (http://sourceforge.net/projects/svgmath/). If open one of my SVGs directly in the browser, I get:

vector.svg.png


However, if I embed the SVG in HTML directly, I get:

vector.html.png


This is what the browser sees, and with "-i html5" it's now the same with Prince (awesome!). Admittedly, I am now asking a non-prince question given that my SVG seems somehow incompatible with HTML5. Ironically, the vector renders without "-i html5" just with all sorts of line-height problems.

This is what my HTML looks like:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Nature of Code</title>
</head>
<body>
<p>
<?xml version="1.0" encoding="utf-8"?>
  <svg:svg xmlns="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" height="12.190371pt" width="8.520000pt" xmlns:svgmath="http://www.grigoriev.ru/svgmath" viewBox="0 -9.600527 8.520000 12.190371">
    <svg:metadata>
      <svgmath:metrics top="12.1903710937" axis="6.57421875" baseline="2.58984375" bottom="2.44921875"/>
    </svg:metadata>
    <svg:g transform="translate(1.596914, 0.000000)">
      <svg:text font-size="12.000000" text-anchor="middle" y="0.000000" x="2.663086" font-family="Times New Roman" font-style="italic" fill="black">v</svg:text>
    </svg:g>
    <svg:g transform="translate(0.000000, -8.785137)">
      <svg:text font-size="8.520000" text-anchor="middle" y="2.828906" x="4.260000" font-family="Times New Roman" fill="black">→</svg:text>
    </svg:g>
  </svg:svg>
</p>
</body>
</html>


I cannot thank you enough for the help and advice!

Best,
Dan
  1. vector.html.png‎ 55.1 kB
  2. vector.svg.png‎ 55.0 kB ‎
    vector svg
mikeday
Now that's a weird one. Looks like another HTML5 parsing issue, this time Prince and the browsers are in agreement. Moving the SVG into a separate file and referencing it as an <img> fixes the problem, although may not be convenient for you.

The other solution is to change the namespaces so that the default namespace is the SVG namespace, and drop the (unused) MathML namespace, like this:

<svg xmlns="http://www.w3.org/2000/svg" height="12.190371pt" width="8.520000pt" xmlns:svgmath="http://www.grigoriev.ru/svgmath" viewBox="0 -9.600527 8.520000 12.190371">

This also fixes the problem, although I would need to have a good look at the HTML5 specification to understand exactly why. :)
shiffman
I also tried this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Nature of Code</title>
</head>
<body>
<p>
Here is a vector inline with some text:
<embed src="vector.svg" type="image/svg+xml" />
Line height issue?
</p>
</body>
</html>


which gets me even closer, but results in:

lineheight.png
  1. lineheight.png‎ 14.8 kB
shiffman
Well, it turns out that I think SVGMath is giving me some odd SVG. By futzing with the translate() calls I am able to align the SVG with the inline text.

vector.image.svg.png


I will probably turn into a muttering crazy person, but in theory, as long as I build out SVG files for each instance of math notation and fix up the SVGs, this should be workable.

Math (notation) is hard.

Thanks again!
  1. vector.image.svg.png‎ 85.3 kB
shiffman
In case anyone is wondering, a little CSS did the trick.

img.math {
  width: auto;
  height: 13px;
  vertical-align: text-bottom;
}


mathnotation.png
  1. mathnotation.png‎ 56.3 kB
mikeday
By the way, we have now released Prince 9, which uses our new HTML5 parser that properly supports nested SVG inside HTML documents.