SVG does not adjust size

Asked

Viewed 5,543 times

3

I don’t have much experience with SVG, and I find very confusing the way to work with these images, I need to leave this image with the size of 35x35 px.

I exported the code in the Illustrator of a 512x512px SVG image, I want to work with it responsibly, but I can’t manipulate its size by CSS at all.

    <svg width="35" height="35" viewbox="0 0 35 35">

        <path d="M256,0C114.609,0,0,114.609,0,256s114.609,256,256,256s256-114.609,256-256S397.391,0,256,0z M256,472
c-119.297,0-216-96.703-216-216S136.703,40,256,40s216,96.703,216,216S375.297,472,256,472z M325.906,306.188c-16-2.734-37.906-18.25-37.906-24.984v-17.016c0-6.344,8.594-18.219,12.25-29.156
c0.344-1.031,2.547,0.156,4.688-2.453c4.031-4.969,4.625-12.516,5.547-15.953c1.469-5.406-5.094-5.625-5.094-5.625
s4.891-28.375,0.547-46.297c-5.875-24.406-37.5-36.703-49.875-36.703c-12.391,0-43.969,12.297-49.875,36.703
c-4.344,17.922,0.656,46.297,0.656,46.297s-6.328,0.219-4.875,5.625c0.938,3.438,1.969,10.984,6.031,15.953
c2.125,2.609,3.406,1.422,3.75,2.453c3.656,10.938,12.25,22.812,12.25,29.156v17.016c0,6.734-21.922,22.25-37.922,24.984
c-20.547,3.5-30.703,17.703-25.891,53.125c2.406,17.688,49.094,25.297,95.344,24.641c46.25,0.656,93.641-6.953,96.047-24.641
C356.406,323.891,346.469,309.688,325.906,306.188z"/>

    </svg>
css html5 svg

  • For most cases, you need to set the parameter "preserveAspectRatio". Check this topic: http://answall.com/questions/75877/tornar-svg-responsive

  • preserverveAspectRatio has no effect without viewBox... and, again, liquid is not responsive... Another point, "preserveAspectRatio", even without specifying, has the default value "xMidYMid Meet". Hence, the "false" impression you don’t need.

1 answer

5


First, remove the width (width) and height (height) of the element SVG.

After that determine a viewBox relative to image in your case viewbox="0 0 512 512".

With this suffice to ensure that it has the maximum size of where it is, simply set on CSS the width as maximum (or 100%). Thus, the image will acquire the maximum size from where you add.

As in your case you want to apply a specific size (35px), just set the height and width with that measure or any other you want.

After that your code will look like this:

svg {
  width: 35px;
  height: 35px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
  <path d="M256,0C114.609,0,0,114.609,0,256s114.609,256,256,256s256-114.609,256-256S397.391,0,256,0z M256,472
c-119.297,0-216-96.703-216-216S136.703,40,256,40s216,96.703,216,216S375.297,472,256,472z M325.906,306.188c-16-2.734-37.906-18.25-37.906-24.984v-17.016c0-6.344,8.594-18.219,12.25-29.156
c0.344-1.031,2.547,0.156,4.688-2.453c4.031-4.969,4.625-12.516,5.547-15.953c1.469-5.406-5.094-5.625-5.094-5.625
s4.891-28.375,0.547-46.297c-5.875-24.406-37.5-36.703-49.875-36.703c-12.391,0-43.969,12.297-49.875,36.703
c-4.344,17.922,0.656,46.297,0.656,46.297s-6.328,0.219-4.875,5.625c0.938,3.438,1.969,10.984,6.031,15.953
c2.125,2.609,3.406,1.422,3.75,2.453c3.656,10.938,12.25,22.812,12.25,29.156v17.016c0,6.734-21.922,22.25-37.922,24.984
c-20.547,3.5-30.703,17.703-25.891,53.125c2.406,17.688,49.094,25.297,95.344,24.641c46.25,0.656,93.641-6.953,96.047-24.641
C356.406,323.891,346.469,309.688,325.906,306.188z" />
</svg>

  • 2

    this technique is not responsive, is "fluid" or "liquid"..

  • in the question says "I want to work with her responsibly"... understood?

  • This doesn’t mean "responsive".. Just understand that responsive is different than fluid/fluid...

  • thanks @Natan solved my problem :D

  • Guys, this solves my problem, it wasn’t exactly a responsive technique but solved my question, thank you all so much for the help.

Browser other questions tagged css html5 svg

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