Problem with svg background

Asked

Viewed 515 times

2

I’m studying a little bit about svg And I found the giant shapes on the sites amazing, but I’m having a really hard time reproducing correctly. I created a 693x768 shape that will cut a page, but I can’t make it always 100% tall. Here images to show exactly what is happening: Imagem com 1366x768 This is how the site is normally open on a 1366x768 monitor, but note what happens when I change the monitor size to 1024x768: Imagem com 1110x768 My CSS code is basically this:

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

And the .svg that’s the one:

<?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>

In short

How do I make the background take all the height without being resized in this way?

Observing

  • 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 mistake goes away.
  • 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

1 answer

0


I did it! The problem was both in CSS and SVG. I made another image in Photoshop with the size of 1366x768 and converted it to SVG using this online tool, all the same as before (this new image is the screen size with the image I mentioned in the question, that cut). When I applied the image and I was testing, I realized that what was happening was that the background (SVG) was resizing normally, but when it was too small to go out of the 1366x768 ratio, it resized proportionally, maintaining the ratio, thus 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 don’t know/I can explain). In my case 1366x768, since the image has this size. Now comes the part that does what I needed, change/add the attribute preserveAspectRatio with the value of none. This allows the image to be resized freely without maintaining the initial ratio. So having my tag like this (I omitted some tags here in this example):

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

CSS

I also edited the CSS, first I set the element to be 100% high and wide (it takes the whole window, if you haven’t noticed by the image size). After that I called the background, I left for it not to repeat, normal thing:

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

With this the image already adjusts automatically! CSS code is not ready, doing some tests I saw that Firefox modifies the property background-size for auto auto, leaving my image not positioned correctly. To resolve I simply changed the value to 100% 100%, so the 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

Browser other questions tagged html css svg

You are not signed in. Login or sign up in order to post.