Two Neighboring SVG Tags

[Rand Brittain]

So, I've been putting together a book with frequent title/icon combinations, and I've been putting the icon PNGs in an SVG tag to make sure they size right. So far, it's worked pretty well.

But now, I've run into a title with two icons, and I've been trying to figure out how to make them display side-by-side. They don't seem to want to do it.

Here's the title page:

<h2 class="iconic-title" title="Adversity">O<span class="small-caps">UTSIDE-</span>D<span class="small-caps">UST</span> T<span class="small-caps">REATMENT</span></h2>

  <div class="iconic-image-left">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 511 553" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="553" width="511" xlink:href="../Images/Pastoral.png"></image>
    </svg>
  </div>

  <div class="iconic-image-right">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 475 542" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="542" width="475" xlink:href="../Images/Heroic.png"></image>
    </svg>
  </div>

  <p class="iconic-marker">Shared Action or Adversity</p>

And here's the CSS:

.iconic-title {
	page-break-before: always;
	padding-top: 20%;
}

.iconic-image {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.0em;
	max-width: 30%;
}

.iconic-image-left {
	margin-top: 1.0em;
	max-width: 50%;
	float: left;
}

.iconic-image-right {
	margin-top: 1.0em;
	max-width: 50%;
	float: right;
}

.iconic-marker {
	font-style: italic;
	text-align: center;
	text-indent: 0;
	font-size: 85%;
	margin-top: 1.0em;
	page-break-after: always;
}

What am I doing wrong?

[DSpider]

Instead of two images side by side, you can have one image, that contains both of them. Open both of them in your favourite image editor, resize the canvas for the first one and then paste the second image near it. But this could add to the overall ePub size if it's done too frequently.

[mrmikel]

You might want to consider converting to jpg to save epub size, since you are very unlikely to see any image degradation on most epub reading devices.

[Rand Brittain]

Originally Posted by DSpider

Instead of two images side by side, you can have one image, that contains both of them. Open both of them in your favourite image editor, resize the canvas for the first one and then paste the second image near it. But this could add to the overall ePub size if it's done too frequently.

That is probably a much more sensible solution.

[rtmyers]

You might want to try assigning the svg elements the CSS property "display: inline-block; " and see how that goes (instead of using floats). If you then wrap the two in a <div> with the "margin-left; auto; margin-right: auto; " trick, it ought to center the pair of images on the page. (You can put the 'display' property inline in the SVG element using the 'style' attribute, or if you want to do it with a CSS rule, since it's in a different namespace, try *|svg as the selector (or svg|svg, with a @namespace declaration as the top of your CSS file). To add space between the two images, just add a non-breaking space, or for other spacing alternatives you can try CSS properties such as word-spacing (the two SVG elements will be considered "words" for purposes of layout). Of course, since you seem to know exactly what the image sizes are, have you considered placing both images in a single SVG element and positioning them using x and y attributes?

[mrmikel]

rtmyers

It seems to me the more complicated you make it, the more likely it will fail in one reader or another.


Should it? No. But we are still in the days of the wild frontier and there is an unresolved issue between high powered tablets and low powered readers as well as no standardization between reading devices.

[dgatwood]

My knee-jerk reaction would be:

<table>
<tr>
<td width="50%">
<img width="100%" src=".../image1.svg" ... />
</td>
<td width="50%">
<img width="100%" src=".../image2.svg" ... />
</td>
</tr>
</table>

but maybe that's just me.