CODEWITHSUNDEEP
javascripthtmlsvg
Samantha J T Star
Samantha J T Star

Reputation: 32838

How can I resize an SVG?

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.

Upvotes: 12

Views: 27656

Answers (3)

jmirab
jmirab

Reputation: 11

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>

Upvotes: 1

Ronald Coarite
Ronald Coarite

Reputation: 4746

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';

Upvotes: 0

mercator
mercator

Reputation: 28656

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.

Upvotes: 19

Related Questions