SVG Icons

[Justin Obara]

Hi Steve,

Sorry I think I forgot to reply to this e-mail. Thanks for sharing. I’m
hoping that working with SVG icons will be much easier now, and it’s great
to see that there are course coming out that provide techniques for using
them. Unfortunately I don’t have an account to access the videos from the
egghead site, but based on their title it seems that some of the techniques
may not work for us, because we want to easily style the icons with CSS.

Thanks
Justin


On February 23, 2017 at 4:00:44 PM, Steve Lee (steve at opendirective.com)
wrote:

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 <https://aka.ms/ghei36>



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 <https://wiki.fluidproject.org/display/fluid/Research+SVG+Icons> ),
> and created a repo <https://github.com/jobara/svg-icon-spike> 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
> <https://github.com/jonathantneal/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.
>
> Thanks
> Justin
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20170307/c4f2b181/attachment.html>