SVG failing validator due to duplicate IDs

[RioBrewster]

So I got inline svg icons added to my page and I managed to give them a hover color with css. Miller time right?

Well no. There are more than one icon and they were all created with Illustrator. Illustrator uses the same IDs over and over , so when I run validation on the code I get a boatload of duplicate ID errors.

I work with some folks who think that a page just isn’t right if it doesn’t validate.

Is there a way to tell the validator to just ignore everything between the <svg></svg> tags?

[Chris Coyier]

It’s not the end of the world. Validator is just a tool to help diagnose potential problems.

Unless you ever plan to select those icons, by ID, with JavaScript, in which case you’ll run into trouble. If possible, I’d recommend running those SVG’s through some kind of optimizer or build process to remove the unnecessary ID’s.

I’ve always been a big fan of SVG icon systems in which I smash them all together using grunt-svgstore which cleans that up.

[Author]

Posts