In this episode, Amy and James discuss all things SVGs: what is, why, and when to reach for it, and seven different ways to get an SVG on the page, and the pros and cons of each method.

Sponsors

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit softwareresidency.com/careers

DatoCMS

DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with real-time updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."

For more information, visit datocms.com

Show Notes

0:00 Introduction
3:50 What is an SVG?
- Raster vs Vector
6:21 Benefits to using an SVG
- Change the Size
- Small File Size
- Change the color within your code
- Easily Cached
9:51 Seven Different Ways to get an SVG on the Page
11:28 Sponsor - ZEAL
12:59 Option 1 - Image Tag
14:03 Option 2 - Inline SVG tag
15:53 Option 3 - CSS as a background Image
16:18 Option 4 - CSS, as a Mask
18:20 Sponsor - Vercel
19:29 Option 5 - SVG directly within our Image tag
21:20 Option 6 - Base64 or UTF8 with as a CSS Background Image
21:47 Option 7 - An SVG Sprite
22:34 Writing your own SVGs
27:00 Going Deep on a Specific Topic, The Broken Comb
28:34 Resources
- Amy's SVG Series on YouTube
- Sarah Drasner - Course on Frontend Masters, SVG Essentials & Animation, v2
- Sarah Drasner - SVG Animations: From Common UX Implementations to Complex Responsive Animation
- Chris Coyier - Practical SVG
29:19 Sponsor - DatoCMS
30:12 Grab Bag Questions
30:56 Picks and Plugs
31:07 Amy's Pick - Animal Cable Clips
32:00 Amy's Plug - Advent of CSS
32:32 James's Pick - Castle on Hulu
33:34 James's Plug - Advent of JavaScript