Question

93

How can I resize an SVG?

rated 0 times [ 94] [ 1] / answers: 1 / hits: 22680 / 12 Years ago, thu, march 1, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deving

Add To Favorites

Follow

Total Points: 26

Total Questions: 94

Total Answers: 103

Location: Serbia

Member since Tue, Jul 26, 2022

2 Years ago

answered 12 Years ago devinjadong · Accepted Answer

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.