SVG (Scalable Vector Graphics) 2023 - Inside the Code

Learn, understand, write, and modify SVG markup

4.55 (20 reviews)

Udemy

platform

English

language

Web Development

What you will 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

Why take this course?

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.

Screenshots

SVG (Scalable Vector Graphics) 2023 - Inside the Code - Screenshot_01

SVG (Scalable Vector Graphics) 2023 - Inside the Code - Screenshot_02

SVG (Scalable Vector Graphics) 2023 - Inside the Code - Screenshot_03

SVG (Scalable Vector Graphics) 2023 - Inside the Code - Screenshot_04

Reviews

Drey

November 10, 2023

Great starting point for learning how to use SVGs. If you understand how SVGs work, you can do so many neat things! Taking this course before taking a data visual course such as D3 will make it so much easier to learn!

Josep

September 25, 2023

Covers all topics related to SVG with very clear explanations. It would be nice if the initial code of the lessons could be downloaded so as not to have to copy code that is not relevant to the explanation (css styles, etc.)

Thomas

August 22, 2023

Solid and good explanations about the SVG topic in simple, fluent English. Next time I would recommend not using background music. Thanks for uploading it! :)

Alex

July 23, 2023

I took this course because I was having some difficulty understanding Viewport, viewBox, and transforms. That section was very clear and I learned some other useful path commands that made the project I was working on easier.

Chris

May 29, 2023

This is an excellent course. I have checked several courses and books (quickly got stuck with them, to be honest) on SVG to fully understand the subject matter. Peter has managed to clearly explain the key concepts in a reasonable timeframe so I can finally understand those books. The section on scaling and viewBox sizing themselves are worth the money. This course will improve your skill-level so you can progress toward JS animation libraries.

Hope

March 16, 2023

Amazing introduction to SVGs and great resources for diving deeper. I learned a lot and feel much more confident when using SVGs now. Thank you!

Charts

Price

Rating

Enrollment distribution

SVG (Scalable Vector Graphics) 2023 - Inside the Code - Distribution chart