OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Pluralsight logo

Creating Graphics with Canvas and SVG

Mike Van Sickle

This course will teach you how to add custom graphics to your web pages using the HTML canvas and SVG documents.

Read more

This course will teach you how to add custom graphics to your web pages using the HTML canvas and SVG documents.

Almost every web site needs some graphics to provide the best possible user experience. In this course, Creating Graphics with 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

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
Getting Started with Canvas and SVG Graphics
Drawing Basic Shapes
Creating Arbitrary Shapes with Paths
Read more
Adding Text to Custom Graphics
Importing Images into Custom Graphics
Exploring the Unique Strengths of Canvas and SVG Graphics

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Provides foundational instruction that aligns with industry standards best practices
Students will learn how to create interactive graphics and add them to web pages
Explorez both SVG and Canvas for graphic creation and choose the best for their needs
Teaches skills and knowledge that are highly relevant in both industry and academia
Provides a comprehensive study of graphics and their implementation on web pages
Introduces software that is widely used in industry

Save this course

Save Creating Graphics with 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 Creating Graphics with Canvas and SVG with these activities:
Create an SVG Resource Compilation
Organize and expand your SVG knowledge base by compiling resources and materials.
Browse courses on SVG
Show steps
  • Gather tutorials, articles, and code snippets related to SVG.
  • Organize the resources into categories or topics.
  • Review and update the compilation regularly.
Read 'SVG Essentials'
Learn the fundamentals of SVG to better understand the course material and enhance your graphics skills.
View DOM Scripting: Web Design with JavaScript and... on Amazon
Show steps
  • Read chapters 1-3 to understand the basics of SVG.
  • Read chapters 4-6 to learn about SVG shapes and paths.
  • Read chapters 7-9 to explore advanced SVG techniques and concepts.
SVG Drawing Exercises
Sharpen your SVG drawing skills through repetitive exercises, improving your accuracy and proficiency.
Browse courses on SVG
Show steps
  • Practice drawing basic shapes (circles, squares, rectangles).
  • Create more complex shapes using paths and curves.
  • Combine shapes to form objects and illustrations.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Follow SVG Tutorials
Expand your SVG knowledge and explore advanced techniques through guided tutorials.
Browse courses on SVG
Show steps
  • Find tutorials on specific SVG topics (e.g., gradients, filters).
  • Follow the tutorial steps and implement the techniques.
  • Experiment with the code and explore different options.
Attend an SVG Workshop
Enhance your SVG knowledge and skills through hands-on workshops led by experts in the field.
Browse courses on SVG
Show steps
  • Research and find relevant SVG workshops.
  • Attend the workshop and actively participate in discussions.
  • Implement the techniques learned in your own projects.
Create an SVG Animation
Develop practical skills in creating interactive and engaging graphics for web pages.
Browse courses on SVG
Show steps
  • Design the animation sequence and storyboard.
  • Create the SVG elements and structure.
  • Add animations using CSS or JavaScript.
  • Test and refine the animation for optimal performance.
Build an Interactive SVG Dashboard
Apply your SVG skills to create a visually appealing and functional interactive dashboard for data visualization.
Browse courses on SVG
Show steps
  • Design the dashboard layout and components.
  • Create interactive SVG elements for data visualization.
  • Implement interactivity using JavaScript or CSS.
  • Test and refine the dashboard for usability and performance.

Career center

