Menu
I have bought an svg graphics, which I have exported to .svg file, so that it can be used in inline HTML. I have inserted it into <body> tag of my document, but now I want it to fill full width and full height of the screen. I have tried setting width and height attribute of <svg>, position: absolute and top, right, bottom, left: 0, viewBox set to "0 0 screen_width screen_height", load .svg file as image and force image to be full-window using position: absolute nad top, right, bottom, left: 0.
Nothing worked, though.
Here is the svg itself: http://pastebin.com/y8kqf1bD
I have tried all of the options from Full width and height SVG but they do not work, too.
Do you have an idea how could I do that?
Thanks so much in advance!
753
We use viewBox to make the SVG image scalable. viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units. Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally.
An SVG image with fixed dimensions will be treated just like a raster image of the same size. Note: If you are trying to stretch your SVG to a different aspect ratio with CSS—for example in order to stretch it over the page background—make sure your SVG includes preserveAspectRatio="none" .
❓ How can I resize a SVG image? First, you need to add a SVG image file: drag & drop your SVG image file or click inside the white area to choose a file. Then adjust resize settings, and click the "Resize" button. After the process completes, you can download your result file.
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x , min-y , width and height .
<svg> elements are sized using height and width attributes so
<svg height="100%" width="100%">
</svg>
will fill the screen.
You will additionally need to set both the <html> and <body> tags style="width:100%;height:100%" to ensure that they cover the screen. Here's a complete full screen rect:
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:0;">
<svg height="100%" width="100%">
<rect fill="lime" width="100%" height="100%"/>
</svg>
</body>
</html>You can also do this via a stylesheet if you want.
html, body, svg {
width: 100%;
height: 100%;
margin: 0;
}<html>
<body>
<svg>
<rect fill="lime" width="100%" height="100%"/>
</svg>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
