Sliced <g> in generated sprite

[imevro]

Hi, I have some svgs (exported from Sketch), which contain <g> element, but loader cuts it from generated sprite.

Examples:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="25px" viewBox="0 0 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.4 (15588) - http://www.bohemiancoding.com/sketch -->
    <title>Contacts</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Welcome" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Contact-(Requests)" sketch:type="MSArtboardGroup" transform="translate(-13.000000, -258.000000)" fill="#FAFAFA">
            <path d="M33.3522511,258 L18.2055175,258 C16.4814465,258 15.0787796,259.402667 15.0787796,261.126738 C15.0787796,261.308457 15.2259012,261.455579 15.4079439,261.455579 C15.5896633,261.455579 15.7367849,261.308457 15.7367849,261.126738 C15.7367849,259.765782 16.844562,258.658005 18.2055175,258.658005 L33.3522511,258.658005 C34.7132067,258.658005 35.8209837,259.765782 35.8209837,261.126738 L35.8209837,279.873262 C35.8209837,281.234218 34.7132067,282.341995 33.3522511,282.341995 L18.2055175,282.341995 C16.844562,282.341995 15.7367849,281.234218 15.7367849,279.873262 C15.7367849,279.691543 15.5896633,279.544098 15.4079439,279.544098 C15.2262245,279.544098 15.0787796,279.691219 15.0787796,279.873262 C15.0787796,281.597333 16.4814465,283 18.2055175,283 L33.3522511,283 C35.0763222,283 36.4789891,281.597333 36.4789891,279.873262 L36.4789891,261.126738 C36.4789891,259.402667 35.0763222,258 33.3522511,258 L33.3522511,258 Z M13.328841,264.131575 L17.4864001,264.131575 C17.6681196,264.131575 17.8152412,263.984454 17.8152412,263.802734 C17.8152412,263.621015 17.6681196,263.473893 17.4864001,263.473893 L13.328841,263.473893 C13.1471216,263.473893 13,263.621015 13,263.802734 C13,263.984454 13.1471216,264.131575 13.328841,264.131575 L13.328841,264.131575 Z M13.328841,268.596311 L17.4864001,268.596311 C17.6681196,268.596311 17.8152412,268.44919 17.8152412,268.26747 C17.8152412,268.085751 17.6681196,267.938306 17.4864001,267.938306 L13.328841,267.938306 C13.1471216,267.938306 13,268.085428 13,268.26747 C13,268.44919 13.1471216,268.596311 13.328841,268.596311 L13.328841,268.596311 Z M13.328841,273.061694 L17.4864001,273.061694 C17.6681196,273.061694 17.8152412,272.914572 17.8152412,272.732853 C17.8152412,272.551134 17.6681196,272.403689 17.4864001,272.403689 L13.328841,272.403689 C13.1471216,272.403689 13,272.55081 13,272.732853 C13,272.914572 13.1471216,273.061694 13.328841,273.061694 L13.328841,273.061694 Z M17.8155645,277.198236 C17.8155645,277.016516 17.6684429,276.869071 17.4867235,276.869071 L13.328841,276.869071 C13.1471216,276.869071 13,277.016193 13,277.198236 C13,277.379955 13.1471216,277.527077 13.328841,277.527077 L17.4864001,277.527077 C17.6684429,277.527077 17.8155645,277.379955 17.8155645,277.198236 L17.8155645,277.198236 Z M20.4443525,275.855064 C20.4679566,276.01706 20.6069946,276.13702 20.7702834,276.13702 L31.2864053,276.13702 C31.4496941,276.13702 31.5884088,276.016736 31.6123362,275.855064 C31.6285034,275.741894 31.9977625,273.057814 30.6015624,271.444973 C29.9345034,270.674444 28.9854883,270.283844 27.7813547,270.283844 C27.6943751,270.283844 27.6206526,270.326849 27.5605106,270.385698 L27.5521037,270.376968 C27.5462835,270.382788 26.9704075,270.926329 26.0291527,270.926329 C25.0878979,270.926329 24.5113752,270.382788 24.5068484,270.378261 L24.4984415,270.386991 C24.4379761,270.327496 24.3639303,270.283844 24.276304,270.283844 C23.0721704,270.283844 22.122832,270.674444 21.4560963,271.444973 C20.0589262,273.058137 20.4281853,275.742217 20.4443525,275.855064 L20.4443525,275.855064 Z M26.028506,271.584335 C26.4158723,271.584335 26.7476234,271.509965 27.0295795,271.411669 L26.028506,273.485598 L25.0267858,271.411345 C25.3090653,271.509965 25.6411397,271.584335 26.028506,271.584335 L26.028506,271.584335 Z M24.0713039,270.946377 L25.7323228,274.386112 C25.8422598,274.614393 26.2160456,274.613099 26.3246893,274.386112 L27.9850615,270.946377 C28.8910718,270.986795 29.602429,271.297852 30.102319,271.874374 C31.0610344,272.980211 31.0374303,274.786735 30.9879587,275.479338 L21.0684067,275.479338 C21.0176417,274.788029 20.9920975,272.985385 21.952753,271.875668 C22.4519963,271.298498 23.1643235,270.986795 24.0713039,270.946377 L24.0713039,270.946377 Z M29.1028622,266.662713 C29.1028622,264.96742 27.7237994,263.58868 26.0288294,263.58868 C24.3338593,263.58868 22.9541498,264.967743 22.9541498,266.662713 C22.9541498,268.358007 24.3338593,269.737393 26.0288294,269.737393 C27.7237994,269.737393 29.1028622,268.358007 29.1028622,266.662713 L29.1028622,266.662713 Z M23.6118318,266.662713 C23.6118318,265.330535 24.6960048,264.246686 26.028506,264.246686 C27.3606839,264.246686 28.4445335,265.330859 28.4445335,266.662713 C28.4445335,267.995538 27.3603606,269.079387 26.028506,269.079387 C24.6956814,269.079711 23.6118318,267.995538 23.6118318,266.662713 L23.6118318,266.662713 Z" id="Contacts" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="14px" viewBox="0 0 25 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.4 (15588) - http://www.bohemiancoding.com/sketch -->
    <title>Dashboard</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Welcome" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Contact-(Requests)" sketch:type="MSArtboardGroup" transform="translate(-13.000000, -443.000000)" fill="#FAFAFA">
            <g id="Dashboard" sketch:type="MSLayerGroup" transform="translate(13.000000, 443.000000)">
                <path d="M12.5625,0.125 C12,0.125 11.46875,0.15625 10.90625,0.25 C10.75,0.28125 10.625,0.4375 10.625,0.59375 C10.65625,0.75 10.8125,0.875 10.96875,0.875 C11.5,0.8125 12,0.78125 12.53125,0.78125 C13.75,0.78125 14.90625,0.96875 16,1.3125 C16,1.34375 15.96875,1.34375 15.96875,1.375 L15.375,2.9375 C15.3125,3.09375 15.40625,3.28125 15.5625,3.34375 C15.59375,3.34375 15.625,3.375 15.6875,3.375 C15.8125,3.375 15.9375,3.3125 15.96875,3.1875 L16.5625,1.625 L16.5625,1.53125 C19.15625,2.5 21.34375,4.34375 22.71875,6.71875 L21.28125,7.53125 C21.125,7.625 21.0625,7.8125 21.15625,7.96875 C21.21875,8.0625 21.3125,8.125 21.4375,8.125 C21.5,8.125 21.53125,8.125 21.59375,8.09375 L23.03125,7.3125 C23.84375,8.90625 24.3125,10.71875 24.3125,12.625 C24.3125,12.8125 24.4375,12.9375 24.625,12.9375 C24.8125,12.9375 24.9375,12.8125 24.9375,12.625 C24.90625,5.6875 19.375,0.125 12.5625,0.125 L12.5625,0.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
                <path d="M6.90625,1.5 C2.75,3.625 0.1875,7.84375 0.1875,12.5 C0.1875,12.6875 0.3125,12.8125 0.5,12.8125 C0.6875,12.8125 0.8125,12.6875 0.8125,12.5 C0.8125,10.59375 1.28125,8.78125 2.09375,7.15625 L2.125,7.1875 L3.5625,8 C3.625,8.03125 3.65625,8.03125 3.71875,8.03125 C3.84375,8.03125 3.9375,7.96875 4,7.875 C4.09375,7.71875 4.03125,7.53125 3.875,7.4375 L2.4375,6.625 C2.40625,6.625 2.40625,6.625 2.375,6.59375 C3.46875,4.6875 5.125,3.0625 7.1875,2 C7.34375,1.90625 7.40625,1.71875 7.3125,1.59375 C7.25,1.46875 7.0625,1.40625 6.90625,1.5 L6.90625,1.5 Z" id="Shape" sketch:type="MSShapeGroup"></path>
                <path d="M9,0.5625 C8.90625,0.4375 8.78125,0.40625 8.625,0.4375 C8.5,0.5 8.40625,0.625 8.40625,0.75 C8.5,1.78125 9.46875,10.71875 9.75,11.53125 C10.25,12.96875 11.25,13.8125 12.40625,13.8125 L12.40625,13.8125 C12.71875,13.8125 13.03125,13.75 13.34375,13.65625 C14.875,13.09375 15.4375,11.5625 14.78125,9.71875 C14.53125,8.90625 9.5625,1.40625 9,0.5625 L9,0.5625 Z M13.1875,13.0625 C12.9375,13.15625 12.6875,13.1875 12.46875,13.1875 L12.46875,13.1875 C11.5625,13.1875 10.8125,12.5 10.375,11.3125 C10.1875,10.8125 9.625,5.84375 9.1875,1.9375 C11.34375,5.21875 14.0625,9.4375 14.25,9.9375 C14.65625,11.125 14.625,12.5625 13.1875,13.0625 L13.1875,13.0625 Z" id="Shape" sketch:type="MSShapeGroup"></path>
            </g>
        </g>
    </g>
</svg>

[kisenka]

@theaqua it's because you have custom namespace created by Sketch which is not presented in final sprite – xmlns:sketch="http://www.bohemiancoding.com/sketch/ns". To fix this you can remove it manually (namespace declaration from svg tag and it's usage from tags, e.g. sketch:type), but I highly recommend to use svgo-loader for that purpose. You can combine it with svg-sprite-loader like this:

...
  loaders: [
    {
      test: /\.svg/,
      loader: 'svg-sprite!svgo'
    }
  ]
...

[princed]

@kisenka Shouldn't we mention it in README?

[kisenka]

@princed yep

[imevro]

Works very good, thanks for advice, @kisenka!