Почему мои SVG-иконки обрезаны при использовании grunt svg sprite?

Question

Я использую модуль хрюкать-SVG-спрайтов (https://www.npmjs.com/package/grunt-svg-sprite), чтобы создать спрайт с режимом просмотра и режимом символа, как показано ниже:

svg_sprite: { 
     svg_icons: { 
      expand: true, 
      cwd: 'src/app/assets/artwork/svgs', 
      src: ['**/*.svg'], 
      dest: 'src/app/assets/artwork', 


      options: { 

       shape: { 
        spacing: { // Spacing related options 
         padding: 1, // Padding around all shapes 
         box: 'content' // Padding strategy (similar to CSS `box-sizing`) 
        }, 

       }, 

       mode: { 


        view: { // Activate the «view» mode 



         bust: false, 
         render: { 
          scss: false // Activate Sass output (with default options) 
         }, 
         dest: 'svgs-view', 
         prefix: 'svg-view-id', 
         sprite: 'svg-views', 
         example: false, 


        }, 

        symbol: { 
         prefix: 'shape', 
         dest: 'inline-svgs', 
         sprite: 'cw-svg-sprites.svg', 
         inline: false, 
         render: { 
          less: false 

         }, 
         bust: false, 
         example: true 

        } 


       } 

      } 
     } 
    }, 

Это создает файл под названием SVG SVG-views.svg, как и ожидалось. Когда я пытаюсь отобразить SVG в моей странице с помощью следующего CSS/HTML:

HTML:

<div class="registration-icon-email"></div> 

CSS:

.registration-icon-email { 
    background-image: url('images/svg-views.svg#cw_email_no_bg_32x32'); 
    background-size:contain; 
    background-repeat:no-repeat; 
    width:2rem; 
    height:2rem; 
} 

некоторые иконки появляются обрезается в то время как некоторые иконки содержат части другого иконки:

Когда я просматриваю т он генерируется SVG спрайт в Inkscape, файл SVG выходит за пределы холста/холсту (прямоугольник на заднем плане монтажной области/холст в Inkscape):

Любые идеи относительно того, что может быть причиной этого? Любая помощь будет оценена по достоинству.

Вот SVG спрайт, который генерируется хрюкать-SVG-спрайта:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<svg width="67" height="45" viewBox="0 0 67 45" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <view id="cw_email_no_bg_32x32" viewBox="0 0 66.1 44.86" /> 
    <svg viewBox="-1 -1 66.1 44.86" width="66.1" height="44.86"> 
     <path fill="#fff" d="M16.082 20.274h.015c.483 0 .962-.14 1.354-.396l.1-.067c.02-.017.05-.02.072-.045l1.218-1.01 29.147-24.05c-.057-.084-.16-.14-.27-.14h-63.43c-.076 0-.15.026-.208.073l30.49 25.136c.387.32.935.5 1.512.5zM-15.922-5.36l-.13 42.387L5.792 15.98-15.92-5.36zm42.155 21.462L48.05 37.04l-.063-42.333-21.754 21.395zm-6.937 5.72c-.873.712-2.01 1.106-3.205 1.106-1.197 0-2.334-.384-3.2-1.104l-5.005-4.122-23.934 19.325v.063c0 .183.152.34.342.34h63.423c.187 0 .336-.157.336-.34v-.056l-23.91-19.21-4.844 3.997z" /> 
    </svg> 
</svg> 

Answer 1

Я не думаю, что пехотинец-SVG-спрайт делает ничего особенно фантазии с вашими данными SVG. Скорее всего, это просто копирование прямо из SVG-файлов в src/app/assets/artwork/svgs.

Это то, что значок почты выглядит (скопировать и вставить из данных спрайта вы предоставили, с цвет изменен на черный):

<svg viewBox="-1 -1 66.1 44.86" width="66.1" height="44.86"> 
 
    <path fill="#000" d="M16.082 20.274h.015c.483 0 .962-.14 1.354-.396l.1-.067c.02-.017.05 
 
    -.02.072-.045l1.218-1.01 29.147-24.05c-.057-.084-.16-.14-.27-.14h-63.43c-.076 0-.15 
 
    .026-.208.073l30.49 25.136c.387.32.935.5 1.512.5zM-15.922-5.36l-.13 42.387L5.792 
 
    15.98-15.92-5.36zm42.155 21.462L48.05 37.04l-.063-42.333-21.754 21.395zm-6.937 5.72 
 
    c-.873.712-2.01 1.106-3.205 1.106-1.197 0-2.334-.384-3.2-1.104l-5.005-4.122-23.934 
 
    19.325v.063c0 .183.152.34.342.34h63.423c.187 0 .336-.157.336-.34v-.056l-23.91-19.21 
 
    -4.844 3.997z" /> 
 
</svg>

Я думаю, вам просто нужно просмотрите необработанные данные SVG и убедитесь, что все координаты соответствуют видимому диапазону (0≤x≤66, 0≤y≤45).