We may earn an affiliate commission when you visit our partners.

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.

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.

Enroll now

Or start your subscription today

And complete this course over a free trial

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid for a limited time only

Future-proof your career

Access O'Reilly books, live events, courses, and more. Save with an annual subscription.

Take

15%

off

What's inside

Syllabus

Course Overview

Using SVG to Create Images

Using Canvases to Create Images

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Suitable for learners with prior knowledge in graphics or who are comfortable with technical concepts

Covers the basics of SVG and canvas for creating graphics in web pages

Provides practical examples to demonstrate the use of SVG and canvas

Taught by an experienced instructor in web design and development

Suitable for beginners and intermediate learners looking to enhance their web development skills

Save this course

Save Adding Graphics to Web Pages Using Canvas and SVG to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Adding Graphics to Web Pages Using Canvas and SVG with these activities:

Review the basics of HTML and CSS

Show steps

Refresh your understanding of HTML and CSS to strengthen your foundation for this course.

Browse courses on HTML

Show steps

Review online tutorials or documentation on HTML and CSS.
Practice writing basic HTML and CSS code.

Gather resources on best practices for web graphics

Show steps

Expand your knowledge base by compiling a collection of valuable resources on best practices for web graphics.

Browse courses on Best Practices

Show steps

Search for articles, tutorials, and documentation on best practices for web graphics.
Organize the resources into categories such as design principles, optimization techniques, and accessibility.

Participate in a study group focused on web graphics

Show steps

Enhance your learning experience by engaging with peers in a study group dedicated to web graphics.

Browse courses on Web Graphics

Show steps

Find a study group or create one with classmates or fellow students.
Set regular meeting times and establish a study schedule.
Discuss course materials, share knowledge, and work on projects together.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Follow tutorial on creating animated graphics

Show steps

Strengthen your understanding of creating animated graphics by following a step-by-step tutorial.

Browse courses on Web Development

Show steps

Choose a tutorial that aligns with your skill level and interests.
Follow the tutorial instructions carefully, experimenting with different techniques.
Create your own animated graphic based on what you learned.

Attend a workshop on advanced web graphics techniques

Show steps

Deepen your knowledge by attending a workshop specifically focused on advanced web graphics techniques.

Browse courses on Web Graphics

Show steps

Research and identify workshops that align with your interests and skill level.
Attend the workshop and actively participate in the activities.

Practice creating charts and graphs using SVG

Show steps

Become more proficient in using SVG for data visualization through dedicated practice.

Browse courses on SVG

Show steps

Find a dataset that interests you and gather the necessary data.
Design a chart or graph that effectively represents the data.
Implement your design using SVG, paying attention to accuracy and precision.
Critique your work and identify areas for improvement.

Design an interactive web page with custom graphics

Show steps

Apply your skills to create a practical project that showcases your ability to use custom graphics in web design.

Show steps

Plan the layout and navigation of your web page.
Design custom graphics using a combination of SVG and canvas.
Implement your graphics into the web page using HTML and CSS.
Add interactivity to your web page using JavaScript.
Test and refine your web page to ensure it is user-friendly and functional.

Career center

Learners who complete Adding Graphics to Web Pages Using Canvas and SVG will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers create and maintain websites. They are responsible for the functionality and appearance of websites, ensuring that they are user-friendly and visually appealing. This course can help you become a more effective Web Developer by teaching you how to create custom graphics for web pages using HTML canvas and SVG documents. This course will teach you how to make your website more robust, engaging, and interactive with graphics.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-end Developers are responsible for designing and coding the look and feel of a website. They work with designers to create a user-friendly and aesthetically pleasing experience. A background in IT is not required, but this course teaches the basics of essential coding skills. You will learn how to use HTML canvas and SVG documents to create custom graphics for websites. These skills will help you build a solid foundation for a successful career as a Front-end Developer.

See salaries and explore the career path for Front-End Developer

Graphic designer

Graphic designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. A background in graphics helps build a foundation that can lead to success in this field. This course will teach you how to use SVG documents and canvas elements to create unique graphics for web pages. These skills are directly applicable to graphic design work, allowing you to fulfill responsibilities like logo creation, web design, and marketing material design.

