SVG does not resize

Question

SVG does not resize

Navigation

#1 by (3 votes)

3

I do not have much experience with SVG, and I find it very confusing how to work with these images, I need to leave this image with the size 35x35 px.

I've exported the code in the illustrator of a SVG image of 512x512px, I want to work with it responsively, but I can not manipulate the size of it 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>

html5 css svg

asked by anonymous 25.07.2015 / 00:56

1 answer

Hide part of a text with javascript How to describe the database of a multi-person chat

score 3 · Accepted Answer

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

After that, determine a% cos of% relative to the image in your case viewBox .

This is enough to ensure that it has the maximum size of where it is, just set it to viewbox="0 0 512 512" or CSS at most (or 100%). So the image will get 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 this measure or whatever you want.

After this 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>