Shrinking SVG to size

Question

I've tried a bunch of different things, but can't figure out how to get this SVG twitter icon to shrink to 24x24 when it's wrapped in a link. I've tried viewbox, tried setting setting width/height, but can't seem to figure it out. In chrome, the below code produces a 24x24 container but the SVG itself is 400x400 so I only see the top left corner. Seems like I'm missing something obvious, but any help would be appreciated.

<a class="twitter-share-button" href="https://twitter.com/intent/tweet">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             width="24px" height="24px" viewBox="0 0 24 24">
                        <style type="text/css">
                            .st0{fill:#1DA1F2;}
                            .st1{fill:#FFFFFF;}
                        </style>
                        <g id="Dark_Blue">
                            <path class="st0" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300
                                C400,377.6,377.6,400,350,400z"/>
                        </g>
                        <g id="Logo__x2014__FIXED">
                            <path class="st1" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6
                                c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2
                                c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8
                                c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8
                                c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7
                                C97.7,293.1,124.7,301.6,153.6,301.6"/>
                        </g>
                    </svg>
                </a>

Answer 1

The viewport should be the size of the original content (400). Since you are using a small viewport (24), the image only shows a portion of the entire svg. Make the viewport 400 and then use height and width to get the size in which the svg will be presented.

Note: Also you should remove the any px from the height and width.

You this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="24" height="24" viewBox="0 0 400 400">

Answer 2

SVG is all about the viewBox, this SVG should have a 400 x 400 viewbox

<style>
    svg {
    width: 80px;
    height: 80px;
    background: lightcoral
</style>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="#1da1f2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300C400,377.6,377.6,400,350,400z"/>
        <path fill="white" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7     C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <path fill="#1da1f2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300C400,377.6,377.6,400,350,400z"/>
        <path fill="white" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7     C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>

Or optimized

<style>
  svg {
    width:80px;
    height:80px;
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       <rect fill="#1da1f2" width='100%' height='100%' rx="15%"/>
       <path fill="white" d="M39 76c24 0 37-20 37-37c0-1 0-1 0-2c3-2 5-4 7-7
c-2 1-5 2-8 2c3-2 5-4 6-7c-3 2-5 3-8 3c-2-3-6-4-9-4c-7 0-13 6-13 13c0 1 0 2 0 3
c-11-1-20-6-27-14c-1 2-2 4-2 7c0 5 2 9 6 11c-2 0-4-1-6-2
c0 0 0 0 0 0c0 6 5 12 10 13c-1 0-2 1-4 1c-1 0-2 0-3 0c2 5 7 9 12 9
c-5 4-10 6-16 6c-1 0-2 0-3 0C25 73 31 76 39 76"/>
    </svg>

Answer 3

Simple solution

.twitter-share-button >svg{
  height:24px;
  width:24px;
}