![]() Just like with the img tag, Firefox and Chrome both assume the width of the SVG object to be 100%, and the height changes proportionally as the width increases or decreases, and hence the SVG scales as expected. referencing a PNG version of the graphic, for example) -> SVG embedded using Īn SVG embedded using an tag behaves in a similar way to that embedded using when it comes to making the SVG fluid. This is due to the fact that the dimensions of the img establish the viewport for the SVG it references. Note that if you choose to set a width and height on the tag other than 100%, the SVG viewBox is going to fit inside the viewport created by these dimensions just like it would if the width and height were set on the element. So, making an SVG embedded as an img fluid is doable by removing the explicit height and width set on the, and then adding one line of CSS for Internet Explorer: /* fix for IE */Ĭheck the demo out in different browsers to see how the SVG behaves. These results were obtained from tests made in Internet Explorer 9 and 11. In order to work around this issue in IE, it is enough to explicitly set the width on the img to 100%. The SVG is then positioned inside the containing div such that its height is equal to 150px the width is assumed to be 100%, though, making the SVG always 150px in height no matter how wide the container gets, resulting in extra white spaces on both sides. If you don’t specify a width for the img, it will assume the height is equal to 150px, which is the default height for replaced elements as specified in CSS-the default width is 300px. In Internet Explorer, things are different. This behavior is different from an img referencing a raster graphic such as a PNG image, for example in the latter case, you’d have to explicitly set the width of the img to 100% using CSS to make it fluid. As the containing div is then resized, the img SVG responds in an expected way. For example, if you were to wrap the img in a div, without specifying the height and width of the img, Chrome and Firefox will both assume the img has width: 100% the SVG is then stretched to fill the containing div, and its height is adjusted accordingly so that it preserves its aspect ratio. Normally, browsers are smart enough to determine the width and height of the SVG even if you don’t specify a width and height for the element. The contents of the SVG are then positioned inside the viewport depending on the value of the viewBox specified on the. When an SVG is embedded as an image in an tag, the height and width specified on the tag are used by the browser as a viewport to render the SVG into. ![]() We’ll be using the following SVG nautical logo in the demos. ![]() ![]() ![]() After removing the height and width, you can embed the SVG in one of several ways on the page. You should, however, leave the viewBox attribute present. When a fixed height and/or width is specified, the SVG is going to maintain that height/or width, thus restricting it from being fully responsive. In order to make an SVG fluid, the first logical thing to do is to remove the height and width attributes. In this article, we’re going to explore these techniques, going over when to use each one, in order to make SVGs fluid and/or adaptive. That said, there are certain “fixes” and hacks that we can use to get the expected behavior in all browsers. However, due to different browser implementations and inconsistencies, the web isn’t all ponies and rainbows, and making SVGs fluid isn’t quite that straightforward, because the way browsers determine the dimensions of an SVG when embedded in different ways isn’t consistent across all of them. The other commonly used techniques include embedding it as an image using the tag, embedding it using the tag, using an iframe, and as a CSS background image.Ĭonceptually, making an SVG scale as its container scales should be as simple as removing any fixed height and/or width, and specifying a viewBox attribute value. An SVG can be embedded on a web page in many ways one of which is embedding it inline in an HTML5 page using the tag. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |