From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Overview of the method

Overview of the method

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Overview of the method

“

- [Voiceover] In this chapter, we'll look at a different method for displaying SVGs in a web document. Rather than either creating and referencing individual SVG files for each graphic or inlining each SVG manually or with the help of SVG injector, we'll create what's known as an SVG Sprite. The SVG sprite is a single SVG that contains multiple graphics or symbols much like a regular document can contain multiple paragraphs or letters. Each of these symbols has a unique ID that can be called in and displayed wherever we want them to appear. SVG sprite allow us to consolidate groups of SVGs into more manageable chunks, and we can use them either as inline elements in the HTML document or external referenced elements, and as a bonus, symbols from SVG sprite can be styled with regular CSS and manipulated using javascript, just like inline SVGs, because as far as a browser is concerned, they are inline SVGs. In this chapter, I'll show you how to make in document SVG sprites manually, and…

Contents