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

SVG Fundamentals

Brian Treese

This course covers the essentials of SVG, including what they are, how to create them, how to use them, common elements, sprites, animation, and more.

Read more

This course covers the essentials of SVG, including what they are, how to create them, how to use them, common elements, sprites, animation, and more.

This course will familiarize web designers and developers with the fundamentals of the scalable vector graphics image format. Viewers will learn what scalable vector graphics are, how to create them, different ways to implement them, when it makes sense to use them, a variety of what can be done with them, and what to look out for when using them.

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

Introduction to SVG
Working with SVG Code
D.R.Y. Out Inline SVG Code with SVG "Sprites"
Animating SVG
Read more
SVG Optimization, Browser Support, Resources, and Examples

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches the fundamentals of SVG, which is standard in the web design/development industry
Taught by Brian Treese, an expert in web design and development, including SVG
Covers a range of topics on SVG, from creation to implementation
Suitable for a range of learners, including beginners, who want to learn SVG
This course is part of a series, indicating a potential for comprehensive coverage of the topic

Save this course

Save SVG Fundamentals 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 SVG Fundamentals with these activities:
Review prior knowledge of HTML and CSS
Familiarize yourself with the fundamentals of HTML and CSS before starting the course.
Browse courses on HTML
Show steps
  • Review your notes or textbooks
  • Complete practice problems
Follow online tutorials on SVG
Enhance your understanding of SVG by following step-by-step tutorials.
Browse courses on SVG
Show steps
  • Identify reputable online resources
  • Follow instructions to create SVGs
Design SVG elements in a practical setting
Apply your SVG knowledge by creating elements for a live website or project.
Browse courses on SVG
Show steps
  • Choose a design project
  • Create custom SVG elements
  • Integrate elements into your project
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a personal SVG portfolio
Showcase your SVG designs and demonstrate your mastery of the format.
Browse courses on SVG
Show steps
  • Curate your best SVG projects
  • Design a portfolio website
  • Publish your portfolio
Develop an SVG-based web component
Deepen your understanding of SVG by creating reusable components for web applications.
Browse courses on SVG
Show steps
  • Identify a reusable SVG element
  • Develop the web component
  • Test and refine your component
Participate in an SVG design competition
Test your abilities and showcase your SVG skills in a competitive setting.
Browse courses on SVG
Show steps
  • Find a relevant competition
  • Design and submit your SVG entry
  • Seek feedback and improve your skills
Contribute to an open-source SVG library
Advance your SVG expertise by collaborating on a real-world project.
Browse courses on SVG
Show steps
  • Identify a suitable library
  • Review the codebase
  • Contribute bug fixes or new features

Career center

Learners who complete SVG Fundamentals will develop knowledge and skills that may be useful to these careers:
Graphic designer
Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This SVG Fundamentals course can be the foundation for building skills in this career since SVG is a form of vector graphics essential for graphic and web designers.
See salaries and explore the career path for Graphic designer
Web Developer
Web Developers design and create websites. They are responsible for the look and feel of a website, as well as its functionality. The SVG Fundamentals course may be useful for building foundational skills for those interested in web development, as SVG is widely used in web development.
See salaries and explore the career path for Web Developer
Illustrator
Illustrators create visual images to communicate ideas and stories. They may work in a variety of media, including print, digital, and video. The SVG Fundamentals course may be useful to Illustrators by providing an introduction to working with SVG, which is a key file format for digital illustration.
See salaries and explore the career path for Illustrator
Art Director
Art Directors oversee the visual aspects of a project, including the design, layout, and typography. They work with a team of creative professionals to ensure that the project meets the client's needs. The SVG Fundamentals course may be useful to those interested in becoming Art Directors, as SVG is a common vector graphic format used across a variety of industries.
See salaries and explore the career path for Art Director
User Experience Designer
User Experience Designers are responsible for the overall user experience of a product or service. They work to make sure that the product is easy to use and enjoyable. The SVG Fundamentals course can help prepare for this role as it's used by UX designers to create interactive elements and graphics for websites and apps.
See salaries and explore the career path for User Experience Designer
Motion Graphics Designer
Motion Graphics Designers create animated graphics for use in film, television, and video games. They work with a variety of software to create their animations. This SVG Fundamentals course may be useful for Motion Graphics Designers as they need to be familiar with SVG, a format used to create vector graphics for use in animation.
See salaries and explore the career path for Motion Graphics Designer
Game Developer
Game Developers create video games. They work with a team of programmers, artists, and designers to bring their games to life. Taking the SVG Fundamentals course may help aspiring Game Developers, as SVG is a format used to create vector graphics for use in games.
See salaries and explore the career path for Game Developer
Web Designer
Web Designers create the look and feel of websites. They work with a team of developers to ensure that the website is both visually appealing and functional. The SVG Fundamentals course can help prepare for this role by providing the skills to create and implement SVG graphics on websites.
See salaries and explore the career path for Web Designer
Technical Writer
Technical Writers create documentation for software, hardware, and other technical products. They work with a team of engineers and product managers to ensure that the documentation is accurate and easy to understand. An SVG Fundamentals course may be helpful for those interested in this career, as SVG is a common format in technical documentation.
See salaries and explore the career path for Technical Writer
Technical Illustrator
Technical Illustrators create diagrams, charts, and other visual aids to explain technical concepts. They work with a team of engineers and scientists to ensure that the illustrations are accurate and easy to understand. The SVG Fundamentals course provides skills useful in this field as SVG is a common format for creating technical illustrations.
See salaries and explore the career path for Technical Illustrator
E-Learning Developer
E-Learning Developers create online courses and other educational materials. They work with a team of instructional designers and subject matter experts to ensure that the materials are engaging and effective. This SVG Fundamentals course can provide an introduction to working with SVG, which is a format used for creating interactive e-learning content.
See salaries and explore the career path for E-Learning Developer
UX Researcher
UX Researchers study how users interact with products and services. They work with a team of designers and developers to improve the user experience. The SVG Fundamentals course may be useful for UX Researchers, as SVG is useful to create prototypes and mockups for user testing.
See salaries and explore the career path for UX Researcher
Product Designer
Product Designers create physical and digital products. They work with a team of engineers, designers, and marketers to bring their products to market. This SVG Fundamentals course can help prepare for this role as it teaches skills needed to create and implement SVG graphics in product design.
See salaries and explore the career path for Product Designer
Marketing Designer
Marketing Designers create marketing materials, such as brochures, flyers, and social media posts. They work with a team of marketers to ensure that the materials are visually appealing and effective. The SVG Fundamentals course may be useful for this role as SVG is a format used to create graphics for marketing materials.
See salaries and explore the career path for Marketing Designer
Software Engineer
Software Engineers design, develop, and maintain software applications. They work with a team of programmers, designers, and testers to ensure that the software is reliable and efficient. The SVG Fundamentals course may be useful for Software Engineers, as SVG is used in the development of web and mobile applications.
See salaries and explore the career path for Software Engineer

Reading list

We've selected nine 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 SVG Fundamentals.
Cover image
SVG Text Layout
Save
Provides a comprehensive overview of the new features in SVG 3. It covers everything from the basics to advanced techniques, such as animation and interactivity.
SVG Text Layout
Paperback
Check
SVG Text Layout
Kindle Edition
Check
Cover image
DOM Scripting
Save
Provides a quick and easy-to-follow introduction to SVG. It covers everything you need to know to get up and running, from the basics of creating SVGs to more advanced techniques.
DOM Scripting: Web Design with JavaScript and the...
Paperback
$$$
Cover image
Using SVG with CSS3 and HTML5
Save
Provides a comprehensive overview of how to use CSS to style SVG graphics. It covers everything from the basics to advanced techniques, such as animation and interactivity.
Using SVG with CSS3 and HTML5
Paperback
Check
Using SVG with CSS3 and HTML5
Kindle Edition
Check
Cover image
UX Design with Figma
Save
Is written for designers who are new to SVG. It provides a visual introduction to the format, with a focus on practical applications.
UX Design with Figma
Paperback
Check
UX Design with Figma
Kindle Edition
Check
Cover image
Beginning XML
Save
Provides a comprehensive introduction to SVG, covering everything from the basics to more advanced topics like animations and interactivity.
Beginning XML
Paperback
Check
Beginning XML
Kindle Edition
Check
Cover image
Head First HTML and CSS
Save
Provides a practical guide to using SVG in web development, with step-by-step instructions and plenty of examples.
Head First HTML and CSS
Paperback
Check
Head First HTML and CSS
Kindle Edition
Check
Cover image
CSS: The Definitive Guide
Save
Covers the basics of SVG and how to use it in conjunction with CSS to create dynamic graphics.
CSS: The Definitive Guide: Web Layout and...
Paperback
$$$
CSS: The Definitive Guide: Visual Presentation for...
Paperback
$$$
CSS: The Definitive Guide
Kindle Edition
$$$
Cover image
Adaptive Web Design
Save
Provides a comprehensive guide to using SVG in web design, with step-by-step instructions and plenty of examples.
Adaptive Web Design: Crafting Rich Experiences With...
Paperback
$$
Adaptive Web Design: Crafting Rich Experiences with...
Kindle Edition
$$
Cover image
Introducing Elixir
Save
Provides a concise guide to the SVG standard, covering everything from the basics to more advanced topics.
Introducing Elixir
Paperback
Check
Introducing Elixir
Kindle Edition
Check

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 SVG Fundamentals.
Create motion graphics for a website using Adobe...
Most relevant
Make Any Image into a Vector Graphic with Inkscape
Most relevant
Draw an Isometric Snow Globe with Inkscape
Most relevant
Draw an Isometric Sign Post with Inkscape
Most relevant
Creating Perspective Visuals Using Adobe Illustrator
Most relevant
Draw an Isometric House with Inkscape
Most relevant
Create Improved Graphic Design Using VECTR-Part II
Creating Graphics with Canvas and SVG
Creating Custom Vector Graphic Design Using VECTR : Part I
Course image
Time
89 hours
Level
Intermediate
Via
Pluralsight
Instructor
Brian Treese
Language
English
Good to know
Teaches the fundamentals of SVG, which is standard in the web design/development industry
Taught by Brian Treese, an expert in web design and development, including SVG
Covers a range of topics on SVG, from creation to implementation
Suitable for a range of learners, including beginners, who want to learn SVG
This course is part of a series, indicating a potential for comprehensive coverage of the topic
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