SVG (Scalable Vector Graphics)

Intro

SVG is a Scalable Vector Graphics, which basically means it is a language used for to create two-dimensional vector graphics. These graphics can be used to create complex or simple graphics that can be animated in a variety of ways. An important fact to note is that SVG images do not lose graphic qualties when resized, which is not always the case when dealing with standard images or icon fonts.

Suggested Learning

• Give yourself a basic feel for SVG on W3Schools.
• Learn other, more common ways to use SVG at css-tricks.
• Learn how to use the <path> element here.

Requirements

• Make a project that demonstrates the points below in an HTML document:
  • Create an SVG image using a desktop tool like Sketch, Adobe Illustrator/Photoshop, or an online tool like editor.method. These tools are listed because they are able to export as an SVG file.
  • Using SVG as an src as “Data-URI” in html
  • Using SVG as a background-image in CSS
  • Using SVG as an “inline” element in HTML with the <path> element.
  • Style your inline SVG with CSS to do something on an event (such as hover).
• Share your file with your the #requirements Discord channel to show you have passed this requirement off.

Extra Learning

• View different examples of how people have used SVG here.
• A quick reference or an in depth learning course can be found here with many links that contain useful information, including an example link on animation.

This list is by no means complete. Feel free to add an issue or put in a pull request to update it.