| Brilliant. I am the most picky person ever when it comes to SVG and I detest the rubbish that gets churned out of Illustrator. The great thing about your tool is that it enables you to learn a thing or two, there is a great amount of SVG vocabulary used. My test is to see if an icon such as the 'play' icon uses a circle or a path for the circle. Another thing that I find annoying about designer made SVGs is that the circle will not only be a path but the points on the path will be in 'NASA numbers', i.e. to nine decimal places. It is refreshing to find icons on a sensible grid and going for integers where possible. Download size is one thing, however, I also think SVG icons should be a bit more literal, with things like mask and use brought into play. So the 'fast forward' icon might be lighter defined as two polygons, but the polygons are the same so the define one triangle and re-use it for the second makes more sense in a literal way even though the code to bring in the namespace for use might actually make the download size of the icon larger. In this vein the other thing I like to see is a viewbox that has the origin in the middle. In that way a circle just has to have a radius to be centred and an arrow can use another arrow and be rotated by 180 degrees. If you put this together then you can have a symbol set that has eight different arrows in it 'using' the base arrow and any changes to the base arrow get automagically updated to the others. Another download option that would be useful to me would be a CSS variable version of each icon. This technique doesn't work in Edge but has its advantages in that you can have pseudo elements for things like 'external link' where the background to the pseudo element is an SVG in a CSS variable. The CSS variable needs some url-data-xml-type-svg syntax and any '#' characters have to be escaped out as %23. By taking this approach the SVGs can be in the stylesheet and therefore downloaded 'for free'. If done in white they can also be colorised to anything including black in the CSS for the pseudo element. Lea Verou has done a talk or two on this SVG in CSS approach and a tool to get readymades would help make this method more acceptable to people who are still stuffing icons in fonts. Anyway, thanks again for sharing your beautiful site, there is lots to learn from the icons you have there! |