We may earn an affiliate commission when you visit our partners.
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.
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.
Register for this course and see more details by visiting:
OpenCourser.com/course/gkeor7/svg
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
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
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
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Review prior knowledge of HTML and CSS
Show steps
Familiarize yourself with the fundamentals of HTML and CSS before starting the course.
Browse courses on
HTML
Show steps
Show steps
Show steps
- Review your notes or textbooks
- Complete practice problems
Follow online tutorials on SVG
Show steps
Enhance your understanding of SVG by following step-by-step tutorials.
Browse courses on
SVG
Show steps
Show steps
Show steps
- Identify reputable online resources
- Follow instructions to create SVGs
Design SVG elements in a practical setting
Show steps
Apply your SVG knowledge by creating elements for a live website or project.
Browse courses on
SVG
Show steps
Show steps
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
Show steps
Showcase your SVG designs and demonstrate your mastery of the format.
Browse courses on
SVG
Show steps
Show steps
Show steps
- Curate your best SVG projects
- Design a portfolio website
- Publish your portfolio
Develop an SVG-based web component
Show steps
Deepen your understanding of SVG by creating reusable components for web applications.
Browse courses on
SVG
Show steps
Show steps
Show steps
- Identify a reusable SVG element
- Develop the web component
- Test and refine your component
Participate in an SVG design competition
Show steps
Test your abilities and showcase your SVG skills in a competitive setting.
Browse courses on
SVG
Show steps
Show steps
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
Show steps
Advance your SVG expertise by collaborating on a real-world project.
Browse courses on
SVG
Show steps
Show steps
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 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.
Web Developer
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.
Illustrator
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.
Art Director
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.
User Experience Designer
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.
Motion Graphics 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.
Game Developer
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.
Web Designer
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.
Technical Writer
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.
Technical Illustrator
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.
E-Learning Developer
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.
UX Researcher
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.
Product Designer
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.
Marketing 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.
Software Engineer
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.
For more career information including salaries, visit:
OpenCourser.com/course/gkeor7/svg
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.
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.
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.
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.
Save
Is written for designers who are new to SVG. It provides a visual introduction to the format, with a focus on practical applications.
Save
Provides a comprehensive introduction to SVG, covering everything from the basics to more advanced topics like animations and interactivity.
Provides a practical guide to using SVG in web development, with step-by-step instructions and plenty of examples.
Covers the basics of SVG and how to use it in conjunction with CSS to create dynamic graphics.
Save
Provides a comprehensive guide to using SVG in web design, with step-by-step instructions and plenty of examples.
Save
Provides a concise guide to the SVG standard, covering everything from the basics to more advanced topics.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/gkeor7/svg
Share
Similar courses
Here are nine courses similar to
SVG Fundamentals.
Create motion graphics for a website using Adobe Illustrator
OpenCourser.com/course/mclp5n/create
Create motion graphics for a website using Adobe...
Most relevant
Make Any Image into a Vector Graphic with Inkscape
OpenCourser.com/course/q7sw09/make
Make Any Image into a Vector Graphic with Inkscape
Most relevant
Draw an Isometric Snow Globe with Inkscape
OpenCourser.com/course/r3up0r/draw
Draw an Isometric Snow Globe with Inkscape
Most relevant
Draw an Isometric Sign Post with Inkscape
OpenCourser.com/course/0bcsat/draw
Draw an Isometric Sign Post with Inkscape
Most relevant
Creating Perspective Visuals Using Adobe Illustrator
OpenCourser.com/course/5ykisz/creating
Creating Perspective Visuals Using Adobe Illustrator
Most relevant
Draw an Isometric House with Inkscape
OpenCourser.com/course/opswyc/draw
Draw an Isometric House with Inkscape
Most relevant
Create Improved Graphic Design Using VECTR-Part II
OpenCourser.com/course/jh724f/create
Create Improved Graphic Design Using VECTR-Part II
Creating Graphics with Canvas and SVG
OpenCourser.com/course/hn0tr1/creating
Creating Graphics with Canvas and SVG
Creating Custom Vector Graphic Design Using VECTR : Part I
OpenCourser.com/course/mu5anh/creating
Creating Custom Vector Graphic Design Using VECTR : Part I
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
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