SVG Basics
Treehouse
Course Summary
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.
-
+
Course Description
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.
Topics covered
- 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.- 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.
-
+
Course Syllabus
â— Introduction to SVGâ—¦ Vector Graphicsâ—¦ Creating an SVGâ—¦ SVGs as Imagesâ— SVG and CSSâ—¦ Embedding SVG XMLâ—¦ Responsive SVGs