See salaries and explore the career path for Graphic designer

UX Designer

UX Designers are responsible for improving the overall user experience of a website or application. They work to understand the needs of users and create designs that are both visually appealing and easy to use. This course can help you become a more effective UX Designer by teaching you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and interactive experiences for users, which can lead to increased user satisfaction and loyalty.

See salaries and explore the career path for UX Designer

Interactive Designer

Interactive Designers create interactive experiences for websites and applications. They work to create experiences that are both engaging and informative. This course can help you become a more effective Interactive Designer by teaching you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and interactive experiences for users.

See salaries and explore the career path for Interactive Designer

UI Designer

UI Designers are responsible for designing the look and feel of a website or application. They work to create a user-friendly and visually appealing experience. This course can help you build a foundation for a successful career as a UI Designer by teaching you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and interactive experiences for users.

See salaries and explore the career path for UI Designer

Game Developer

Game Developers create video games. They work to design, develop, and test games. This course can help you become a more effective Game Developer by teaching you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more visually appealing and engaging games.

See salaries and explore the career path for Game Developer

Technical Animator

Technical Animators create animations for websites, videos, and games. They work to create animations that are both visually appealing and technically accurate. This course may be useful because it teaches you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and interactive animations.

See salaries and explore the career path for Technical Animator

Data Visualization Specialist

Data Visualization Specialists create visual representations of data. They work to make data more accessible and understandable. This course may be useful because it teaches you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and interactive data visualizations.

See salaries and explore the career path for Data Visualization Specialist

Video Editor

Video Editors create videos for websites, television, and film. They work to edit and assemble video footage into a cohesive and visually appealing story. This course may be useful because it teaches you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and visually appealing videos.

See salaries and explore the career path for Video Editor

Creative Director

Creative Directors oversee the creative aspects of a project. They work with writers, designers, and other artists to create a cohesive and engaging experience. This course may be useful because it teaches you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and visually appealing projects.

See salaries and explore the career path for Creative Director

Art Director

Art Directors oversee the visual aspects of a project. They work with designers, photographers, and other artists to create a cohesive and visually appealing vision. This course may be useful because it teaches you how to create custom graphics for web pages using HTML canvas and SVG documents. These skills can help you create more engaging and visually appealing projects.

See salaries and explore the career path for Art Director

Web Designer

Web Designers create the look and feel of websites. They work to create websites that are both visually appealing and user-friendly. This course will teach you how to create graphics for web pages using HTML canvas and SVG. This can give you the opportunity to supplement your work and be more competitive for jobs and freelance projects.

See salaries and explore the career path for Web Designer

Photographer

Photographers take pictures. They work to capture images that are both visually appealing and informative. This course will teach you how to create graphics for web pages using HTML canvas and SVG. This can give you the opportunity to supplement your work and be more competitive for jobs and freelance projects.

See salaries and explore the career path for Photographer

Illustrator

Illustrators create artwork for books, magazines, and other publications. They work to create images that are both visually appealing and informative.This course will teach you how to create graphics for web pages using HTML canvas and SVG. This can give you the opportunity to supplement your work and be more competitive for jobs and freelance projects.

See salaries and explore the career path for Illustrator

Reading list

We've selected 13 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Adding Graphics to Web Pages Using Canvas and SVG.

The Art of Computer Programming

Save

Classic work on computer programming. It covers a wide range of topics, from the fundamentals of programming to the art of algorithm design. It valuable resource for anyone who wants to learn more about computer programming.

Art of Computer Programming, The: Combinatorial...

Hardcover

$$$

The Pragmatic Programmer

Save

Provides a timeless guide to becoming a better programmer. It covers a wide range of topics, from the fundamentals of programming to the art of software design. It valuable resource for anyone who wants to improve their programming skills.

The Pragmatic Programmer: Your Journey To Mastery,...

Hardcover

Pragmatic Programmer, The: From Journeyman to Master

Kindle Edition

(Italiano) Pragmatic Programmer - Edizione del 20°...

Kindle Edition

(Italiano) Il Pragmatic Programmer: Guida per manovali del...

Adding Graphics to Web Pages Using Canvas and SVG

Here's a deal for you

What's inside

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses