MobileRead Forums - View Single Post - Inline SVG questions (whitespace & other practices)

politicorific · 04-11-2009, 06:56 AM

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.

Code:

<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?

04-11-2009, 06:56 AM	#1
politicorific Junior Member Posts: 7 Karma: 10 Join Date: Mar 2009 Device: prs-505	Inline SVG questions (whitespace & other practices) 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. Code: <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? Last edited by politicorific; 04-11-2009 at 06:02 PM.