Margins on Floating SVG

[Rand Brittain]

Okay, so I'm attempting to use a floating SVG image as the link to what would be a sidebar in the paper copy of a book. I've set the SVG image up like this:

<div class="icon">
    <svg height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" version="1.1" viewBox="0 0 200 200" width="200px">
      <image class="icon" width="100%" height="100%" xlink:href="../Images/field.svg"></image>
    </svg>
  </div>

.icon {
	float: right;
	display: block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

In spite of my attempts to set the margins at 0, however, there's quite a sizeable amount of space between the edges of the image and the text around it. What should I be doing to reduce that whitespace?

[dgatwood]

Try setting the height and width of the icon div to 200px. Beyond that, my guess would be whitespace in the image itself.

I recommend taking a look at the HTML page in a good web browser with a decent web inspector that shows all the different boxes in the box model (e.g. a WebKit-based browser, or Firefox with Firebug). Alternatively, add "border: 1px solid red;" to see where the image's bounding box actually is.

Oh, and another thing. I just noticed that you're floating the image to the right. If your paragraph style uses a ragged right margin, the right margin will appear larger because if an entire word doesn't fit, it gets kicked to the next line. Specifying a style that allows hyphenation can fix this. For example:

p {
        hyphens: manual;
        -webkit-hyphens: manual;
        -moz-hyphens: manual;
        -epub-hyphens: manual;
        adobe-hyphenate: auto;
}

[Rand Brittain]

Originally Posted by dgatwood

I recommend taking a look at the HTML page in a good web browser with a decent web inspector that shows all the different boxes in the box model (e.g. a WebKit-based browser, or Firefox with Firebug). Alternatively, add "border: 1px solid red;" to see where the image's bounding box actually is.

Blurgh, did this and it looks like the whitespace is in the image itself. Looking at this, can someone tell me if there's an easy way to remove it or if I'll have to call in someone with more photoshop-fu?

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="m0,0h512v512h-512z"/>
<g transform="matrix(18.68858,0,0,18.68858,-4020.68104,-6000.48285)">
<path d="m531.0372,404.564c0,7.4688-6.0546,13.5234-13.5234,13.5234s-13.5234-6.0546-13.5234-13.5234 6.0546-13.5234 13.5234-13.5234 13.5234,6.0546 13.5234,13.5234z" fill="none" stroke="#fff" stroke-width="1.0479" transform="matrix(.91335,0,0,-.91335,-243.74502,704.31322)"/>
<path d="m217.6201,339.8686c7.4964-1.0428 15.0449-1.3022 22.6973,0-3.233,9.0688-19.234,9.7148-22.6973,0z" fill="#fff" fill-rule="evenodd"/>
<path d="m217.5938,330.0938c2.2793,1.146 7.5416-.5858 11.5,1.0312-.7265-.6797-1.5579-1.0706-2.4375-1.3125 2.2881.2469 5.4462-.6991 8.6875.625-.7164-.6702-1.5403-1.0381-2.4062-1.2812-1.6726-1.4122-3.8165-1.5223-5.875-1.4688-2.2524-1.6154-5.28-1.1499-7.7527-1.1317l-1.716,3.5379z" fill="#fff" fill-rule="evenodd"/>
<path d="m235.375,331.4062c.4407.4296 1.0244.6438 1.7188.7812-2.5803.0571-5.0504.2924-6.6562-.625 .473.7605 1.0767,1.2412 1.7812,1.5312-1.0682-.0232-2.0587-.172-2.9375-.5938 1.4357,1.6291 3.6973,1.6384 6.125,1.4062 1.8494.6727 4.002.7748 6,.625l-.1562-1.1875-.3438.0312-.4375-1.9688c-1.2034.4251-3.9922.272-5.0938,0z" fill="#fff" fill-rule="evenodd"/>
<path d="m228.5938,325.0938c.8374,1.5084 2.2497,1.5614 3.9612,1.4688 1.2547,1.5343 3.4246.9217 5.9138.9062l-.7532-1c-2.9347-1.8659-7.0466-.0469-9.1218-1.375z" fill="#fff" fill-rule="evenodd"/>
<path d="m217.1563,338.3621c5.7852-1.5501 17.1559-1.7083 23.5313,0" fill="none" stroke="#fff"/>
<path d="m219.5625,335.5809 1.2812,4.7188" fill="none" stroke="#fff"/>
<path d="m223.1138,334.8621 .4911,4.5938" fill="none" stroke="#fff"/>
<path d="m238.6362,335.9246-1.2812,4.7188" fill="none" stroke="#fff"/>
<path d="m235.0536,335.2059-.4911,4.5938" fill="none" stroke="#fff"/>
<path d="m231.0559,334.7996-.1831,4.5938" fill="none" stroke="#fff"/>
<path d="m227.029,334.6434 .1831,4.5938" fill="none" stroke="#fff"/>
</g>
</svg>

[Rand Brittain]

On the other hand, viewing the SVG in Firefox doesn't show any whitespace, which makes sense since there shouldn't be any. What else could I be doing wrong?

[DaleDe]

I see you have a viewport of 512 pixels but some of the values of the data are larger than that. Perhaps it is being scaled in the eBook with a simplistic scale factor which is leaving whitespace. Just a guess. But you might try drawing it so that it does not need scaling.

[dgatwood]

I'm not seeing any spacing around the image when I view just the snippets you have above in Safari with paragraphs of text after it. So whatever is happening, it's probably somewhere in your CSS other than in the bits posted above.

[Rand Brittain]

Originally Posted by dgatwood

I'm not seeing any spacing around the image when I view just the snippets you have above in Safari with paragraphs of text after it. So whatever is happening, it's probably somewhere in your CSS other than in the bits posted above.

Hm. See anything that could cause the issue?

@page {
	margin-top: 5pt;
	margin-bottom: 5pt;
}

body {
	display: block;
}

blockquote {
	margin-left: 0;
	margin-right: 0;
	text-indent: 0;
	}

.bold {
	font-weight: bold;
}

.break1 {
	margin-top: 1em;
	}
	
.break2 {
	margin-top: 2em;
}

.break-before {
	page-break-before: always;
}

.center {
	text-align: center;
	text-indent: 0;
}

.clean {
	text-indent: 0;
}

.footnote {
	page-break-before: always;
	padding-top: 10%;
	font-size: 0.85em;
}

.fullbox {
	page-break-before: always;
	padding-top: 2.0em;
	display: block; 
	padding-bottom: .25em;
}

.fullpage {
	page-break-before: always;
	page-break-after: always;
	padding-top: 25%;
}

.fullpageA {
	page-break-after: always;
	padding-top: 25%;
}

.gallery {
	height: 20%;
	page-break-after: always;
}

.galleryi {
	max-width: 100%;
	max-height: 80%;
}

.galleryii {
	max-width: 100%;
	max-height: 100%;
}

h1, h2, h3, h4, h5 {
	text-align: center;
	text-indent: 0;
	margin-bottom: 1.0em;
	margin-top: 1.0em;
}


h1.title {
text-align: center; 
margin-top: 2.0em; 
margin-bottom: 1.0em; 
font-size: 2.5em;
	}
	
h2.author {
text-align: center; 
margin-top: 1.0em;
	}

h4.year {
text-align: center; 
margin-top: 2.0em;
	}

.icon {
	float: right;
	display: block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

li.defining {
	list-style-image:url("../Images/defining-bullet.png");
}

li.dramatic {
	list-style-image:url("../Images/dramatic-bullet.png");
}

li.heroic {
	list-style-image:url("../Images/heroic-bullet.png");
}

li.lurid {
	list-style-image:url("../Images/lurid-bullet.png");
}

li.passionate {
	list-style-image:url("../Images/passionate-bullet.png");
}

li.pastoral {
	list-style-image:url("../Images/pastoral-bullet.png");
}

li.ritual {
	list-style-image:url("../Images/ritual-bullet.png");
}

li.setting {
	list-style-image:url("../Images/setting-bullet.png");
}

.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;
}

.italic {
	font-style: italic;
}

p {
	text-indent: 2.0em;
	margin-top: 0;
	margin-bottom: 0;
	text-align: justify;
}

p.missive {
	margin-left: 1em;
	margin-right: 1em;
	text-indent: 0em;
}

p.missive-indent {
	margin-left: 1em;
	margin-right: 1em;
	text-indent: 2em;
}

.right {
	text-align: right;
	}

.sidebar {
    border: 5px groove;
    display: block; 
    float: right;
    margin-bottom: 1%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    width: 40%;
    padding-bottom: .25em;
	 padding-left: 4px;
	 padding-right: 4px;
	 font-size: 0.8em;
}

.sidebarL {
    border: 5px groove;
    display: block; 
    float: left;
    margin-bottom: 1%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    width: 40%;
    padding-bottom: .25em;
	 font-size: 0.8em;
}

.sidebarLink {
/* Comment out the next line for linked sidebars; uncomment it for full ones. */
/*   display: none; */
	text-align: center;
	text-indent: 0;
	
}

.sidebarEll {
/* Comment out the next line for linked sidebars; uncomment it for full ones. */
/*  display: none; */
}

.sidebarTextB {
/* Uncomment the next line for linked sidebars; comment it out for full ones. */
  display: none; 
}

.sidebarpage {
	page-break-before: always;
	margin-top: 2.0em;
}

.small-caps {
	font-size: 85%;
	}

.snapshot {
	page-break-before: always;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	border-bottom: 2px solid black;
	text-align: left;
	font-style: italic;
}

span.subtitle {
	font-size: 80%;
	font-style: italic;
	font-weight: normal;
}

ul {
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}

ul.inner {
	margin-top: 0;
	margin-bottom: 0;
}

I see you have a viewport of 512 pixels but some of the values of the data are larger than that. Perhaps it is being scaled in the eBook with a simplistic scale factor which is leaving whitespace. Just a guess. But you might try drawing it so that it does not need scaling.

How do you mean, precisely?

[DaleDe]

Originally Posted by Rand Brittain

How do you mean, precisely?

The view box is 512 but the first point in the path is 531, too big for 512 and the whole thing will need to be scaled.

Dale

[Rand Brittain]

Originally Posted by DaleDe

The view box is 512 but the first point in the path is 531, too big for 512 and the whole thing will need to be scaled.

Dale

Isn't scaling normal for SVG images?

[dgatwood]

Originally Posted by DaleDe

The view box is 512 but the first point in the path is 531, too big for 512 and the whole thing will need to be scaled.

Dale

Not if the viewer was written correctly. The viewBox in SVG is equivalent to PostScript's BoundingBox. The content inside the viewBox is scaled to fit the height and width of the enclosing element. Anything outside that box probably doesn't get drawn, but if it is drawn, it is drawn outside the bounds of the CSS box defined by the enclosing element.

[DaleDe]

Originally Posted by Rand Brittain

Isn't scaling normal for SVG images?

Of course but it could account for the extra margin the user is complaining about. Then again it might not be but something is causing the margin.

Dale

[dgatwood]

Originally Posted by DaleDe

Of course but it could account for the extra margin the user is complaining about. Then again it might not be but something is causing the margin.

Dale

If so, then I'd expect it to be possible to fix it by adding a clipPath element.

http://sawyerhollenshead.com/writing...-svg-clippath/

[Rand Brittain]

Hm. Is there a simpler way to get a scaling image to float off to one side with its size set as a specific percentage of the page width?

I mean, I guess if I have to I can just convert it into a PNG of about the right size, but being able to do it this way was supposed to be what SVG is for.