If you are into designing for multiple resolutions, SVG is the best option to turn to as far as the use of graphics is concerned. These small vector files can be scaled up and down as you like it without sacrificing quality. And with the two tools I am about to introduce you to, SVG will even move…
SVG Morpheus: Morphing One Icon to Another
<code>var myIcons = new SVGMorpheus('#myIconSet');</code>
After initializing, an SVG object will let you do the trick:
Each icon has its own ID which will be the handler for the SVGMorpheus object used to do the morphing. Options are two handful, the library needs no intellectual rocket scientist. A look at the documentation over at Github will do.
As I mentioned, SVG Morpheus is freely usable and brand-new. It implements Material’s Delightful Details and is as such state-of-the-art in modern UX design.
The screenshot is static, but the tool will actually beautifully morph one icon to another. Check the demo linked below.
SVG Loaders: Animated Loader Icons in Pure SVG
Sam designed a set of 12 loaders that can easily be modified in color by using the ´fill´ attribute in the SVG itself. Sizes can be set to your liking as SVG is scalable and vector-based. Simply set width and height values.
Don’t get confused by the screenshot. These SVGs will move. Head on over to the demo linked below.
Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.