Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Include an SVG with an Image Tag

    Damon BauerDamon Bauer

    Since an SVG is really just an image, it can be included on a page just like any other image, using an img tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

    There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

    If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.

    htmlHTML 5
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 We'll start out by adding an image tag and provide it a path to an svg, and add a class of icon. This svg that we're linking to doesn't have a width or height attribute. It automatically scales to fill its container, in this case, the body element.

    00:16 We'll go ahead and duplicate this image, and I'll add another one. This time, I'm going to add an icon-small class and an icon-large class. Because we're just using an image tag, we can resize the svg by targeting the class of icon and adding a width, and let's say, of two em and a height of two em. Now, any images, as you can see, with the icon class will be resized.

    00:46 With this approach, we can set up a few different sizes using our class modifiers. Let's target icon-small, give it a width of one em and height one em. I'll do the same for icon-large and change its width and height to three em.

    Discuss

    Discuss