Learners who complete Creating Graphics with Canvas and SVG will develop knowledge and skills that may be useful to these careers:
Web Developer
Web Developers are responsible for building and maintaining websites and web applications. This course can help Web Developers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and functional websites. This course covers topics such as drawing basic shapes, creating arbitrary shapes with paths, and adding text to custom graphics, all of which are essential skills for Web Developers to have in order to create visually engaging websites.
See salaries and explore the career path for Web Developer
Front-End Developer
Front-End Developers are responsible for the user-facing side of websites and web applications. This course can help Front-End Developers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and interactive user interfaces. This course covers topics such as creating arbitrary shapes with paths, importing images into custom graphics, and adding text to custom graphics, all of which are essential skills for Front-End Developers to have in order to create visually engaging user interfaces.
See salaries and explore the career path for Front-End Developer
User Experience (UX) Designer
User Experience (UX) Designers are responsible for making digital products easy and enjoyable to use. This course can help UX Designers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and user-friendly interfaces. This course covers topics such as creating basic shapes, adding text to custom graphics, and importing images into custom graphics, all of which are essential skills for UX Designers to have in order to create engaging and effective user interfaces.
See salaries and explore the career path for User Experience (UX) Designer
Product Designer
Product Designers are responsible for designing and developing digital products. This course can help Product Designers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and user-friendly products. This course covers topics such as creating basic shapes, adding text to custom graphics, and importing images into custom graphics, all of which are essential skills for Product Designers to have in order to create engaging and effective products.
See salaries and explore the career path for Product Designer
Software Engineer
Software Engineers are responsible for designing, developing, and maintaining software systems. This course may be useful for Software Engineers who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating user interfaces for software applications. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, and importing images into custom graphics, all of which are essential skills for Software Engineers to have in order to create visually appealing user interfaces.
See salaries and explore the career path for Software Engineer
Instructional Designer
Instructional Designers develop, implement, and evaluate instructional programs and materials. This course can help Instructional Designers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging learning experiences. This course covers topics such as creating basic shapes, adding text to custom graphics, and importing images into custom graphics, all of which are essential skills for Instructional Designers to have in order to create engaging and effective learning experiences.
See salaries and explore the career path for Instructional Designer
Information Architect
Information Architects are responsible for organizing, structuring, and labeling web sites, intranets, online communities, and software applications to make them easy to find and use. This course can help Information Architects build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and user-friendly information architectures. This course covers topics such as creating basic shapes, adding text to custom graphics, and importing images into custom graphics, all of which are essential skills for Information Architects to have in order to create engaging and effective information architectures.
See salaries and explore the career path for Information Architect
Graphic designer
Graphic Designers are responsible for creating visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course can help Graphic Designers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging designs. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, adding text to custom graphics, and importing images into custom graphics, all of which are essential skills for Graphic Designers to have in order to create visually appealing designs.
See salaries and explore the career path for Graphic designer
E-Learning Developer
E-Learning Developers design, develop, and deliver online courses and learning experiences. This course can help E-Learning Developers build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging online learning experiences. This course covers topics such as creating basic shapes, adding text to custom graphics, and importing images into custom graphics, all of which are essential skills for E-Learning Developers to have in order to create engaging and effective online learning experiences.
See salaries and explore the career path for E-Learning Developer
Animator
Animators create visual special effects, animated characters, and other moving images for use in movies, television, video games, and other media. This course may be useful for Animators who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging animations. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, and importing images into custom graphics, all of which are essential skills for Animators to have in order to create visually appealing animations.
See salaries and explore the career path for Animator
Game Designer
Game Designers create the overall concept, rules, and other gameplay elements of video games. This course may be useful for Game Designers who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging game experiences. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, and adding text to custom graphics, all of which are essential skills for Game Designers to have in order to create visually appealing game experiences.
See salaries and explore the career path for Game Designer
Technical Writer
Technical Writers create documentation, such as user manuals, training guides, and reference materials, to help users understand and use technical products and services. This course may be useful for Technical Writers who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and easy-to-understand documentation. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, and adding text to custom graphics, all of which are essential skills for Technical Writers to have in order to create visually appealing documentation.
See salaries and explore the career path for Technical Writer
Video Editor
Video Editors edit video footage to create finished videos. This course may be useful for Video Editors who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging videos. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, and adding text to custom graphics, all of which are essential skills for Video Editors to have in order to create visually appealing videos.
See salaries and explore the career path for Video Editor
Photographer
Photographers take pictures of people, places, and things. This course may be useful for Photographers who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and engaging photographs. This course covers topics such as creating basic shapes, drawing arbitrary shapes with paths, and importing images into custom graphics, all of which are essential skills for Photographers to have in order to create visually appealing photographs.
See salaries and explore the career path for Photographer
Data Scientist
Data Scientists use their knowledge of mathematics, statistics, and computer science to extract knowledge from data. This course may be useful for Data Scientists who want to build a foundation in creating custom graphics for web pages, which is an important skill for creating visually appealing and easy-to-understand data visualizations.
See salaries and explore the career path for Data Scientist

