Иконка Svg отображается только наполовину

Question

Итак, у меня есть навигационная панель, которая использует иконки SVG.Я попытался заменить значок, но не могу найти правильный размер / форму.

Это код SVG для значка, который работает:

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="62px"
     viewBox="0 0 32 62" enable-background="new 0 0 32 62" xml:space="preserve">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
    s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
     M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
    s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
    c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
    C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
    H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>

Вот какnavbar выглядит, если это поможет: navbar scrennshot

Я не уверен насчет размера, может быть, поэтому я ошибаюсь, однако я пробовал с 32x32p и 64x64p.Спасибо, любой ответ приветствуется

Вот фрагмент кода .css моих значков панели навигации: https://pastebin.com/7TqJU6yc. Вот мой код .js для анимации, если он имеет какое-либо отношение к нему: pastebin.com / jCcvEuA4 и, наконец, немного HTML, однако на самом деле он не имеет большого значения для значков: pastebin.com/RydBqfHB.Немного предыстории: значок установлен в качестве <li> фона.Вот почему я думал, что размер должен быть проблемой или самой иконой, однако это не так.

Также, вот небольшой скриншот с замененным значком, чтобы помочь понять проблему: imgur.com/a/LW7sdIZ (обратите внимание на значок home)

Answer 1

Для наглядности регулирования положения иконки относительно холста SVG можно применить стиль

style="border:1px solid red;"

Красная рамка вокруг иконок - это холст svg

Чтобы сделать иконки видимыми, я добавил fill="black"

   <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="32px" height="62px"
     viewBox="0 0 32 62"  style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
    s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
     M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
    s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
    c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
    C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
    H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>

Если вы хотите показать только один значок, вы должны указать width="32" height="32" viewBox="0 0 32 32"

   <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="32" height="32" viewBox="0 0 32 32"  style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
    s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
     M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
    s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
    c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
    C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
    H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>