Question

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.

Answer 1

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.