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?

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:

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?

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.

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.

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.

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.

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.