View Full Version : How to center/fit page width SVG images with <OBJECT>

07-31-2010, 11:48 AM
Based on discussion in another thread (, I use the following CSS and XHTML for simple horizontally centered images with a caption:

div.figure { text-align: center; font-style: italic; font-size: 80%; margin: 1em 0; page-break-inside: avoid; }
div.figure img { page-break-after: avoid; }
div.figure p { text-align: center; text-indent: 0; margin-top: 1em; page-break-before: avoid; }
<div class="figure">
<img src="../Images/my-image.jpg" />

To insert an SVG image I instead use code like this:

<div class="figure">
<object type="image/svg+xml" data="../Images/my-image.svg">
<img alt="Fallback" src="../Images/my-image.jpg" />

How can I make sure that the SVG image is horizontally centered? Is it enough to put it inside <DIV>? Also, how can I make it fit all the page width?