Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

SVG Basics Course

via Treehouse

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.

Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors. This is different from traditional raster-based image formats that use pixels, like JPEG and PNG. When used on web pages, SVG images provide an infinite level of detail, so they look sharp regardless of screen size or pixel density. In this course, we'll look at situations where SVGs are better than PNG and JPEG files, as well as when an SVG might not be the best choice. Finally, we'll learn how to modify SVGs using CSS.

What you'll learn

  • Vector graphics versus raster graphics
  • Image and background SVGs
  • Embedded SVGs
  • Responsive SVGs

Syllabus

Introduction to SVG

SVG (Scalable Vector Graphics) is an XML markup language that is capable of creating images using vectors. This is different from raster-based file formats like JPEG and PNG.

Chevron 6 steps
  • Vector Graphics

    3:34

  • Vector Graphics

    4 questions

  • Creating an SVG

    3:44

  • Creating SVGs

    3 questions

  • SVGs as Images

    8:50

  • Create an SVG Image

    1 objective

  • Extra Credit

    If you're familiar with a vector-based drawing program like Illustrator, try creating your own SVG images.

SVG and CSS

SVG is an XML based language, and they can be embedded directly into HTML. This means their presentation can be adjusted with CSS, which allows SVGs to respond appropriately to different screen sizes.

Chevron 4 steps
  • Embedding SVG XML

    7:17

  • Embed an SVG

    1 objective

  • Responsive SVGs

    8:41

  • Responsive SVGs

    4 questions

  • Extra Credit

    Try applying your own styling to an SVG. Change the way the SVG is presented on different screen sizes by using media queries.

Reviews

Start your review of SVG Basics Course

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.