SVG Icons

[Steve Lee]

Nice to hear this. When we tried with the mulberry symbol set at straightstreet.com a few years back it was almost impossible due to namespacing and image tag not supporting Svg. And ie pulled the admittedly horrid wmf support.


Anyway that's all changed and it's easier to embed svg inline or just use an image. And now icons.


This course just released yesterday by the brilliant egghead.


https://egghead.io/courses/create-an-svg-icon-system


Steve


Get Outlook for Android




On Thu, Feb 23, 2017 at 8:42 PM +0000, "Justin Obara" <obara.justin at gmail.com> wrote:












While working on some updates to the preferences framework, I encountered the potential need for additional icons. Unfortunately this isn’t a trivial task in our current setup, so I started exploring SVG icons as an alternative.
I’ve written up a brief wiki page on some exploration into SVG icons ( Research SVG Icons ), and created a repo with some of the explorations implemented.
In short, they aren’t a perfect solution yet. However, they may be good enough to switch off of font icons for. The primary pain point we have with font icons is around creating and maintaining the fonts. This is simplified with SVG icons, but comes with some browser support issues. Firefox 51 currently has the best support for making use of external SVGs, but the “modern” browsers we support all have enough basic support for us to make use of monochrome SVG icons that can be styled for our contrast themes. The main outlier is IE 11, which requires a polyfill to properly run. The recommended polyfill is svg4everybody  which seems to do the trick and is less that 2KB minified. However, we’d have to run it on every page that used an SVG icon.
I propose that we attempt to upgrade Infusion to SVG icons and if all goes well, to upgrade other sites and repos opportunistically.
For complex SVGs that are used as images, logos, and etc., I suggest we keep those as image references or inline SVGs if they require contrast styling.
Please let me know if you have further questions and I’d be interested in hearing your comments and thoughts.
ThanksJustin





-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20170223/2be742ec/attachment.html>