Posts Tagged ‘SVG’

SVG.js is a JavaScript library for working (manipulating and animating) with SVG without any complexity.

The library is standalone, very lightweight in size (5kb gzipped) and has lots of features.

There are built-in methods for creating shapes (rectangle, circle, polygon, etc.) or defining images.

SVG.js

They can all be animated with size, position, color or any other properties and be interacted with standard JavaScript events.

It has support for grouping elements for mass manipulations, filling them is possible and a unified API simplifies working with the library.

SVG.js is extendable with plugins and there are already various plugins (like dragging or easing).

There are various free icon fonts out there and, with the increasing use, new ones are being created each day.

MFG Labs Icons is one of them, it is a slick, free and pretty complete icon font.

MFG Labs Icons

It is a web app-themed set considering most of them are actions (and there are social items as well).

The download package includes all the popular web-font formats and the styles for them.

Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using  jQuery.

It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin.

Lazy Line Pianter

And, after that, just insert that code into any web page and it will work.

Various options exist for customization including the stroke width, color, speed and a callback that is triggered once the animation is completed.

The plugin requires Raphaël besides jQuery and can be a nice way of presenting illustrations for graphic designers.

  • Tags:
  • Filed under: Effects, Goodies, Other License
  • 0 Comments
  • When working on any mapping-related projects (like Google Maps integration), icons built specifically for them can be very handy.

    Maki is a free set of “point of interest” icons that is perfect for web-based mapping interfaces.

    Maki - Point of Interest Icons

    The set includes 73 icons, comes in 3 sizes and both in PNG + SVG.

    Besides standard markers, there are items for airport, bus station, police, restaurant, grocery and more.

  • Tags:
  • Filed under: BSD License, Design, Icons
  • 0 Comments
  • IcoMoon is a free service that enables us to create custom icon sets and icon fonts using different sets.

    The application includes most of the popular and free icon sets (that can be selected from its library), we can choose which ones to use and select any number of items from them.

    Icomoon

    Once the selection is over, it offers 2 types of downloads: image and font.

    The image version comes as PNG with optional sprite image + the CSS rules and the font version in multiple formats (EOT, SVG, WOFF, TTF).

    Also, besides the icons of other designers, IcoMoon has its own and free icon set which is pretty huge and slick.