Problem with background in svg

Question

Problem with background in svg

Navigation

#1 by (0 votes)

2

I'm studying a bit about svg and found the giant forms incredible on the websites, however I'm having a hard time reproducing correctly. I created a form of size 693x768 that will cut a page, but I can not make it always fill 100% in height. Here pictures to show exactly what is happening: Thisishowthesitenormallyopensona1366x768monitor,butnotewhathappenswhenIchangethemonitorsizeto1024x768: My CSS code is basically this:

#bloco {
  background: url("../imgs/form.svg") no-repeat right;
  background-size: 50%;
}

And .svg is this:

<?xml version="1.0" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="693.000000pt" height="768.000000pt" viewBox="0 0 693.000000 768.000000" preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,768.000000) scale(0.100000,-0.100000)" fill="#333" stroke="none">
    <path d="M3562 7638 c-36 -79 -3534 -7583 -3548 -7610 l-15 -28 3466 0 3465 0 0 3840 0 3840 -1675 0 -1674 0 -19 -42z"/>
  </g>
</svg>

Summarizing

How do I make the background take full height without resizing in this way?

Note

I made the image first in Photoshop and used a tool to convert it to .svg . I suspect that if the code .svg is fixed maybe the sum error.
The background is only resized when the width decreases and the height of the window does not follow (as if it were a mathematical reason).

html css svg

asked by anonymous 04.04.2015 / 00:29

1 answer

Game development - OpenGl, Directx cURL, how to change the country of origin

score 0 · Accepted Answer

I did it! The problem was in both CSS and SVG. I made another image by the size of 1366x768 and converted it into SVG using this online tool , all same as before (this new image is the size of the screen with the image I mentioned in the question, that cut). When I applied the image and was testing it, I realized that what was happening was that the background (SVG) was resizing normally, but when it was very small to the point of leaving the 1366x768 ratio, it rescaled proportionally, maintaining the proportion, also decreasing its height. What I did to fix the problem was this:

.svg

First edit the .svg so that its width and height take 100% of the element:

<svg width="100%" height="100%">

And then specify the viewbox , which would be how the image should behave in a previously stipulated size (like a normal size, I do not know / can explain). In my case 1366x768, since the image has this size. Now comes the part that does what I needed, change / add the preserveAspectRatio attribute to the value of none . This causes the image to be resized freely without maintaining the initial aspect ratio. So having my tag that way (I've omitted some tags here in this example):

<svg width="100%" height="100%" viewBox="0 0 1366 2304" preserveAspectRatio="none">

CSS

I also edited in CSS, I first defined that element would be 100% height and width (it takes the whole window, if you have not noticed by the size of the image). After that I called the background, I left it for him if not repeat, normal thing:

#elemento {
  background: url("elemento.svg") no-repeat;
  height:100%;
  width: 100%;
}

The image is now automatically adjusted! The CSS code is not ready yet, I've seen tests that Firefox modifies the background-size property to auto auto , leaving my image not positioned correctly. To solve I simply changed the value to 100% 100% , so svg would cover all the space needed. Final CSS:

#elemento {
  background: url("elemento.svg") no-repeat;
  background-size:100% 100%; /* Firefox */
  height:100%;
  width: 100%;
}

References

link
link