SVG not filling out like fontawesome icons like it has padding or whitespace

62 views Asked by At

Can anyone tell me why this custom SVG on the right won't fill the height like the icon on the right does? The SVG does not have any space on the top and right when opened in Illustrator.

enter image description here

Current SVG markup

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 720 720" enable-background="new 0 0 720 720" xml:space="preserve">
    <g>
        <path d="M372.7,463.4c7.7-12.1,13-24.8,16-38.3c3.1-14.9,2.9-29.2-0.4-42.7c-3.4-13.5-9.3-25.2-17.8-34.9
            c8-7.5,14.7-16.1,20.2-25.6s9.5-19.9,12-30.9c2.8-13.3,2.9-25.8,0.3-37.4s-7.3-21.7-14.1-30.4c-6.8-8.7-15.5-15.5-25.9-20.4
            c-10.5-5-22.3-7.4-35.3-7.4H187.1c-3.1,0-5.7,0.9-7.8,2.8c-2.1,1.9-3.5,4.3-4.2,7.4l-65.7,309.7c-0.7,3.3-0.4,5.7,1.1,7.2
            c1.5,1.6,3.7,2.3,6.7,2.3h153.7c13,0,26-2.7,38.8-8c12.9-5.3,24.7-12.5,35.4-21.6S365,475.4,372.7,463.4z M301.3,421.8
            c-1,4.7-2.9,9.3-5.5,13.8c-2.7,4.4-5.9,8.4-9.7,11.9c-3.8,3.5-8,6.2-12.5,8.3c-4.6,2.1-9.3,3.1-14.2,3.1h-51.9l15.8-74.1h51.9
            c4.9,0,9.2,1.1,12.9,3.3c3.7,2.2,6.7,5.1,9,8.5c2.3,3.5,3.8,7.4,4.5,11.9C302.2,412.9,302.2,417.3,301.3,421.8z M317,292.9
            c-1,4.7-2.8,9.1-5.3,13s-5.6,7.3-9.2,10.2c-3.6,2.9-7.7,5.1-12.2,6.7s-9.3,2.3-14.3,2.3h-40.2l13.5-64.3h40.8c4.9,0,9.2,0.9,13,2.6
            s6.8,4,9.2,7c2.4,3,4,6.4,4.8,10.2C317.9,284.3,317.9,288.5,317,292.9z"/>
        <path d="M607.4,366.1H402c1.4,3.9,2.7,7.8,3.7,11.9c4.1,16.2,4.3,33.2,0.6,50.8v0.2c-3.4,15.4-9.6,30.3-18.4,44.1
            c-8.6,13.5-19.1,25.6-31.2,35.8c-7.1,6-14.7,11.3-22.6,15.9h240.3c6.6,0,13.3-6,14.8-13.4l27.4-131.9
            C618.2,372.1,614,366.1,607.4,366.1z M479.6,425.4l-2.5,11.9c-0.3,1.3-0.9,2.4-1.9,3.3s-2.2,1.4-3.5,1.4H461l-11,51.3
            c-0.6,2.6-2.2,3.9-5,3.9h-18c-2.7,0-3.8-1.3-3.2-3.9l11-51.3H424c-3,0-4.2-1.5-3.5-4.6l2.5-11.9c0.6-2.9,2.4-4.4,5.4-4.4h10.7
            l4.1-19.3c0.3-1,0.8-1.9,1.6-2.7c0.8-0.8,1.9-1.3,3.3-1.6l19.5-3c1,0,1.8,0.3,2.2,1c0.5,0.7,0.6,1.6,0.3,2.7l-4.9,22.8h10.7
            c1.3,0,2.2,0.4,2.9,1.1C479.7,422.8,479.9,423.9,479.6,425.4z M572.8,425.3c-0.1,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.1,0.4-0.2,0.6
            l-40.1,64.7c-0.4,0.6-0.7,1.3-1.2,1.9c-0.4,0.7-0.9,1.3-1.4,1.9s-1.1,1.1-1.8,1.5s-1.4,0.6-2.2,0.6h-18.3c-1,0-1.7-0.1-2.1-0.4
            c-0.5-0.3-0.8-0.7-1.1-1.2c-0.3-0.7-0.5-1.4-0.7-2.1s-0.4-1.5-0.5-2.2c-1.9-10.7-4-21.4-6.1-32.1s-4.2-21.4-6.1-32.1
            c-0.1,0-0.1-0.3-0.1-0.7c0-0.4,0-0.8,0.2-1.2c0.4-1.8,1.7-2.7,3.9-2.7h21.8c1.2,0,2.1,0.3,2.7,0.9c0.6,0.6,1,1.4,1.1,2.5
            c0.2,3,0.5,6.4,0.8,10s0.6,7.2,1,10.8c0.3,3.6,0.6,6.9,0.8,10c0.3,3.1,0.4,5.7,0.5,7.6l19.5-38.6c0.7-1.2,1.5-2,2.3-2.5
            s1.8-0.8,3-0.8h21.4c1.4,0,2.3,0.3,2.7,0.8C572.9,423.7,573,424.4,572.8,425.3z"/>
    </g>
    </svg>

