Video Tutorial: Intro to SVG | Noble Desktop Blog

Discover the intricacies of SVG (Scalable Vector Graphics) in web design through our informative live stream. Learn how to save graphics as SVG in Adobe, Illustrator, Sketch, and Adobe Experience Design (XD), as well as how to style SVG with CSS and animate SVG with GSAP.

Key Insights

The live stream provides a comprehensive overview of SVG (Scalable Vector Graphics).
It offers insights into the various ways SVG can be effectively used in webpages.
Participants will learn tips and best practices for saving graphics as SVG using Adobe, Illustrator, Sketch, and Adobe Experience Design (XD).
Understanding how to ensure your web server supports SVG is also covered.
The stream delves into the art of styling SVG with CSS for improved web aesthetics.
Animating SVG with the GreenSock Animation Platform (GSAP) is another key topic presented.

If you’re not saving your vector graphics (icons, logos, etc) as SVG for use in your webpages, you should be! Instead of using pixel-based PNGs, keep the graphics as their native vectors (so they download faster and can be used at any size). As great as that is, you can even use JavaScript to animate them!

Download the Presentation Slides
Download Demo Files

LEARN MORE:
HTML5 Animation with GreenSock Class (attend in New York City or Live Online)
HTML5 Animation with GreenSock Workbook (eBook or Print)
Web Design Classes (attend in New York City or Live Online)
Web Design Books (eBook or Print)

Here are some of the topics you’ll learn about in this live stream:

Overview of SVG
Ways to use SVG in webpages
Tips and best practices for saving graphics as SVG in Adobe
Illustrator, Sketch, and Adobe Experience Design (XD)
Making sure your web server supports SVG
Styling SVG with CSS
Animating SVG with the GreenSock Animation Platform (GSAP)

Learn more in these courses

Web Design Certificate

Weekdays only
162 hours
Open to beginners
Financing available
1:1 Mentoring

In this certificate program, you will become a well-rounded Web Designer and learn to design webpages, code them with HTML & CSS, and JavaScript, and build websites with WordPress, allowing you to create a diverse portfolio to showcase your skills to potential employers or clients.

View course

Full-Stack Web Development Certificate

Weekdays only
420 hours
Open to beginners
Financing available
1:1 Mentoring

Gain the skills and knowledge to become a Full Stack Developer and meet the growing demand for professionals who can develop and maintain web applications. This project-oriented course teaches you how to code websites from scratch, and you'll build a portfolio of working web applications to showcase to potential employers.

View course

Graphic Design Certificate

Weekdays, sundays, or evenings
84 hours
Open to beginners
Financing available
1:1 Mentoring

Begin your journey as a professional graphic designer by learning the essential skills and tools used by industry experts. Gain hands-on experience in Adobe Photoshop, InDesign, and Illustrator, and create a stunning portfolio to showcase your talent to potential employers or clients.

View course