Adding Graphics to Web Pages Using Canvas and SVG
This course will teach you how to add custom graphics to your web pages using the HTML canvas and SVG documents.
What you'll learn
Humans are visual creatures and often look for ways to enhance our experiences with images and graphics. From understanding complex data sets via charts to getting the high score in the latest game, graphics are an important part of providing a positive experience for your users. In this course, Adding Graphics to Web Pages Using Canvas and SVG, you’ll learn to add custom graphics into web pages. First, you’ll explore how to create SVG documents and use them to create graphics that users can interact with. Next, you’ll discover what the canvas tag is and how it can also be used to allow users to create graphics using JavaScript APIs. Finally, you’ll learn how to choose whether SVGs or canvases are the best choice for the unique needs of your projects. When you’re finished with this course, you’ll have the skills and knowledge of web-based graphics needed to create rich and unique user experiences by adding custom graphics to your web pages.
Table of contents
- Introduction 4m
- What Are Scalable Vector Graphics (SVG)? 2m
- First Steps with SVG 1m
- Drawing Basic Shapes 3m
- Demo: Basic Shapes 13m
- Drawing with Path Elements 3m
- Demo: Path Elements 9m
- Demo: Adding Text to SVG Documents 4m
- Demo: Adding Images to SVG Documents 2m
- Working with Gradient Fills 3m
- Demo: Animating SVG Documents 6m
- Summary 1m
- Introduction 1m
- What Is the Canvas? 3m
- First Steps with Canvases 2m
- Drawing Basic Shapes 5m
- Demo: Basic Shapes 10m
- Drawing with Path Elements 2m
- Demo: Path Elements 7m
- Demo: Adding Text to Canvases 6m
- Demo: Adding Images to Canvases 3m
- Working with Gradient Fills 3m
- Demo: Sketching with Canvases 5m
- Summary 2m
About the author
Michael Van Sickle is an application architect in Akron, Ohio. He started his career as a mechanical engineer, designing components for the automotive industry, before changing to software engineering. He is passionate about learning new programming languages and is comfortable working in Java, C#, JavaScript, PHP, and F#. Mike also loves learning about user experience design and is taking a lead role in his company's attempt to make applications that are elegant and simple. When he i... more