Question 45299 in Html Question posted in
Some basic documentation can be found here.

How to resize a svg – Html

I want to reduce the size of a svg. I tried reducing the height and width attributes and that helped, but the size of the image is still too big and when I try to reduce more, it ends up being cut instead of reduced.

So, more specifically, if I have a svg like this one:

<svg height="15" width="28" fill="#D0D4D9" fill-rule="evenodd">
  <path d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"></path>
  <path d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"></path>
</svg>

how can I resize it? Is there maybe an online page when we can do that or a general rule for this?

Tags:

2

Answers


  1. 0

    Change the height from 15 to auto

    <svg
    height="auto"
    width="28"
    fill="#D0D4D9"
    fill-rule="evenodd"
>
    <path
        d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"
    ></path>
    <path
        d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"
    ></path>
</svg>
    Login or Signup to reply.
  2. 0

    SVG elements have no actual size, they are made up of vectors to precisely be displayed in any size.
    The first problem with your SVG code is to have omitted the viewbox attribute.
    You can calculate its values using the JS method: SVGGraphicsElement.getBBox().
    In your case your viewBox is: viewBox="2 4 20 16"

    Then simply change css values of width and height, according to the viewbox props (20 / 16).

    this will be :

    const mySVG = document.querySelector('#my-svg');

function toggleSize()
  {
  mySVG.classList.toggle('sz200');
  }
    svg {
  width      : 100px;
  height     :  80px;
  margin     :  20px;
  background : blue;
  fill       : #D0D4D9;
  fill-rule  : evenodd;
  }
.sz200 {
  width      : 200px;
  height     : 160px;
  }
    <button onclick="toggleSize()">toggle size: (100-80) | (200-160)</button>
  <br>
 
<svg id="my-svg" viewBox="2 4 20 16" >
  <path d="
    M 12 18 c -4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 
    3.973 7.998 6 0 1.74-3.462 6-7.998 6 m 0-14 C 6.48 4 2 8.841 2 12 
    c 0 3.086 4.576 8 10 8 5.423 0 10 -4.914 10-8 0 -3.159 -4.48 -8 -10 -8" />
  <path d="
    M 11.977 13.984 c -1.103 0-2-.897-2-2 s .897-2 2-2 c 1.104 0 2 .897 2 2 
    s -.896 2-2 2 m 0-6 c -2.206 0-4 1.794-4 4 s 1.794 4 4 4 c 2.207 0 4-1.794 
    4-4 s -1.793-4-4-4" />
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search