SVG (Scalable Vector Graphics) 2024 - Inside the Code from Udemy

This course is all about SVGs - Scalable Vector Graphics. We cover where to find and download SVGs, how to author SVGs in programs such as Inkscape and Illustrator, and ways to add SVGs to your web pages. But the primary focus is toward understanding the underlying text-based code of SVGs. We show how to view, comprehend, write, and modify markup by detailing the definitions and uses of numerous SVG elements and attributes. We cover such topics as:

How to code for basic shapes such as circles, lines, curves, and polygons.

How to understand paths and the commands used for drawing them.

How to add artistic text elements to a SVG.

How to target and style specific SVG elements using CSS or presentation attributes.

How to understand viewports, viewBox, sizing, and positioning of SVG elements.

How SVG elements can be transformed or animated.

How to implement gradients, filters, clip-paths, and masks.

How to create, modify, or remove SVG elements from a web page using JavaScript.

How titles, descriptions, roles, and aria attributes can be used for SVG accessibility and SEO.

Prior coding experience is not absolutely necessary as this course provides a good overview of SVG fundamentals. But to really get the most out of the lessons, it helps to have knowledge of or experience with HTML5 and CSS3.

What's inside

Syllabus

Learn what SVGs are, why they are important, where they can be found, and how they can be made.

Course Introduction

SVG vs Raster Graphics and SVG Advantages for the Web

Websites where you can download SVGs, authoring programs for making SVGs, and intro to hand-coding SVGs

Downloading, Authoring, or Coding SVGs

Helpful Tools for this Course

Adding SVGs to a Web Page

How to view and begin understanding SVG code elements and attributes

Introduction to SVG Code Elements

SVG Visual Elements - Basic Shapes

SVG Structural, Container, and Descriptive Elements

Introduction to SVG Attributes

How to style SVG elements using presentation attributes and CSS.

How to Style SVG Elements

Understand the SVG element and how to begin coding using path commands.

Introduction to SVG Paths

SVG Path Commands: MoveTo and LineTo

SVG Path Commands: Curves and Arcs

Viewing and Modifying SVG Paths

Understand the , , and elements for adding text to SVGs.

Introduction to SVG Text

SVG Text on a Path

Understand the SVG viewport, viewBox, coordinate systems, and origin points.

Introduction to SVG Sizing and Positioning

SVG Aspect Ratios

How to transform and animate SVG elements

SVG Transforms

SVG Animations - Part 1

SVG Animations - Part 2

SVG Line Drawings

Learn about SVG gradients, filters, clip-paths, and masks.

Linear and Radial Gradients

SVG Filters

Clip-Paths and Masks

Use basic JavaScript to style, transform, or animate SVG elements

Using JavaScript to Manipulate SVG Elements

Understand good practices for making your SVG-containing web pages accessible and search engine friendly.

SVG Accessibility and SEO

Concluding Remarks

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 (Scalable Vector Graphics) 2024 - Inside the Code with these activities:

Review HTML and CSS Fundamentals

Show steps

Solidify your understanding of HTML and CSS, as the course assumes familiarity with these technologies. Refreshing these skills will make learning SVG concepts easier.

Browse courses on CSS3

Show steps

Review HTML structure and common tags.
Practice CSS selectors, properties, and values.
Revisit box model, positioning, and layout techniques.

Read 'SVG Essentials' by J. David Eisenberg

Show steps

Supplement your learning with a comprehensive guide to SVG. This book will provide a deeper understanding of the concepts covered in the course.

View Web Development with ReasonML on Amazon

Show steps

Obtain a copy of 'SVG Essentials'.
Read the chapters relevant to the current course topics.
Experiment with the code examples provided in the book.

Create a Simple SVG Icon Set

Show steps

Practice coding basic SVG shapes by designing a set of icons. This hands-on activity will reinforce your understanding of SVG elements and attributes.

Show steps

Choose a theme for your icon set (e.g., social media, navigation).
Design 5-10 simple icons using basic SVG shapes (circle, rectangle, path).
Style your icons using CSS or presentation attributes.
Test your icons in a web browser.

Four other activities

Expand to see all activities and additional details

Show all seven activities

SVG Path Command Exercises

Show steps

Master SVG path commands through focused exercises. This will improve your ability to create complex shapes and illustrations.

Show steps

Find online resources with SVG path command exercises.
Practice drawing different shapes using various path commands (M, L, C, S, Q, A, Z).
Analyze and modify existing SVG paths to understand how they work.

Build an Animated SVG Loader

Show steps

Apply your knowledge of SVG animations to create a visually appealing loader. This project will solidify your understanding of transforms, animations, and timing functions.

