Inline SVG questions (whitespace & other practices)

[politicorific]

I've searched and searched and yet have not been able to come up with definitive answers to using SVG in epub files. I feel as though I've learned a lot about svg these past couple weeks, but still some answers elude me. Is there a guide to inline svg and epub files?

For example here is a snippet, for this example I have 3 basic lines of text - later examples will incorporate bezier curves. For reference I'm using Safari/Chrome to view the xhtml files and a sony PRS-505.

<svg:svg  xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:175; height:60px;" xml:space="preserve">
<svg:text x="15%"  y="25%" style="font-family:Lucida Sans;white-space:pre;font-size:12px;text-decoration:underline">text</svg:text>
<svg:text x="15%"  y="25%" style="font-family:Lucida Sans;white-space:pre;font-size:12px;">          2theright</svg:text>
<svg:text x="5%"  y="45%" style="font-family:Lucida Sans;font-style:italic;font-size:12px;">slightly left</svg:text>
<svg:text x="10%"  y="65%" style="font-family:Lucida Sans;white-space:pre;font-style:italic;font-size:12px;">slightly right</svg:text>

Let's evaluate this line by line.

Which fonts should I be using? Which fonts are monospace (important for my drawings since the numbers must line up vertically.) Minion Pro is an Open Font, but isn't monospace, Lucida Sans is - is there a list of Open Fonts which are monospace?

How do I preserve whitespace?

I have tried several different places to preserve whitespace. "xml:space= "preserve" doesn't seem to be doing anything. Neither does the "pre:" tag, nor does placing a [code] or [pre] tag before the [svg] tag. I have defined my xml doctype to be strict.

Using " " 8 times in a row for 8 spaces doesn't help with the readability of the document

Also I've seen some epub files use "<svg:svg xxx> <svg:text> </svg:text>" instead of "<svg> <text></text> </svg>" Is there a difference?

Dimensions - should I be using % or px for the viewbox? I'm defining my columns to be about 350 pixels since the paragraphs are very short. If I define my drawings in pixels will it cause problems with reflow/zoom? For example will it keep the drawing the same size or cut parts off?

[llasram]

Originally Posted by politicorific

I've searched and searched and yet have not been able to come up with definitive answers to using SVG in epub files. I feel as though I've learned a lot about svg these past couple weeks, but still some answers elude me. Is there a guide to inline svg and epub files?

Nothing EPUB-specific that I know of, but there isn't really anything EPUB-specific about SVG. All the information out there about including SVG inline in XHTML should apply.

Originally Posted by politicorific

First must I use only one style or the other?

I'm afraid I don't follow...

Originally Posted by politicorific

Which fonts should I be using? Which fonts are monospace (important for my drawings since the numbers must line up vertically.) Minion Pro is an Open Font, but isn't monospace, Lucida Sans is - is there a list of Open Fonts which are monospace?

I assume by "Open Font" you mean "OpenType font." In any case, that's a feature of the font, and is entirely up to you, assuming that you are embedding the fonts. The EPUB spec doesn't require reader applications to make any particular fonts available, so if you need font with particular properties, the only way to ensure they are present is to embed them.

That said, you don't need to use monospace fonts to ensure text alignment. Just construct your SVG so that the numbers are aligned.

Originally Posted by politicorific

How do I preserve whitespace?

As far as I know, you don't. If you need pieces of text placed at particular points, place them there using separate SVG text elements.

Originally Posted by politicorific

I have tried several different places to preserve whitespace. "xml:space= "preserve" doesn't seem to be doing anything. Neither does the "pre:" tag, nor does placing a [code] or [pre] tag before the [svg] tag.

The XHTML and CSS containing the SVG affects only the placement and size of the box in which the SVG is rendered.

Originally Posted by politicorific

I have defined my xml doctype to be strict.

That's actually incorrect. The XHTML doctypes specify only XHTML elements, which means that including SVG elements makes the document invalid. If you're using inline SVG, you can't declare a doctype. As a side-effect this means that you can't use any of the HTML character entities -- just include the characters themselves directly and encode as UTF-8 or UTF-16 (as the EPUB spec requires).

Originally Posted by politicorific

Also I've seen some epub files use "<svg:svg xxx> <svg:text> </svg:text>" instead of "<svg> <text></text> </svg>" Is there a difference?

