Adjusting the width and height of an SVG without specifying a width or height

HTML & CSS
1

What it reads:

Play svg:
11.8666 x 14.0333

Play path
11.8333 x 14

Pause path
8.13336 x 13.8

Pause svg
8.26666 x 14

What they should be:

Play svg should be:
14 x 14

Play path should be:
11.8667 x 14.0333

Pause svg should be:
14 x 14

Pause Path should be:
8.26666 x 14

<svg class="play" width="11.8667" height="14.0333" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>

<svg class="pause " width="8.26666" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>

Spotify does it without specifying a width or height, but I have no idea how that is accomplished.

Is that even possible to do?

How do you get something big to look tiny?
Without giving a width or height?

Spotify’s SVG Code
https://i.imgur.com/jvISOKl.png

https://i.imgur.com/N97u1YL.png


<svg class="play" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>

<svg class="pause" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>
2

The “S” in SVG stands for Scalable.

Read up on how to use viewport.

The basic idea is to create a fixed SVG viewport with X,Y positions and Width and Height. The contents of the SVG will then Scale to fill the containing folder.

3

Nothing is adjusted in their svg code, I copied the same thing.

Their viewport, I copied the same thing.

How do they scale it down?

Without specifying a width or height.

4

Try this:

  1. creating two divs with fixed width and height,
  2. second div is twice the size of the first div.
  3. insert Spotify’s SVG inside both divs.
  4. spot the difference :slight_smile:

If you still do not understand then try reading up on SVG Viewport.

5

One is specifying a height and width, and one isn’t.
Those are the differences.

Fixed height and width:

No height or width given:

6

Did you try creating the two different size Divs and inserting a SVG without width and height?

1 Like
8

Here:


<div class="wrapa">

  <svg class="playa" width="11.8667" height="14.0333" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>


  <svg class="pausea " width="8.26666" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>

</div>

<div class="wrapb">
  <svg class="playb" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>


  <svg class="pauseb" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>

</div>
9

No.

div style="width:200px; height:150px;">
    <svg class="play" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>
</div>

div style="width:400px; height:350px;">
    <svg class="play" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>
</div>

Beware: I have not tried the above script.

10

I fixed #8


.wrapa{
  
}

.wrapb{
  
}

.playa {
  fill: red;
  background: black;
}

.pausea {
  fill: blue;
  background: black;
}



.playb {
  fill: red;
  background: black;
}

.pauseb {
  fill: blue;
  background: black;
}




<div class="wrapa">

  <svg class="playa" width="11.8667" height="14.0333" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>


  <svg class="pausea " width="8.26666" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>

</div>

<div class="wrapb">
  <svg class="playb" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>


  <svg class="pauseb" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>

</div>
11

Please experiment by giving the Div Classes a width and height otherwise the Div will default to full width and a height containing the scaled SVG.

Also ensure there is only one SVG inside a Div.

If you do not understand then perhaps another user could try explaining, perhaps with examples.

1 Like
12

Their 1em isn’t the same as this 1em

How the browser calculates their svg size is off I think.

It also depends upon what coding program it’s put into.

Thank you for your help.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.