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
- http://www.creativebloq.com/web-design/get-started-svg-responsive-web-design-71515781
- http://creative-jar.com/blog/technology/why-use-svg/
##Use SVG RIGHT NOW: Quickstart Guide using IcoMoon
- Clone this repo or download the
demo.html
andjavascripts/svgxuse.js
files above. - Go to the IcoMoon App.
- Select any and all images you want.
- Click on Generate SVG & More in the bottom-left of the page.
- Hover over each image and click the <> Get Code link underneath the image.
- Copy the Symbol Definition(s) code from the pop-up display and paste it into the
<defs>
element withindemo.html
. - From the same pop-up, copy the HTML (SVG ) code and paste it into the
<body>
element ofdemo.html
. - Open
demo.html
in your browser and view your SVG!
##Other Ideas on How to Use SVG