SVG's "null"

[MarkMurphy]

I have an svg folder with one svg user.svg. The output gives me the following:

<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-user"><title>user</title>null</symbol></svg>

My grunt task looks like this:

svgstore: {
  options: {
    prefix : 'icon-'
  },
  default: {
    files: {
      "app/assets/images/icons.svg": [
        "app/assets/images/svg/*.svg"
      ]
    }
  }
}

And the SVG:

<?xml version="1.0" encoding="utf-16"?>
<!-- Generator: Adobe Illustrator 17.1.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" x="0px" y="0px" width="48px"
     height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <path id="user" d="M35,30.208c-0.644-0.366-4.843-2.851-7-3.724v-3.777c0.624-0.456,1-1.158,1-2.223V17.5c0-2.475-1.5-4.5-4.5-4.5
            S20,15.025,20,17.5c0,0,0,0.484,0,2.984c0,1.075,0.376,1.779,1,2.233v3.767c-2.032,0.873-6.356,3.357-7,3.724
            c-0.801,0.455-1,0.888-1,1.94c0,0.43,0,2.352,0,2.352c0,0.275,0.225,0.5,0.5,0.5h22c0.275,0,0.5-0.225,0.5-0.5
            c0,0,0-1.922,0-2.352C36,31.096,35.801,30.663,35,30.208z"/>
</svg>

[JnBrewsterGT]

I have this very problem, Do you have the solution? What am I doing wrong?

[MarkMurphy]

Find an svg that does work and then just copy your path data into it. I think it's something to do with the tags preceding the opening <svg> or the attributes on it

[MarkMurphy]

If there's still a problem after that then it's probably something in the path data

[JnBrewsterGT]

Yes, thank you. That was it. I opened up the svg file in an editor and saw the non ascii characters. I used a process to remove it and it worked after that.

I was going to post what I had found.

Thanks for getting back to me.

[MarkMurphy]

Yeh, so I guess it would be helpful if this project did one of two things:

1.) Ideally, validate the SVG and inform the user of any problems.
2.) If something fails, display an error message to the user and direct them to a validator. The error message might provide a couple of examples of common issues.

Or maybe both, if there appears to be a problem with the input or output of the svg, validate it then to try inform the user why it's failed. If that fails or is uncertain, fallback to just displaying a generic error message and a link to a validator.

[JnBrewsterGT]

+1