11

I have code like this:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

I cut out most of the content and replaced it with ...

This presently creates a 32 by 32 icon. What I would like to know is can I use this code to create a 100 by 100 icon? I tried changing the width and height but it made no difference.

Samantha J T Star
  • 30,952
  • 84
  • 245
  • 427

3 Answers3

19

The width and height attributes on the SVG element only define the size of the drawing area. They don't scale the contents to fit that area. For that, you need to also use the viewBox attribute, like so:

<svg viewBox="0 0 32 32" height="100" width="100" ...>

The viewBox attribute establishes the coordinate system that is used for all the child elements of the SVG. You can then use the width and height to stretch this coordinate system to the desired size.

You can use the preserveAspectRatio attribute to decide how to scale if the aspect ratios don't match.

mercator
  • 28,290
  • 8
  • 63
  • 72
  • When the svg width is bigger than the one of the viewpoint, this doesn't seem to work. I have better results with – widged Jan 14 '14 at 01:34
  • @widged, there shouldn't be any difference between `style` vs. `width` and `height`. So the only difference I can see between your SVG and mine is that you want to scale a large SVG _down_ to icon size, while the question asked about scaling _up_ an icon-sized SVG. The method is still the same. – mercator Jan 14 '14 at 12:55
  • I had some odd behaviors yesterday that I cannot reproduce today. Possibly some typo involved. Simple demo at http://bl.ocks.org/widged/8428059 shows that downsizing indeed works the same with size attribute or style. – widged Jan 14 '14 at 23:55
  • If you want to scale the SVG proportionally within the containing element you can use percentages in the width and height attributes. This is useful for responsive layouts. For example: – Caspar Mar 05 '14 at 04:12
0

It worked for me by modifying the svg style

let svgDom = document.getElementsByTagName("svg")[0];
let newWidth=100,newHeight=90;
svgDom.style.width = newWidth+'px';
svgDom.style.height = newHeight+'px';
Ronald Coarite
  • 4,460
  • 27
  • 31
0

just throw a transform="scale(2)" and it will do the trick, ( React )

<svg
  width={56}
  height={56}
  transform="scale(2)"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  {...props}
>
  <circle cx={28} cy={28} r={24} fill="#F88423" />
  <path
    fillRule="evenodd"
    clipRule="evenodd"
    d="..."fill="#131903"
  />
</svg>
jmirab
  • 1