Part 9: SVG

SVG (Standard Vector Graphics) are a great opportunity for designers to embed crisp/scaleable graphics onto a webpage. If embedded as code, the SVGs can be altered in CSS or jQuery by the developer or the user. We'll take a look at the basic structure of an SVG element and work with the candy cane svg provided.

• Embedding SVG
• Example SVG file
• NounProject and Modern Pictograms
• Lottie and Lottiefiles and MP for Lottie
• Example Lottie file

Exercise

Copy the candy cane svg from the example file or from the img folder and paste into a new file. Color the candy cane the same as the candy cane you were given.

Optional: Play with Lottie

If you want to try out Lottie, download John's free fan icon from the Noun Project and give it a spin.