adding viewBox="109 195 510 330" and enabled background got me this now. Its off in position but size looks right.

enter image description here

1

There are 1 answers

0
Mike Flynn On

I was able to get it work with downloading a similar size viewbox SVG from font awesome. Opened it in illustrator, removed the current FA icon and pasted this one in and made sure it worked to FA standards and it worked!

enter image description here

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M332.2 386.7c9.7-15.2 16.4-31.3 20.2-48.3c3.9-18.8 3.7-36.8-.5-53.8c-4.3-17-11.7-31.8-22.4-44c10.1-9.5 18.5-20.3 25.5-32.3c6.9-12 12-25.1 15.1-38.9c3.5-16.8 3.7-32.5 .4-47.1s-9.2-27.3-17.8-38.3s-19.5-19.5-32.6-25.7C306.8 52 291.9 49 275.5 49H98.4c-3.9 0-7.2 1.1-9.8 3.5s-4.4 5.4-5.3 9.3L.5 452.1c-.9 4.2-.5 7.2 1.4 9.1c1.9 2 4.7 2.9 8.4 2.9H204c16.4 0 32.8-3.4 48.9-10.1c16.3-6.7 31.1-15.8 44.6-27.2c13.4-11.5 25-25 34.7-40.1zm-89.9-52.4c-1.3 5.9-3.7 11.7-6.9 17.4c-3.4 5.5-7.4 10.6-12.2 15s-10.1 7.8-15.8 10.5c-5.8 2.6-11.7 3.9-17.9 3.9h-65.4l19.9-93.4h65.4c6.2 0 11.6 1.4 16.3 4.2s8.4 6.4 11.3 10.7c2.9 4.4 4.8 9.3 5.7 15c.7 5.5 .7 11-.4 16.7zM262 171.9c-1.3 5.9-3.5 11.5-6.7 16.4s-7.1 9.2-11.6 12.9s-9.7 6.4-15.4 8.4s-11.7 2.9-18 2.9h-50.7l17-81H228c6.2 0 11.6 1.1 16.4 3.3c4.8 2.1 8.6 5 11.6 8.8s5 8.1 6 12.9c1.2 4.5 1.2 9.8 0 15.4zm366 92.2H369.2c1.8 4.9 3.4 9.8 4.7 15c5.2 20.4 5.4 41.8 .8 64v.3c-4.3 19.4-12.1 38.2-23.2 55.6c-10.8 17-24.1 32.3-39.3 45.1c-8.9 7.6-18.5 14.2-28.5 20h302.8c8.3 0 16.8-7.6 18.6-16.9L639.6 281c2-9.3-3.3-16.9-11.6-16.9zM466.9 338.8l-3.2 15c-.4 1.6-1.1 3-2.4 4.2c-1.3 1.1-2.8 1.8-4.4 1.8h-13.5l-13.9 64.6c-.8 3.3-2.8 4.9-6.3 4.9h-22.7c-3.4 0-4.8-1.6-4-4.9l13.9-64.6h-13.6c-3.8 0-5.3-1.9-4.4-5.8l3.2-15c.8-3.7 3-5.5 6.8-5.5h13.5l5.2-24.3c.4-1.3 1-2.4 2-3.4s2.4-1.6 4.2-2l24.6-3.8c1.3 0 2.3 .4 2.8 1.3c.6 .9 .8 2 .4 3.4l-6.2 28.7h13.5c1.6 0 2.8 .5 3.7 1.4c1 .7 1.2 2.1 .8 4zm117.5-.1c-.1 .3-.1 .5-.3 .8c-.1 .3-.1 .5-.3 .8l-50.5 81.5c-.5 .8-.9 1.6-1.5 2.4c-.5 .9-1.1 1.6-1.8 2.4c-.6 .8-1.4 1.4-2.3 1.9s-1.8 .8-2.8 .8H502c-1.3 0-2.1-.1-2.6-.5c-.6-.4-1-.9-1.4-1.5c-.4-.9-.6-1.8-.9-2.6s-.5-1.9-.6-2.8c-2.4-13.5-5-27-7.7-40.4c-2.6-13.5-5.3-27-7.7-40.4c-.1 0-.1-.4-.1-.9s0-1 .3-1.5c.5-2.3 2.1-3.4 4.9-3.4h27.5c1.5 0 2.6 .4 3.4 1.1c.8 .8 1.3 1.8 1.4 3.2c.3 3.8 .6 8.1 1 12.6s.8 9.1 1.3 13.6c.4 4.5 .8 8.7 1 12.6c.4 3.9 .5 7.2 .6 9.6l24.6-48.6c.9-1.5 1.9-2.5 2.9-3.2c1-.6 2.3-1 3.8-1h27c1.8 0 2.9 .4 3.4 1c.4 .5 .5 1.4 .3 2.5z"/></svg>