Show steps

Design a loader animation using SVG elements.
Implement the animation using CSS or SMIL.
Experiment with different animation properties and timing functions.
Integrate the loader into a web page.

Read 'Practical SVG' by Chris Coyier

Show steps

Explore practical applications of SVG in web development. This book will provide real-world examples and best practices for using SVG in your projects.

View Practical SVG on Amazon

Show steps

Obtain a copy of 'Practical SVG'.
Focus on chapters relevant to your interests (e.g., icons, animations).
Try implementing the techniques described in the book.

Contribute to an Open Source SVG Project

Show steps

Gain experience working with SVG in a collaborative environment. Contributing to open source will expose you to different coding styles and project workflows.

Show steps

Find an open-source project that uses SVG (e.g., icon library, charting library).
Identify a bug or feature request that you can address.
Submit a pull request with your changes.
Respond to feedback from the project maintainers.

Career center

Learners who complete SVG (Scalable Vector Graphics) 2024 - Inside the Code will develop knowledge and skills that may be useful to these careers:

Frontend Engineer

The frontend engineer builds the user interface and user experience of websites and applications. This course helps provide a comprehensive understanding of SVGs, enabling the frontend engineer to incorporate high-quality vector graphics into their projects. Being able to code, style, animate, and manipulate SVGs using JavaScript directly benefits the creation of dynamic and engaging user interfaces. The course's coverage of SVG accessibility and SEO practices may be invaluable for ensuring that web applications are both user-friendly and search engine optimized. Learning how to add artistic text elements to a SVG helps improve design and accessibility.

See salaries and explore the career path for Frontend Engineer

Web Developer

A web developer works to design and implement websites and web applications. This course provides a solid understanding of SVGs, which are an important part of modern web development. Knowing how to work with SVG code, style it with CSS, and manipulate it with JavaScript gives web developers more control over the appearance and behavior of the graphics on their websites. Taking this course may help you craft interactive and visually appealing user interfaces. It is useful for designing responsive websites that adapt to different screen sizes and resolutions, which is critical for providing a consistent user experience across devices.

See salaries and explore the career path for Web Developer

Digital Artist

The digital artist creates artwork using digital tools and software. This course may be helpful to expand the digital artist's repertoire and create vector-based artwork for the web. Understanding SVG code and how to manipulate it allows for creating custom graphics and animations that can be seamlessly integrated into web projects. Learning how to add artistic text elements to a SVG helps improve design. The coverage of SVG accessibility and SEO practices ensures that artwork is both visually appealing and accessible.

See salaries and explore the career path for Digital Artist

UI Designer

A UI designer focuses on the visual layout and interactive elements of a user interface. This course may enhance a UI designer's ability to create visually appealing and effective interfaces through the use of SVGs. Understanding SVG code, styling, and animation techniques allows the UI designer to implement sophisticated graphics and interactions. The course's emphasis on SVG accessibility and SEO guidelines ensures that designs are not only aesthetically pleasing but also usable and discoverable. Learning how to understand paths and the commands used for drawing them helps expand design choices. To be a successful UI designer, it is paramount to know how to add artistic text elements to a SVG.

See salaries and explore the career path for UI Designer

UX Designer

The UX designer researches, designs, and evaluates user experiences to ensure that products are usable, accessible, and enjoyable. While UX design goes beyond visual design, understanding SVGs can help a UX designer create more engaging and interactive prototypes and interfaces. This course's focus on SVG accessibility is especially relevant, as it emphasizes the importance of creating inclusive designs that cater to all users. The ability to manipulate SVGs with JavaScript allows for the creation of dynamic prototypes that closely mimic the final product. Learning about SVG accessibility and SEO enhances the user experience.

See salaries and explore the career path for UX Designer

Graphic designer

A graphic designer creates visual concepts to communicate ideas that inspire, inform, and captivate consumers. This course expands the graphic designer's toolkit by providing in-depth knowledge of SVGs. Understanding SVG code and how to manipulate it allows them to create custom graphics that can be seamlessly integrated into web projects. Knowledge of sizing and positioning of SVG elements is critical for graphic design. The course's detailed exploration of gradients, filters, clip-paths, and masks opens up new creative possibilities. The graphic designer may find the ability to target and style specific SVG elements using CSS beneficial.

See salaries and explore the career path for Graphic designer

Motion Graphics Designer

A motion graphics designer creates animated graphics and visual effects for various media. This course introduces the motion graphics designer to the world of SVG animations. The lessons on SVG transforms and animations provide a solid foundation for creating dynamic and engaging motion graphics for the web. Understanding how to manipulate SVG code and use JavaScript for animation allows for fine-tuned control over the final product. This course may also be helpful to review SVG accessibility and SEO.

