Tuesday 3 December 2013

Responsive icons: using the SVG outlines?

We were talking with P.J Oniri and Scott Lewis about how to automate, then speed-up, the responsive design icons process. Check the great article and our conversation here.

Here is a proof of concept that I want to share, showing that using the SVG features we could easily create different versions of the same icons, adapted to the screen size.

Advantages:

  • It's easy to automatize: just create one version of the icons, then use the SVG markup to change the stroke width, related to the user display size.
  •  It's faster to load: the user load just one version of the icon, it's transformed only via the SVG markup.

Problems:

  • Works only for the outline style icons!
    (but maybe there is a way to use the SVG features for filled icons)


Posted by at

1 comment:

  1. Anonymous4 December 2013 at 07:07

    I wonder what could be done using a custom Script Extension in Illustrator. The difficulty will be determining what to have the code modify and when, but if the problem can be described verbally, it can probably be described in code as well.

    ReplyDelete

Subscribe to: Post Comments (Atom)