How can I make a SVG appear reliably without scrollbars in HTML? Something that works in both Firefox and Chrome is sufficient.
The most basic step is that the SVG appears as it's "natural" width and height in the document. Fully expanded. Without scroll bars. firefox generally does this. Chrome generally does not (unless I use prior knowledge of the actual width and height).
The more advanced step is that I give the SVG an arbitrary width (say 400 pixels), and the SVG appears scaled appropriately, while preserving it's aspect ratio. Again, no scroll bars.
I'd prefer not to have to know the natural dimensions of the SVG in the HTML. Changing the HTML or CSS is best, though changing the SVG (once, not for every size I want do display it) would also be fine.
Is this kind of thing possible?
Here's some example html that embeds an svg.
<html>
<head><title>SVG Sizing</title></head>
<body>
<embed type="image/svg+xml" src="test.svg">
</body>
</html>
The <embed> tag below can be changed to <object> or something else if needed.
Here's an example test.svg:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1200px" height="297px" version="1.1" viewbox="0 0 1200 297" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" stroke-width="1" text-rendering="geometricPrecision">
<text x="300" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> A </text>
<text x="900" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> B </text>
<line x1="300" y1="22" x2="300" y2="47" stroke="black"/>
<line x1="900" y1="22" x2="900" y2="47" stroke="black"/>
<text x="587" y="37" textLength="25" font-family="Helvetica" font-size="12" fill="black"> Start </text>
<line x1="300" y1="272" x2="300" y2="297" stroke="black"/>
<line x1="900" y1="272" x2="900" y2="297" stroke="black"/>
<text x="583" y="287" textLength="32" font-family="Helvetica" font-size="12" fill="black"> Finish </text>
<line x1="150" y1="284" x2="582" y2="284" stroke="black" stroke-dasharray="2,2"/>
<line x1="618" y1="284" x2="1050" y2="284" stroke="black" stroke-dasharray="2,2"/>
</svg>
Update:
Ok, seems the tool I am using is generating SVGs with a lowercase viewbox attribute, this is incorrect however, and the attribute name is actually camelcase viewBox as Erik writes correctly below.
This combined with the width/height removal or change to percentage allows me to achieve both parts of the question.
Thanks everyone!