Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using CSS Variables

Well done!

You have completed Using CSS Variables!

Sign up for Treehouse Back to Library

Using CSS Variables with SVG

3:33 with Guil Hernandez

You learned that you can update a CSS variables inline within the style attribute of an element. Similarly, you can use CSS variables to modify both style and presentational attributes inside inline SVGs.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Similarly you can use CSS variables to modify both style and 0:00
    presentational attributes inside in line svgs. 0:00
    In this video i'll teach you how to create easily customizable 0:04
    SVG icons with CSS variables. 0:07
    To learn more about SVG be sure to watch the SVG videos posted in the teachers 0:09
    notes with this video. 0:13
    So at index.html, 0:14
    there's a symbol element that defines a reusable template of a heart icon. 0:17
    Below the symbol, the use element is used three times to copy or 0:22
    instantiate the symbol. 0:27
    As you can see, this creates three separate instances of the heart symbol. 0:29

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up