Namespaced XML differentiates different "applications" or "vocabularies" by giving each element a "fully-qualified name" consisting of a "namespace" and a "local name." For the SVG element <svg/> the namespace is "http://www.w3.org/2000/svg" and the local name is "svg". This is unwieldy to write out all the time, so the spec allows documents to declare "namespace prefixes," which are human-readable shorthand for a namespace. Your snippet contains xmlns:svg="http://www.w3.org/2000/svg" which declares the prefix 'svg' as referring to the SVG namespace for that element and for all of it's descendants. This means you have to use <svg:svg/> and <svg:text/>. If you used just <svg/> then you'd be saying "the element in the default namespace with the local name 'svg'" (you'll usually have already declared the default namespace as XHTML). If you instead have xmlns="http://www.w3.org/2000/svg" on your SVG <svg/> elements, then you're re-defining the default namespace for that element and all its descendents, in which case you need to use just <svg/> and <text/> -- in that case the svg: prefix is undeclared and <svg:svg/> doesn't refer to anything the parser knows about.

Originally Posted by politicorific

Dimensions - should I be using % or px for the viewbox? I'm defining my columns to be about 350 pixels since the paragraphs are very short. If I define my drawings in pixels will it cause problems with reflow/zoom? For example will it keep the drawing the same size or cut parts off?

You should rarely use pixels for anything -- those are purely a feature of the particular device and its resolution. Use % to specify a proportion of the viewable area or 'pt' to specify an actual physical dimension. For viewBox though, the units are the SVG internal scalable units, and those aren't really related to what happens in actual rendering. You just use viewBox to specify what viewport you want on the drawing, then use the size of the XHTML+CSS rendering box to specify it's actual placement and size in rendering.

[politicorific]

Originally Posted by llasram

I'm afraid I don't follow...

whoops, I had two examples differentiating the different svg styles, I removed it when it seemed a shorter question could be formed.

I assume by "Open Font" you mean "OpenType font." ... so if you need font with particular properties, the only way to ensure they are present is to embed them.

Got it, I'll pick a font and embed it.

That said, you don't need to use monospace fonts to ensure text alignment. Just construct your SVG so that the numbers are aligned.
As far as I know, you don't. If you need pieces of text placed at particular points, place them there using separate SVG text elements.

Actually I do, since my text is mostly math problems and vertical spacing is important. Since I reuse a large portion of my code for 100 odd drawings, I'd rather not retune each piece. For example, if I need a single number or a list of numbers, that would entail figuring out by trial and error the correct x co-ordinate placement. Also I want to be able to read my code without having to view it in another application for every change I make.

I still need a way to preserve whitespace.

The XHTML and CSS containing the SVG affects only the placement and size of the box in which the SVG is rendered.

That's actually incorrect. The XHTML doctypes specify only XHTML elements, which means that including SVG elements makes the document invalid. If you're using inline SVG, you can't declare a doctype. As a side-effect this means that you can't use any of the HTML character entities -- just include the characters themselves directly and encode as UTF-8 or UTF-16 (as the EPUB spec requires).

Okay, so I've unwittingly included css inside my svg? The whitespace : pre declaration and another html character I'm using (the multiplication sign) are being rendered by Chrome and Safari, but shouldn't in say inkscape or other svg viewers which are not html aware?

svg name spacing

Okay nevermind, I shouldn't have omitted my second example since it contains what you stated.

You should rarely use pixels for anything -- those are purely a feature of the particular device and its resolution. Use % to specify a proportion of the viewable area or 'pt' to specify an actual physical dimension. For viewBox though, the units are the SVG internal scalable units, and those aren't really related to what happens in actual rendering. You just use viewBox to specify what viewport you want on the drawing, then use the size of the XHTML+CSS rendering box to specify it's actual placement and size in rendering.

I think I understand, but am still baffled if I use height and width at 100%, this should take up the entire display area, right? Forgive my lack of terminology, but if percentage is used, then the outcome is determined by taking the original size of what the page is, inherited from <head>, <div>, <table>, or other css element, and then derived to the resulting size.

For example, I'm defining page width as 350px (approximately 65-80 characters as most css documents suggest), then defining a table which has a column width of 60% (now 210px), and finally defining an svg with 50% width, the resulting image should be 105px? Yet, how do I define height, which can be infinite, must I continue to use px or pt?

[llasram]

Originally Posted by politicorific

Actually I do, since my text is mostly math problems and vertical spacing is important. Since I reuse a large portion of my code for 100 odd drawings, I'd rather not retune each piece. For example, if I need a single number or a list of numbers, that would entail figuring out by trial and error the correct x co-ordinate placement. Also I want to be able to read my code without having to view it in another application for every change I make.

Ah, I see. Still, I disagree that monospace fonts are the "right" way to achieve this. Have you considered using a math-oriented language and converting to SVG as a rendering format? It looks like there's an open source MathML-to-SVG converter.

Originally Posted by politicorific

I still need a way to preserve whitespace.

Hmm. If I'm reading the SVG spec correctly (Section 10.15 "White space handling"), using xml:space="preserve" should preserve spaces, but treat newlines like spaces. If that's not what you're seeing, then I'm afraid you've found a bug.

Originally Posted by politicorific

Okay, so I've unwittingly included css inside my svg? The whitespace : pre declaration and another html character I'm using (the multiplication sign) are being rendered by Chrome and Safari, but shouldn't in say inkscape or other svg viewers which are not html aware?

I don't see a "white-space" property in the SVG property index, so yah. You probably can't depend on even all SVG-in-XHTML EPUB renderers to treat that CSS property in SVG the same way.

Originally Posted by politicorific

I think I understand, but am still baffled if I use height and width at 100%, this should take up the entire display area, right? Forgive my lack of terminology, but if percentage is used, then the outcome is determined by taking the original size of what the page is, inherited from <head>, <div>, <table>, or other css element, and then derived to the resulting size.

For example, I'm defining page width as 350px (approximately 65-80 characters as most css documents suggest), then defining a table which has a column width of 60% (now 210px), and finally defining an svg with 50% width, the resulting image should be 105px? Yet, how do I define height, which can be infinite, must I continue to use px or pt?

Ok, there's several things going on here.

First, although I'm not sure this is what're saying you are doing, you probably shouldn't be specifying your page-width at all, especially not in pixels. Although it's common practice Web documents, EPUB books are, well, books, and it's the job of the reader application to ensure that the text is at a readable width. If you want finer control over the page layout, Adobe has defined a separate stylesheet language which allows you to control the number of columns used for various display sizes. (Only AdobeDE understands these stylesheets ATM.)

Second, yah, '%' in CSS units is a percentage of the parent box. So if you have a box that you've set up to consume 60% of the page-width, a width of 100% on any child boxes will consume the entire page-width. If you want to control image maximum size and proportion, check out the CSS max-height and max-width properties and the SVG preserveAspectRation attribute. With those together you should be able to ensure that your images reasonably consume whatever space is available.

[Peter Sorotokin]

The following code code works in Digital Editions as well as Firefox and Opera (but not Safari).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<p>Here is inline SVG:</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<g xml:space="preserve" font-size="10" font-family="monospace">
<rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"/>
<text x="30" y="20"> XXX </text>
<text x="30" y="30">X   X</text>
<text x="30" y="40">X   X</text>
<text x="30" y="50">X   X</text>
<text x="30" y="60"> XXXX</text>
<text x="30" y="70">    X</text>
<text x="30" y="80">    X</text>
<text x="30" y="90"> XXX </text>
</g>
</svg>
<p>A paragraph after SVG</p>
</body>
</html>

g tag is strictly speaking not needed, all of the properties could go to svg. Unfortunatel it does not work properly in DE. (It works for standalone SVG, but when SVG is embedded in XHTML, svg tag is somewhat in between two worlds and it gets confused).

[politicorific]

Originally Posted by Peter Sorotokin

The following code code works in Digital Editions as well as Firefox and Opera (but not Safari).

g tag is strictly speaking not needed, all of the properties could go to svg. Unfortunatel it does not work properly in DE. (It works for standalone SVG, but when SVG is embedded in XHTML, svg tag is somewhat in between two worlds and it gets confused).

First thank you for the example! An example which I can reverse-engineer is what I needed! If anything useful came of this discussion it's this. I hope this discussion sheds some light for those who google this topic 2-3 years down the line.

I was misinformed that Digital Editions uses webkit to render svg, which makes my installation of Chrome and Safari pointless since the above example doesn't display properly, yet there appear to be several features of svg unimplemented in firefox. Even so, it's miles beyond IE which exhibits the type of parser overlap you describe when using object/embed tags to trick IE into displaying something, even if it is a "svg unsupported" message.

Now I have a tough question, how would I mix and match different text styles in that svg code - for example, have some text underlined, italicized, or bolded?

[Peter Sorotokin]

Originally Posted by politicorific

Now I have a tough question, how would I mix and match different text styles in that svg code - for example, have some text underlined, italicized, or bolded?

Basically the same way as in XHTML, CSS properties text-decoration, font-style and font-weight would do the trick. tspan element can be used the same way as span is used in XHTML (SVG does not have things like b or u tags, but you can use class attribute and a stylesheet). Here is another example for you, but now it only works in DE and Opera:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<p>Here is inline SVG:</p>
<svg xmlns="http://www.w3.org/2000/svg" width="10em" height="10em" viewBox="0 0 100 100">
<g xml:space="preserve" font-size="10" font-family="monospace">
<rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"/>
<text x="30" y="20"> XXX </text>
<text x="30" y="30">X   X</text>
<text x="30" y="40" style="font-style:italic">X   X</text>
<text x="30" y="50">X   X</text>
<text x="30" y="60" style="text-decoration:underline"> XXXX</text>
<text x="30" y="70">    X</text>
<text x="30" y="80">    X</text>
<text x="30" y="90"> X<tspan style="font-weight:bold">XX</tspan> </text>
</g>
</svg>
<p>A paragraph after SVG</p>
</body>
</html>

Also, notice viewBox attribute and with/heights in em units. This makes SVG scale automatically when default font size changes (may or may not be something that you want).

Peter