Menu
Im trying to create an svg in illustrator and use it as a background image to fill to the top and bottom of the page but still be inside a div that is 950px wide, and am having no end of trouble.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
This is my svg, as you can see illustrator has given it width and height elements. I removed these so i could set them in the css:
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
}
I've tried various different combinations of removing the sizes from the svg and adding styles in css such as:
background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;
but nothing I do seems to work. Any ideas? There could be something fundamental I just don't understand about svgs? The behavoir, when I can get it to display anything at all, seems to be that it either becomes totally set in size, or set in size and then when I make the window smaller it shrinks the width and maintains the aspect ratio.
Its supposed to look like this however big the window is :
But when i make the window height bigger the side of it disapears, this is using
background-size: cover;
In the css, and no dimensions in the svg.
When I add a set width like so:
background-size: 950px cover;
It displays like this:
And if I make the window smaller is does this:
Which is especially annoying.
EDIT
Rest of css and HTML concerned looks like so
CSS
/* Main Containers */
.center{
margin: 0px auto;
width: 1200px;
height: 100%;
}
#left{
width: 150px;
height: 100%;
display: block;
float: left;
background: #000000;
}
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: cover;
}
#right{
width: 100px;
height: 100%;
display: block;
float: left;
background: #000000;
}
HTML
<body>
<div class="center">
<div id="left">
<!-- Header -->
<!-- END Header -->
</div>
<!-- Nav -->
<div id="nav">
</div>
<!-- END Nav -->
<div id="middle">
</div>
<div id="right">
</div>
<!-- Footer -->
<!-- END Footer -->
</div>
</body>
600
Just set the viewBox on your <svg> , and set one of height or width to auto . The browser will adjust it so that the overall aspect ratio matches the viewBox .
❓ 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.
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.
Since SVG isn't an image and thus can be drawn (rendered) at any pixel size, the browser doesn't inherently associate a width or height unless you explicitly give it one; nor will it be able to resize the SVG even if the parent container changes size.
Found a solution to my problem
using
preserveAspectRatio="none"
In the svg file
like so:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
The sizes are removed from the svg completely. Dont remove the viewBox or enableBackground properties - those are important.
Css like so:
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: 100% 100%;
}
* Here is the result *
Large window
Small window
160
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