NEW SVG system

[dominikwilkowski]

Hi everyone.

We are investigating a new SVG icon system. The new system will most likely look like svg4everybody. Some thinking below:

Whats wrong with the current system

1. The current system has issues with SPAs as it natively gives us the SVG as a background and only after a Javascript operation will it give us the benefits of embedded SVGs like styling elements with CSS or animating them. This is really upside down and done to make support for older browsers possible. We think this is the wrong way around. We should hack older browsers and play nice with modern standard-compliant ones.
2. The people want to be able to select each icon individually and not via groups. We had grouped them up at first as it was a huge step forward from icon-fonts but this is not good enough anymore.

What will the new system look like

In the blender you will be able to select each icon you need and only get what you selected. An SVG sprite will be created that you can either embed yourself or embed via a simple ajax call for those who want to save on blocking requests. The HTML to use an icon will be similar to this:

<svg role="img" title="Twitter" aria-labeledby="title-twitter">
    <use xlink:href="map.svg#twitter"/>
    <title id="title-twitter">Twitter icon</twitter>
</svg>

On IE8 and lower there will be a script that runs to replace the <use> tag to an <img> tag that points to a png file that will also be supplied. This then works out of the box for all SPAs unless you need IE8 support. For those we can create a simple directive that does the heavy lifting.

What might be problematic

1. This approach will remove the background option. You would not be able to use an SVG as a background image easily.
2. As mentioned above we will create a new module that has more magical powers so you can select each icon. This means however we will have all icons in a new module, leaving us with two ways of using the icons. As we don't delete modules this will present a challenge in how we present these options on the GUI page.

What's next?

Let's have a chat about it. How will this change affect you? Do you have an idea how this might break things for your project? Any feedback is encouraged. I will updated this issue with everything we find.