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


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


SVG Loaders


PaymentFont


PaymentFont


Walkway.js


Walkway.js


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


progressbar.js


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


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


PLAIN PATTERN


CHARTIST.JS


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


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


seen.js


Pizza Pie Charts


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


BonsaiJS


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


Polymaps


Polymaps


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


RAW


asdasdasd


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


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: 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.


Svg.js


Svg.js


A lightweight library for manipulating and animating SVG.


Vivus


Vivus


Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.


SVG Morpheus


SVG Morpheus


JavaScript library enabling SVG icons to morph from one to the other.








Source: http://ift.tt/1AVQw7D

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading