HTML5 Tutorials #19 - SVG Inline and CSS Styling

Learn how you can have SVG code directly in your HTML document. You also learn how to style SVG with CSS.

Subscribe to Level Up Pro for extra features!

Subscribe to the Level Up Newsletter

For questions post in the comments or visit:

To Support Level Up Tuts:

Simple cloud hosting, built for developers.:

[flywittzbeats]

I'm flabbergasted lol. This video is 9 years old and still the only thing that has helped me with svg manipulation lol. Good god. Thank you so so much!

[Barnardrab]

You just got yourself a new subscriber.
I'm excited about this SVG thing as I see it as potentially useful for developing browser based games.

[lynerjy]

Scott you're such a good teacher <3

[rizqyfahmi]

Wow.. it's amazing Scott!
finally, I understand the awesome techonlogy of SVG. Thank you :)

[Mrmegacalvin]

Nice videos! Really grateful. Waiting on your next tutorial video on HTML5.

[flicksonj]

where is the link for the w3 documentation?

[Asimov]

Is it possible to load the svg into css as a background image and still manipulate the css. I need to use it in the before: css so that I can make icons for buttons.

[BayDeveloper]

Thank's man, I love your videos.

[karastudio]

Thank you, Scott. How would handle the situation when you need to have this icon several times on one page but in different colors ?

[Rayberk]

I LOVE YOU SO MUCH I HOPE U GET EVERYTHING UWANT TYSM

[valerychen]

Great tutorial! I read that SVG are not cacheable. Does that mean if your logo is an SVG, then pages with SVG are not cached?

[rylyshane]

For some reason or another this did not work with an SVG using multiple groups I had exported from iDraw. I switched to a single shape exported from Sketch and had no problems however. Any insight into this or would I need to post some code? 

[hfeldadna]

I hear more and more on accessibility (ARIA) in the internet,
I understood that are some rules are written in HTML (like aria, alt for images, ...), and some rules are needed in JS (for changing contrast, increasing / decreasing the font, ....).

Please can you create a video for Accessibility section too?

Thank you in advance :)

[bernixb]

Thank you so much for this tut. How can we put conditionals like "if" in the hover property?

[CarlNeuDitters]

Thank you as well; a fantastic practical introduction. My own svg files are quite long and thanks to your video I have figured out how to target the font colour of the text; however, I can not find a working font-size attribute. There is a "font-size" attribute in the svg's style tag, but it has no effect on the size of text. Do you have any ideas what to do?

<g

[ericmartinez]

Great videos on SVGs. I just stumbled upon them. OK, so I'm wondering what scenarios there be not to use a SVG in terms to displaying logos and other vector images on a page?

[marble_wraith]

Please note this (and the clip before) has quite a big problem. What is it?

Ok so use case, typical website, lets take youtube for example; How many icons you reckon are on this page?

1. Youtube logo (top left)
2. Hamburger icon next to it (menu)

(Inside the menu)
3. What to watch
4. My channel
5. My Subscriptions
6. History
7. Watch later
8. Different Hamburger icon
9. Browse Channels
10. Manage subscriptions
11. Thumbs up
12. Thumbs down

... As you can see it's quickly becoming quite unwieldy, and at this point some people are probably saying "why wouldn't you just use an icon font?", a link for that:


TL:DR; while it is less backwards compatible (must be IE9+, android 4.1+) it's easier to align and manipulate SVG's.



Now for the problem.

How do you limit the number of HTTP requests streamlining the site and improving mobile experience?

(at least until everything migrates to HTTP2 but that's another thing entirely)

- img tags (as in the previous video of the series) doesn't solve this.
- css doesn't solve this (it just defers the requests to the CSS object model)

You could inline every svg... but (as examined) there can be quite a few and it doesn't really get much easier to edit.

Solution... SVG sprites, and to that end i request an update to the gulp series, with these tools:

(for minifying, careful you save correctly with illustrator it can be glitchy)

(for creating the sprite)

I believe there's also a way to create reliable PNG fallbacks but im still experimenting with that.

Related links:

Thanks for all the good work, i've learned alot from this channel.

[gwenaeloppitz]

Hey man, thank you for your tutorial, I can't modify the style of my svg in css (what you show is not working). I'm using tsx for my code

[garthsstare]

Hey man, great tutorials !Please give me link to all properties that I can change on svg...

[zhuolintsai]

Oh god, I recognized the poster on the wall. 「人皮燈籠」....it's creepy man...