Reading list

We've selected 11 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 Creating Graphics with Canvas and SVG.
Cover image
DOM Scripting
Save
Is an excellent introduction to SVG. It covers the basics of SVG, including how to create shapes, paths, and text. It also provides an overview of SVG interactivity and animation.
DOM Scripting: Web Design with JavaScript and the...
Paperback
$$$
Cover image
Beginning HTML5 and CSS3 For Dummies
Save
Provides a comprehensive overview of SVG. It covers everything from the basics of SVG to advanced topics such as SVG animation and interactivity.
Beginning HTML5 and CSS3 For Dummies
Paperback
$$
Beginning HTML5 and CSS3 For Dummies
Kindle Edition
$$
Computer Graphics
Save
Provides a comprehensive overview of computer graphics, including topics such as 2D and 3D graphics, animation, and image processing.
Computer Graphics: Principles And Practice, 3Rd...
Paperback
$$
Interactive Computer Graphics
Save
Provides an introduction to computer graphics, including interactive graphics, using OpenGL.
Interactive Computer Graphics
Paperback
Check
Interactive Computer Graphics
Kindle Edition
Check
Cover image
Core HTML5 2D Game Programming
Save
Provides a step-by-step guide to creating interactive web graphics with Canvas. It covers a variety of topics, including drawing shapes, creating animations, and working with touch events.
Core HTML5 2D Game Programming
Paperback
Check
Core HTML5 2D Game Programming
Kindle Edition
Check
Cover image
Advanced RenderMan
Save
Provides a detailed introduction to RenderMan, a powerful tool for creating CGI for motion pictures.
Advanced RenderMan: Creating CGI for Motion...
Paperback
$$
Cover image
JavaScript: The Definitive Guide
Save
Provides a comprehensive overview of the Canvas 2D API. It covers everything from the basics of the API to advanced topics such as creating animations and working with touch events.
JavaScript: The Definitive Guide
Paperback
Check
JavaScript: The Definitive Guide
Kindle Edition
Check
Cover image
An Integrated Introduction to Computer Graphics and...
Save
Provides an introduction to the art of computer graphics programming.
An Integrated Introduction to Computer Graphics and...
Paperback
Check
An Integrated Introduction to Computer Graphics and...
Kindle Edition
Check
Cover image
OpenGL Boxed Set
Save
Provides a detailed guide to OpenGL programming.
Official Opengl Library
Paperback
$$$
Cover image
Physics for Game Developers
Save
Provides an introduction to physics for game developers.
Physics for Game Developers: Science, math, and...
Paperback
$$
Physics for Game Developers: Science, math, and...
Kindle Edition
$$
Cover image
Game Engine Architecture, Third Edition
Save
Provides an overview of game engine architecture.
Game Engine Architecture, Third Edition
Hardcover
$$$
Game Engine Architecture, Third Edition
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Creating Graphics with Canvas and SVG.
Adding Graphics to Web Pages Using Canvas and SVG
Most relevant
Rapid Website Design with Bootstrap
Most relevant
SVG Fundamentals
Most relevant
Getting Started with Django CMS
Most relevant
Pygal 2: Python Data Playbook
Most relevant
Programming Foundations with JavaScript, HTML and CSS
Creating Responsive Pages with CSS FlexBox
Introduction to D3.js
Optimizing and Deploying a Website
Course image
Time
107 hours
Level
Intermediate
Via
Pluralsight
Instructor
Mike Van Sickle
Language
English
Good to know
Provides foundational instruction that aligns with industry standards best practices
Students will learn how to create interactive graphics and add them to web pages
Explorez both SVG and Canvas for graphic creation and choose the best for their needs
Teaches skills and knowledge that are highly relevant in both industry and academia
Provides a comprehensive study of graphics and their implementation on web pages
Introduces software that is widely used in industry
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser