[ldolse]

OK, new SVG problem, different book.

This time I'm trying to handle scene break markers, and the scene break marker is a simple dingbat - ☆ - unfortunately because ADE based devices are terrible with regard to their default fonts I can't just stick that in my code.

Rather than embedding a whole font, I thought that SVG could come to my rescue again, and it did - sort of...

I converted the dingbat to a path in Inkscape, pasted the SVG code into Sigil, worked my way past Sigil's current issues with SVG, and after some trial and error got it working in both ADE and QT. Basically needed to wrap the SVG in a div, and also add a style to the SVG class that limited the SVG to 1.5em in height. So far so good.

Then looking at the xhtml I was thinking about how inefficient it was to paste the same SVG code into the file over and over again for every scene break marker, and low end devices might not like it much... So I decided to add it as a file to Sigil in the images directory. It was also much more obvious to me how to set up alt-text for browsers which don't support SVG using an image tag - I'm sure that's possible directly in the SVG, but wasn't sure how to go about it.

Anyway I set the image up similarly to the original SVG - wrapped in a div tag, height set to 1.5em. Now the SVG gets squashed... Auto on the width didn't help. Manually setting a width did work, but Webkit and ADE seem to disagree wildly about what '1em' is horizontally. To get the right aspect ration it needed to be around 1.5x6em in Webkit, but 1.5x3em in ADE. That's no good. I tried adding preserveAspectratio, but that only succeeded in squashing the svg in different directions.

Is there an easy fix, or is this entirely the wrong approach and an SVG font would be better?

I've attached another example epub.

This is my SVG code:

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" preserveAspectRatio="xMidYMid meet" viewBox="0 0 139.75 131.09">
<metadata>image/svg+xml</metadata>
<g transform="translate(-260.12456,-332.18677)">
<g transform="matrix(3.9575472,0,0,3.9575472,-421.93397,-780.94632)" fill="#000">
<path d="M183.91,307.67,190,303.46l5.9375,4.2188-2.0312-7.0312,5.9375-4.0625h-7.5l-2.3438-6.7188-2.3438,6.7188h-7.5l5.9375,4.0625-2.1875,7.0312m6.08-1.1l-10.781,7.8125,4.0625-12.656-10.938-7.6562h13.594l4.0625-12.812,4.0625,12.812h13.594l-10.938,7.6562,4.0625,12.656-10.76-7.81"/>
</g>
</g>
</svg>

This is my html code:

 <div class="scenebreak"><img alt="*" class="scn_img" src="../Images/Star.svg" /></div>

And this is the relevant css(without the width, so squashed):

.scn_img {
    height:1.8em;
    }
.scenebreak {
    display: block;
    margin-bottom: 1em;
    clear:all;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    page-break-before: avoid;
    text-align: center;
    }