Question

I’m working on a site where the instructions for using it are embedded via an SVG which is 2100 x 2800 px or so, and is resized to 90% of browser window width. For some reason, it adds a ton of whitespace to the top and cuts off to the bottom. I don’t know very much about SVGs, and this one was generated with illustrator, but I’m curious what I can do to fix this.

Pictures: https://i.stack.imgur.com/0zVKG.png, https://i.stack.imgur.com/orJ0x.png

Here is the svg header and some other css/html code that I am using:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="2120.263px" height="2839.466px" viewBox="0 0 2120.263 2839.466" enable-background="new 0 0 2120.263 2839.466"
 xml:space="preserve">

HTML:

<embed src="P3intro.svg" id="introsvg" type="image/svg+xml"  />

CSS:

article embed {
width: 90%;

margin-left: 5%;
}

Answer 1

I found out how to do it. What I did is I contained the SVG in a div with a fixed width calculated using the image aspect ratio and some jQuery, and made the SVG width 100% height 100%.