Noble Desktop Blog | Tutorials, Resources, Tips & Tricks

Video Tutorial: Intro to SVG

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)

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

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

Back to Blog
Yelp Facebook LinkedIn YouTube Twitter Instagram