See salaries and explore the career path for Motion Graphics Designer

Technical Artist

The technical artist bridges the gap between artists and programmers in game development and other interactive media. This course helps them understand how to optimize and implement SVGs in their projects. The ability to manipulate SVG code and use JavaScript for animation allows for creating efficient and visually appealing graphics. The skills learned in this course may be helpful to improve the overall performance and look of interactive applications. This course may be helpful for understanding SVG elements such as filters, clip-paths, and masks.

See salaries and explore the career path for Technical Artist

Data Visualization Specialist

A data visualization specialist transforms raw data into compelling visual representations that convey insights and trends. This course may be helpful to learn how to create custom charts, graphs, and infographics. The ability to manipulate SVG code and use JavaScript for animation adds a layer of interactivity to data visualizations. The lessons on SVG sizing, positioning, accessibility, and SEO practices ensures that visualizations are both informative and accessible. The specialist may use the knowledge from this course to present data in a creative manner.

See salaries and explore the career path for Data Visualization Specialist

Digital Marketing Specialist

The digital marketing specialist develops and implements marketing strategies to promote products and services online. This course may add another dimension to their marketing efforts. Understanding SVG code and how to optimize it may facilitate the creation of engaging and SEO-friendly content. The coverage of SVG accessibility ensures that marketing materials are accessible to a wider audience. Learning about SVG accessibility and SEO enhances digital marketing efforts.

See salaries and explore the career path for Digital Marketing Specialist

Content Creator

Content creators produce engaging material for various platforms. This course may be useful to add a level of visual sophistication to their content. Understanding SVG code and how to manipulate it may enable them to create custom graphics and animations that stand out. The coverage of SVG accessibility and SEO practices ensures that content is both visually appealing and easy to find. The content creator may also find the ability to use JavaScript to manipulate SVG elements interesting.

See salaries and explore the career path for Content Creator

Instructional Designer

An instructional designer creates engaging and effective learning experiences. This course may be useful to enhance visual elements within educational materials. Gaining an understanding of SVG code allows for the creation of custom graphics and animations that explain complex concepts. The coverage of SVG accessibility ensures that learning materials are accessible to all students. Instructional designers may be able to craft more interactive and illustrative content.

See salaries and explore the career path for Instructional Designer

eLearning Developer

The eLearning developer builds online courses and training modules. This course may be helpful to enhance the visual and interactive elements of their projects. Understanding SVG code and how to manipulate it allows them to create custom graphics and animations that explain complex concepts. The coverage of SVG accessibility ensures that learning materials are accessible to all students. The ability to use JavaScript to manipulate SVG elements adds another layer of interactivity.

See salaries and explore the career path for eLearning Developer

SEO Specialist

A search engine optimization specialist analyzes, reviews and implements changes to websites so they are optimized for search engines. This course may allow specialist to create graphic elements to boost a website's search ranking. Knowledge of SVG accessibility ensures that the graphics are readable and benefit all potential users. Also helpful is knowledge of SVG titles, descriptions, roles, and area attributes. This course may increase the SEO specialist's reach.

See salaries and explore the career path for SEO Specialist

Data Analyst

A data analyst collects, cleans, and analyzes data to identify trends and insights. While data analysis is primarily focused on numbers, this course may enable the data analyst to communicate findings more effectively through custom visualizations using SVGs. Understanding SVG code and how to manipulate it allows for creating clear and compelling charts and graphs. The data analyst may benefit from the course's coverage of SVG accessibility.

See salaries and explore the career path for Data Analyst

Reading list

We've selected two 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 (Scalable Vector Graphics) 2024 - Inside the Code.

Web Development with ReasonML

Save

Provides a comprehensive guide to SVG, covering everything from basic shapes to advanced animation techniques. It serves as an excellent reference for understanding the SVG specification and implementing complex designs. It is particularly useful for understanding the nuances of SVG code and how it interacts with other web technologies. This book valuable resource for both beginners and experienced developers.

Web Development with ReasonML

Paperback

Check price

Web Development with ReasonML

Kindle Edition

Check price

Practical SVG

Save

Offers a practical approach to using SVG in web development. It covers various use cases, including icons, illustrations, and animations. It is particularly helpful for understanding how to optimize SVG for performance and accessibility. This book great resource for developers who want to incorporate SVG into their projects effectively.

Practical SVG

Kindle Edition

SVG (Scalable Vector Graphics) 2024 - Inside the Code

What's inside

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses