/intro_to_SVG

Some basic resources meant to help you get started using SVG to enhance your app's UI!

Primary LanguageJavaScript

Scalable Vector Graphics for UI/UX: A Primer

Some basic resources meant to help you get started using Scalable Vector Graphics (SVG) to enhance your app's user interface (UI) and user experience (UX).

##Video Overview

##What are SVG? Why would I use them? In a sentence, SVG allows you to add sharp, resolution-independent images (icons, logos, etc.) to your front end, with minimal load times and asset-management.

####Further Reading

##Use SVG RIGHT NOW: Quickstart Guide using IcoMoon

  1. Clone this repo or download the demo.html and javascripts/svgxuse.js files above.
  2. Go to the IcoMoon App.
  3. Select any and all images you want.
  4. Click on Generate SVG & More in the bottom-left of the page.
  5. Hover over each image and click the <> Get Code link underneath the image.
  6. Copy the Symbol Definition(s) code from the pop-up display and paste it into the <defs> element within demo.html.
  7. From the same pop-up, copy the HTML (SVG ) code and paste it into the <body> element of demo.html.
  8. Open demo.html in your browser and view your SVG!

##Other Ideas on How to Use SVG