Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
2 Hour(s) 46 Minute(s)
Language
English
Taught by
Peter Bartholomew
Rating
Course Overview
Learn, understand, write, and modify SVG markup
This course is all about SVGs - Scalable Vector Graphics. We cover where to find and download SVGs, how to author SVGs in programs such as Inkscape and Illustrator, and ways to add SVGs to your web pages. But the primary focus is toward understanding the underlying text-based code of SVGs. We show how to view, comprehend, write, and modify markup by detailing the definitions and uses of numerous SVG elements and attributes. We cover such topics as:
How to code for basic shapes such as circles, lines, curves, and polygons.
How to understand paths and the commands used for drawing them.
How to add artistic text elements to a SVG.
How to target and style specific SVG elements using CSS or presentation attributes.
How to understand viewports, viewBox, sizing, and positioning of SVG elements.
How SVG elements can be transformed or animated.
How to implement gradients, filters, clip-paths, and masks.
How to create, modify, or remove SVG elements from a web page using JavaScript.
How titles, descriptions, roles, and aria attributes can be used for SVG accessibility and SEO.
Prior coding experience is not absolutely necessary as this course provides a good overview of SVG fundamentals. But to really get the most out of the lessons, it helps to have knowledge of or experience with HTML5 and CSS3.
Course Content
- 10 section(s)
- 29 lecture(s)
- Section 1 Introduction to Scalable Vector Graphics (SVG)
- Section 2 Finding, Making, and Using SVGs
- Section 3 Introduction to SVG Code
- Section 4 Styling SVGs
- Section 5 SVG Paths and Path Commands
- Section 6 SVG Text
- Section 7 SVG Sizing - Viewport and viewBox
- Section 8 SVG Transformations and Animations
- Section 9 Other SVG Features and Topics
- Section 10 SVG Manipulation by JavaScript
What You’ll Learn
- Where to find and how to author SVGs
- Ways to add SVGs to your web pages
- Understand the underlying code of SVG images
- Become familiar with SVG elements and attributes
- How to modify, transform, and animate SVG images
Skills covered in this course
Reviews
-
TTony Brierly
This was exactly what I needed for understanding SVGs better. It does not go very deep on advanced topics. It also would have been nice to have some more "ready to use" real world examples. More sections like the one on SVG Line Drawings. Overall this was very valuable for me.
-
DDaniel McMann
Information was presented too quickly. Could have used more examples.
-
MMaira Campfens
It gives a perfect understanding of svg.
-
KKsenia Amador
It is a fun course. Some parts, like viewBox, were confusing, but overall well done course.
