Long ago I made Flash websites. I made them entirely in vector an it was awesome. With the rise of mobile devices Flash went away and so did my streamlined approach to designing fully mobile responsive awesomely crisp websites. Fortunately designing in vector was a good idea then and it still is too. Here’s a few vector web development tools to lead you on your vector website journey.
What are the benefits to vector website design?
- Way smaller in file size.
- Easily editable
- They can be animated
- Fully Mobile Responsive.
- Faster loading
- One size fits all. Literally they scale infinitely
- Super crisp retina-ready graphics.
icomoon.io
icomoon is a premium solution for integrating your own vector icon sets in different formats including SVG, icon font or simple PNG sprites. You can also use thousands of images already built into their system. Here’s how it works:
1. Selected either your own SVG icon or from their free vector icons collection.
2. Generate a collection and output it either as a font to the cloud or as a downloadable SVG set.
3. Add it to your site using a simple class.
Snapsvg.io
SVG assists in making animated vector elements. It uses a simple to use javascript library to draw out your vectors.
Each of these examples are mobile responsive SVG animations. Ready to use on any website:
Here’s a step by step on how it works and some live examples:
Grunticon.com
Designed by the Filament Group, Grunt icon creates easy to use fully browser compatible file sets for vector illustrations, icons, and background images. Here’s how it works:
1. Drag your file onto their app or download it through their github repo
2. Download your completed files!
It creates a set of SVG files, secondary PNG file for crappy browsers, and exports a demo page showing how to use it online.
** Disregard that they spelled download wrong. Most creatives don’t spell right or use grammer good.
Still reading? Join the Geometricgold.com to get notified of: Vector Web Development Tools – Part 2
Leave a Reply