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

by

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

  • You would need a different viewBox value for the svg element. Please try viewBox="109 195 510 330"

    – 




  • Can you explain why you are using those numbers and how you got them?

    – 

  • It’s the bounding box of the group wrapping both path elements. You can get the bounding box of an svg element by using the getBBox() method. In order to understand what happens put a border around the svg element before and after changing the viewBox value. Also do not forget to change the enable-background to the same value or delete it altogether.

    – 

  • I updated the question, it enalrged right, but position is now off. Here is the full URL cdn.exposureevents.com/content/images/site/icons/ballertv.svg

    – 




  • Shouldnt I do 0 0 510 330?

    – 

Leave a Comment