Home/ Questions/Q 970647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:50:19+00:00

How can I make a SVG appear reliably without scrollbars in HTML? Something that

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want the svg to fill the entire width/height of the screen try this in the html document:

    <style>
html, body { margin:0; padding:0 }
embed { width: 100%; height: 100% }
</style>

    If you wanted to fill a smaller region of the document, then try removing the width and height attributes on the referenced svg root element, and make sure that there is a viewBox attribute. Then the size of the container (embed) should decide the size properly, and there should be no scollbars.

    • 0