CODEWITHSUNDEEP
htmlcsssvg
Wally
Wally

Reputation: 795

SVG path is bigger than the svg container

So I have a super odd case (super odd to me at least).

The SVG path is not being contained within the SVG element. I have tried a number of things to get this to work, none of which are working and now suspect that I have missed something.

I have a JS fiddle: https://jsfiddle.net/67w3hays/

As you can see - the youtube icon is bigger than the container and wont strink to fit into the container

CODE:

<a href="" class="social-link" target="_blank" rel="noopener noreferrer">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="#C9DCFA" xmlns="http://www.w3.org/2000/svg">

            <path class="youtubeSVG" d="M35.705 0S13.354 0 7.765 1.47c-3 .824-5.47 3.295-6.294 6.354C0 13.412 0 25 0 25s0 11.646 1.47 17.176a8.95 8.95 0 006.296 6.295C13.413 50 35.706 50 35.706 50s22.352 0 27.94-1.47a8.95 8.95 0 006.295-6.296c1.471-5.588 1.471-17.175 1.471-17.175s.059-11.647-1.47-17.235a8.95 8.95 0 00-6.296-6.295C58.058 0 35.706 0 35.706 0zm-7.117 14.295L47.176 25 28.588 35.705v-21.41z"/>
          
        </svg>
      </a>

Desired result from an answer:

I would like this SVG path to fit into the 18 width & height container (or at a aspect ration of near the 18px height).

enter image description here

Upvotes: 2

Views: 3443

Answers (1)

Niloct
Niloct

Reputation: 10015

https://jsfiddle.net/hdqL3a4z/

Get rid of the width and height on svg tag, leave only the viewport:

<svg viewBox="0 0 71.41 50" fill="#C9DCFA" xmlns="http://www.w3.org/2000/svg">

And set the scaling on CSS:

a > svg {
  width: 18px;
  height: auto;
}

Upvotes: 6

Related Questions