Design your way

Monday, March 9, 2015

SVG, also known as Scalable Vector Graphics, is one of the fastest and best tools being utilized by web developers, especially those who are looking to have different animations placed into the many websites and apps that they design.

As mobile devices such as smartphones and tablets become more and more popular throughout the world, the technology used to design apps and websites for them continues to thrive. SVGs are one of the more popular technological options to burst onto the scene in recent years. This kind of technology actually takes vectors a big step beyond the conventional scalable image, as SVGs are actually XML-based. This means that a SVG file, as well as its overall behavior, can be defined accurately enough for interactions using both JavaScript and CSS.

SVGs are becoming more and more popular and being used by multiple developers and designers to successfully create responsive web designs.

In the end, whether you are a pro at using Scalable Vector Graphics or you are a newbie at using this kind of technology, it’s always helpful to add new tools and techniques to your list. Check out the list below for some great resources.

Developers and designers will be able to successfully create visually stunning, innovative graphics for their apps and websites by taking advantage of these tools.

Snap.svg

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

SVG Loaders

PaymentFont

Walkway.js

An easy way to animate SVG images consisting of line, path, and polyline elements.

progressbar.js

Beautiful and responsive progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as you wish.

Ready to use SVG icons for the web

Choose an icon. All you have to do is copy & paste the HTML code. Don’t forget to load the basic CSS file.

PLAIN PATTERN

CHARTIST.JS

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

PatternBolt

PatternBolt is a fine selection of SVG pattern background, packed in a single CSS or SASS (scss) file, just include the css file in your project and add a class to your element to insert a pattern.

seen.js: Render 3D scenes into SVG or HTML5 canvas

Pizza Pie Charts

Deliver pie charts to any device with Pizza. Your pie will be steaming hot with SVG so that it looks good on retina devices and HiDPI devices. And the pie will fit the width of your box — um, container — or can be given a max-width or max-height.

BonsaiJS

A lightweight graphics library with an intuitive graphics API and an SVG renderer.

Polymaps

Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

RAW

Raw is an open web app to create custom vector-based visualizations on top of the amazing D3.js library through a simple interface.

Raphaël

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

SVGMagic: the fully automated SVG fallback

SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn’t support SVG.