SVGs in CSS

In this video, we talk about how to use SVGs within your CSS. You can add them as a background image or as a mask. We'll also touch on vendor prefixes, Autoprefixer, and browser support.
🎁 FREE SVG CHEAT SHEET: selfteachme.ck.page/ee58f2eb85
7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing
0:00 Intro / Beginning
0:58 Add an SVG as a Background Image in CSS
2:31 Masks in CSS
3:27 Vendor Prefixes and Autoprefixer
5:12 Browser Support and caniuse.com
🤖 CODE
+ Final Code on CodePen: codepen.io/ahaywood/pen/yLaqPXY
📹 OTHER VIDEOS IN THIS SERIES
- Playlist: • Comprehensive Guide to...
- Part 1 - Getting Started with SVGs: • Getting Started with SVGs
- Part 3 - SVG with Base64: Coming Soon
- Part 4 - SVG Sprites: Coming Soon
🔗 LINKS
+ CodePen - codepen.io
+ Can I Use - caniuse.com/
👉🏻 Get Updates and Exclusive content at selfteach.me
💥 SelfTeach.me is a Zeal show: codingzeal.com

[@charlie-george]

I love your short snappy videos, Amy. Perfect bite-size tips that are actually memorable!

[@SelfTeachMe]

Thanks Charlie!

[@kmaximoff]

I watched many videos, before I found yours, which helped a lot! Thank you Stranger! :)

[@rammrras9683]

This series it's what I needed in SVG

[@JamesQQuick]

Great stuff!! Your editing is great :) Also, super helpful content!

[@SelfTeachMe]

Thank you!

[@vasilemidrigan50]

I had a hard time struggling with styling SVG, thank you very much! Nice style!!!

[@odogwu-1918]

wow! your content is all I have been looking for, for the past week. You said it all. I am subscribing ASAP

[@chamomile_.]

Thanks you!

[@SelfTeachMe]

You’re welcome!

[@carlosz1858]

thank you amy, you got it, i was facin the svg's troubles, i love the video

[@SelfTeachMe]

I'm so glad!

[@FitLife6767]

Thank you so much!

[@Auth0]

This is a great video!!

[@SelfTeachMe]

Thanks!

[@LeonardoFigola]

Beautiful eyes... Beautiful tutorial. Thanks!

[@SelfTeachMe]

Thanks!

[@hugorafaelalves3922]

Nice job. i don't knowed the mask-image property. thanks

[@SelfTeachMe]

Thanks! Glad it was helpful

[@GamerKittyEuphoric]

can you go over how to host an SVG File you can use -- for example when you're creating layouts for blogs like Tumbler, but they don't allow asset files to be dropped into the file server. You have to get them from external sources. (Font Awesome doesn't work on these sites either as the script is blocked)

[@ShinyBudew]

what do i do if i want the svg to animate dynamically?

[@arlindooliveiracodinha4215]

full-screen image clipped with SVG vector?

[@SelfTeachMe]

Oooh! That's a good use case! -- I made this video, kind of along that topic: ruclips.net/video/0dbgj2YCT6U/видео.html

[@omarhassan2548]

you cant't change the background color but you can invert it, in the css file target the svg and type this { filter: invert(1); } note that this will invert the color not changing it !

[@SelfTeachMe]

Thanks for pointing that out… A few months ago this snippet was going around gist.github.com/lnikkila/ae5685661c23d0d7f636 because it would give your site “instant dark mode.” I’m not super crazy about it because I think inverted colors look terrible, but maybe that’s just me?

[@omarhassan2548]

@@SelfTeachMe yes, sometimes inverted colors look terrible, I Think filters are the easy way to change colors of png's and svg's, also there's another way to change colors by using Adobe Photoshop I will consider this the hard way because not all developers knows how to use Adobe products but it's another useful soloution to change colors of anything on the planet, lol

[@SelfTeachMe]

@@omarhassan2548 haha. Yes.

[@nicoregules]

quick note: Edge uses Chomium now, so -webkit- applies to it too

[@SelfTeachMe]

Thanks for pointing that out. I went off these docs: developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

[@nicoregules]

@@SelfTeachMe it applies for somewhat older browsers, actually Opera is also based on Chromium since a couple of years now, so the - o - prefix is practically useless because Opera updates it self so...