SVG (Scalable Vector Graphics) 2023 - Inside the Code
Learn, understand, write, and modify SVG markup
Ratings 4.57 / 5.00
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
Description
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.
Who Should Attend!
- This course is intended for web designers, developers, and anyone else with curiosity about SVGs (scalable vector graphics). Perhaps you have heard of SVGs or even used them in the form of logos and icons and now want to really understand them. Perhaps you have taken a look at SVG code and found it too complex and overwhelming. Or maybe you visited a fast-loading website with some amazing graphics and animations and wanted to know how they were made. If any of these describe you, then you have chosen the right course. I fully understand that SVGs can be complicated and the code can be intimidating. But when you take the time to understand what the code means and how SVGs can be manipulated and animated, you can do amazing things on your website.
