Home > Software engineering >  How to scale SVG to exactly same height as adjacent SVG's
How to scale SVG to exactly same height as adjacent SVG's

Time：04-09

Here's a snipped I've made. It's a list of different web service's logos for e.g. a website. As you can see, the Twitter logo is not perfectly aligned compared to other logos:

body {
    background-color: white;
}

.list {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-right: 20%;
    padding-left: 20%;
}

.list-item {
    fill: palevioletred;
    transition: all 0.1s;
    transform-origin: center;
    width: 8vw;
    height: 8vw;
}

.list-item:hover {
    fill: hotpink;
    transform: scale(1.08); 
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <ul >
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 2133.0101 2133.5199"
          >
            <path
              d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
              transform="translate(-6745.44 -1116.75)"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463">
            <path
              d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
              transform="translate(-75 -99)"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 6999.9997 6999.9997"
          >
            <path
              d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
            ></path>
            <path
              d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
            ></path>
            <path
              d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
            <path
              d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 42.60677 41.555031"
          >
            <path
              d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
            ></path>
            <path
              d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
            ></path>
            <path
              d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
            ></path>
            <path
              d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
            ></path>
            <path
              d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
            ></path>
            <path
              d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
            ></path>
            <path
              d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
            ></path>
            <path
              d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
            ></path>
          </svg>
        </li>
      </ul>
    </div>
  </body>
</html>

When we add borders around the element, we can see that the issue is that the Twitter logo does not fit into a perfect square. It requires rectangular area to fit into and when it's squeezed inside a square it's scaled down to fit it. This causes it look like it's higher than the adjacent logos.

body {
    background-color: white;
}

.list {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-right: 20%;
    padding-left: 20%;
}

.list-item {
    border: 2px dashed;
    fill: palevioletred;
    transition: all 0.1s;
    transform-origin: center;
    width: 8vw;
    height: 8vw;
}

.list-item:hover {
    fill: hotpink;
    transform: scale(1.08); 
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <ul >
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 2133.0101 2133.5199"
          >
            <path
              d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
              transform="translate(-6745.44 -1116.75)"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463">
            <path
              d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
              transform="translate(-75 -99)"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 6999.9997 6999.9997"
          >
            <path
              d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
            ></path>
            <path
              d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
            ></path>
            <path
              d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
            <path
              d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 42.60677 41.555031"
          >
            <path
              d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
            ></path>
            <path
              d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
            ></path>
            <path
              d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
            ></path>
            <path
              d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
            ></path>
            <path
              d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
            ></path>
            <path
              d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
            ></path>
            <path
              d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
            ></path>
            <path
              d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
            ></path>
          </svg>
        </li>
      </ul>
    </div>
  </body>
</html>

Is there a way of scaling SVG's to exactly same height and take whatever space needed horizontally?

CodePudding user response：

Note that the parent container .list-item has an aspect ratio 1:1

width:8vw;
height:8vh;

And three icons besides the twitter icon also have an aspect ratio of 1:1 (width and height viewBox are equal) Therefore, these three icons evenly fill the parent container.
But the twitter icon has width greater than height - viewBox="0 0 61 49.998463"

Therefore, a free field is obtained according to the height of the container.
In the example below, the red border shows the bounds of the canvas svg. What will go beyond the bounds of the SVG canvas will be clipped. Therefore, it is useless to position icons by height with transform="translate()"

body {
    background-color: white;
}

.list {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-right: 20%;
    padding-left: 20%;
}

.list-item {
    border: 2px dashed;
    fill: palevioletred;
    transition: all 0.1s;
    transform-origin: center;
    width: 8vw;
    height: 8vw;
}

.list-item:hover {
    fill: hotpink;
    transform: scale(1.08); 
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <ul >
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 2133.0101 2133.5199"
          >
            <path
              d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
              transform="translate(-6745.44 -1116.75)"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463" style="border:1px solid red">
            <path id="path"
              d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
              transform="translate(-75 -99)"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 6999.9997 6999.9997"
          >
            <path
              d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
            ></path>
            <path
              d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
            ></path>
            <path
              d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
            <path
              d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 42.60677 41.555031"
          >
            <path
              d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
            ></path>
            <path
              d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
            ></path>
            <path
              d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
            ></path>
            <path
              d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
            ></path>
            <path
              d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
            ></path>
            <path
              d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
            ></path>
            <path
              d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
            ></path>
            <path
              d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
            ></path>
          </svg>
        </li>
      </ul>
    </div>
  </body>
</html>

Solution:

  • It is necessary to make aspect ratio 1:1 for the twitter icon by choosing the same width and height parameters equal to 61 viewBox="87 108 61 61"
  • To completely fill the entire parent container, add scaling - transform="scale(1.11)"

body {
    background-color: white;
}

.list {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-right: 20%;
    padding-left: 20%;
}

.list-item {
    border: 2px dashed;
    fill: palevioletred;
    transition: all 0.1s;
    transform-origin: center;
    width: 8vw;
    height: 8vw;
}

.list-item:hover {
    fill: hotpink;
    transform: scale(1.08); 
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <ul >
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 2133.0101 2133.5199"
          >
            <path
              d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
              transform="translate(-6745.44 -1116.75)"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="87 108 61 61" style="border:0px solid red">
            <path id="path"
              d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
              transform="scale(1.11)"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 6999.9997 6999.9997"
          >
            <path
              d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
            ></path>
            <path
              d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
            ></path>
            <path
              d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
            ></path>
          </svg>
        </li>
        <li >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
            <path
              d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
            ></path>
          </svg>
        </li>
        <li >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 42.60677 41.555031"
          >
            <path
              d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
            ></path>
            <path
              d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
            ></path>
            <path
              d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
            ></path>
            <path
              d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
            ></path>
            <path
              d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
            ></path>
            <path
              d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
            ></path>
            <path
              d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
            ></path>
            <path
              d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
            ></path>
          </svg>
        </li>
      </ul>
    </div>
  </body>
</html>

Page link：https//www.codepudding.com/Softwareengineering/365271.html

Prev:How to reverse the order of svg elements
Next:Query count of children, grandchildren of each grandfather by joining 3 SQL tables
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding