Turning SVG into CSS is magic

[@ogadit]

This is such an awesome video. Straightforward, useful and without any flashy animations Subscribed!

[@MattVisiwig]

Thanks, but I spent days and days on the intro animation where the SVG icon slides into the laptop 😅

[@digitalsahara6670]

wow just found this channel and cannot believe how good this is and the value you add. thank you so much

[@MattVisiwig]

Hey, thank you so much! Glad you got something out of the video.

[@Totomenu]

Subscribed 👍 and than tried to add you links to my bookmarks, just to realise that I had already bookmarked your website years ago. I think it proves that videos where you show how to use it are very useful

[@MattVisiwig]

Thanks for Sharing Antoine! I'm trying to go full-time on SVGBackgrounds.com so I appreciate the nudge to keep at it.

[@Blackkorso]

Your website and KZbin content are awesome. Thank you for all your work!

[@MattVisiwig]

Hey thanks, I appreciate that! Going to keep at it :)

[@ei1589]

Very underrated channel, thanks for the info, keep doing this! :))

[@MattVisiwig]

Hey, I appreciate this and plan on releasing videos more often.

[@mariusthgersen1614]

This was a really useful tip, and your website is amazing! Thank you

[@MattVisiwig]

Thanks Marius, glad you think so :)

[@alexmacol228]

Thanks for the info Matt! I didn't know your channel! Just subscribed! Greetings from Brazil!

[@MattVisiwig]

Glad you found the video useful Alex!

[@DanieleManca1983]

I really enjoyed the video, and found useful the use case mentioned, 😊

[@MattVisiwig]

Great to hear Daniele!

[@bobhearinger]

Thanks, Matt. Will be watching your future videos :)

[@MattVisiwig]

Awesome, I can't wait to watch them too

[@realalgato]

Here before this channel blows up

[@MattVisiwig]

Thanks for the confidence boost :)

[@JeremyVienney]

Great content ! Is it not a bad practice to add in css data:image instead directly inline them on the DOM ? I learned from Harry Roberts that icons or images defined like that in css was always a red flag because it was render blocking the paint. Your way make lighter the first document response but add weight to css entries files and could add a delay to the paint render process. What do you think about it ?

[@MattVisiwig]

Thanks Jeremy, good question: One man's bad practice is another man's treasure. In my examples, we place a single icon (1kb of data) as a list bullet or in a search bar - where it's hard to place inline SVG. In the scheme of things, I don't think this could be considered in the same league as other bad practices like scroll-jacking, dark patterns, or ignoring accessibility. I'm also not advocating this method to replace inline SVG or to be used for an entire icon system. But I do think there are some situations where this is super useful. If you're website is serving millions of visitors a day, you're probably nit-picking over every decision and pixel - including this decision. But you're also probably not taking advice from some rando on KZbin (that's me). For the average site, this is a great trick to have in your tool-box.

[@JeremyVienney]

@@MattVisiwig Thanks Matt, It's interesting because I've been thinking about this optimisation since yesterday. I usually inline everything and use them as sprites, but I have to admit that on some projects, this creates a real burden on the html document and inevitably has an impact on the construction of the DOM tree. And you're right, on 1kb icons of this type, it's better to do that and add a class to an HTML element than to add a svg>use N times on the page... In fact it's mainly the parsing of base64 into css that's problematic (decoding and transforming into base64 adds too much weight). Your technique for simple elements that are repeated often is in fact probably the best way of managing a site's decorative elements, because you retain control over their styles (I didn't know that svg can be styled by its classes in base:image css) and you can extract them all into a dedicated css with ultra-long caching (svg additions and modifications are rare). So even if it has an impact on the time it takes to paint a page with large SVGs, it's probably negligible compared to the time saved downloading and parsing the html page. I'd have to do some comparative tests with the different techniques, if I can find the time to do that I'll come back and share them with you. PS: you're not a random guy on youtube and your video makes me want to see more. I must even have been a customer on a previous viersion of your site ! :)

[@MattVisiwig]

@@JeremyVienney sounds great, would love to know the results if you find the time to run tests. PSS: thanks, this videos reception def makes me want to post more :)

[@tejasthorat]

0:11 Missed the epic drop 1st time I watched .😅😅

[@MattVisiwig]

I just sat here repeatedly clicking the 0:11, think I'm going to take the rest of the day off.

[@knecks7374]

this is so awesome. THANK YOU!!

[@MattVisiwig]

Glad you think so!

[@jfftck]

This is something that is not recommended, but it isn’t a terrible idea. As others have pointed out, it has many drawbacks and that is why I can’t recommend using it for anything more than icons.

[@MattVisiwig]

Don't forget the main use case that "isn't a terrible idea" is backgrounds. Using inline SVG for backgrounds is doable, but clunky. Instead I would much rather let background-image and the other background properties do what they do best.

[@cebuanoninoy]

Thanks for this video.

[@MattVisiwig]

Thank you for the comment :)

[@Linuxdirk]

You can simply embed SVG files using HTML image tags or the various CSS options. You don’t need to inline your SVG files.

[@theseangle]

Have fun changing its color and being Nostradamus with CSS selectors. Especially if that icon is used in many places with slight modifications.

[@sarphusgaming3542]

I'm assuming you can't animate the lines when doing this because it's an image instead of SVG, right? I ask because I'm trying to and the stroke-dasharray does not appear to impact it. I'm assuming it works this way because it's an image.

[@MattVisiwig]

Correct, you can't manipulate the SVG as a Data URI with CSS, in that case you'd want to inline the SVG. That said, you could also use SMIL to animate the SVG, which is SVG's native animation language. That can work if you don't need to trigger or manipulate the animation.

[@sarphusgaming3542]

@@MattVisiwig I'm trying to work with SVGs within a SCADA platform called Ignition Perspective. It's limited because the HTML isn't really exposed. It's an IDE for building webpages that control industrial equipment.

[@bustozoni]

That was lovely! Hermoso!

[@MattVisiwig]

Thanks so much!

[@heatherfarnham3185]

Can you use multiple background svg images in one div or would you place them in separate divs?

[@MattVisiwig]

Great question. You can place multiple backgrounds on a single container with this technique. Simply comma separate the backgrounds as the value of the background-image. You can comma separate other values to properties like background--size and background-position-or use a single value if it applies to multiple backgrounds.

[@heatherfarnham3185]

@@MattVisiwig that's great, thanks!

[@nyitigvilaga]

Thank you very much!

[@MattVisiwig]

You're very welcome!

[@codedjango]

How to trigger animation on objects within the svg (in layers) using browser events such as cursor hover?

[@MattVisiwig]

This question deserves it's own video. If you plan on using :hover (css) I'd highly recommend inline SVG placed in the HTML document over what this video demonstrates (SVG in CSS). This is because you'd be able to manipulate the SVG better through CSS. For example if the SVG has an ID of 'KZbin', you could change a few properties with hover like so... #KZbin{ fill: black; transition: fill .2s, stroke-width .2s, transform .2s; } #KZbin:hover{ fill: red; stroke-width: 3px; transform: translate(5px, 5px) rotate(15deg); } Disclaimer: I didn't test this CSS.

[@johnsonb8727]

Does this technique trigger a http request?

[@MattVisiwig]

Nope. There's a request to get your CSS file, but not the Data URI. It's the equivalent of inlining SVG in your CSS.

[@johnsonb8727]

very cool@@MattVisiwig

[@septimusforster]

To kill many birds with one stone. Best of all, wholesome lack of vulgarity. Subscribed to, Mr Visiwig. God bless you.

[@MattVisiwig]

Thanks for the kind words :)

[@michaelkamko]

🔥🔥🔥👍🤝

[@MattVisiwig]

🤝🙏

[@diegognoatto8706]

very bad idea mate, we use it inline for many reasons but the most important one is to have full controll of it. try to animate a something or even change the color if you do that. its a pain for some things and for most is impossible. i bet you didnt mentioned that "very small detail" because you selling premuim svg backgrounds to non-coders newbies that got no idea what they going into. thats called bad faith.

[@MattVisiwig]

Caught me red handed mate. But I will point out my free and paid graphics all work as inline SVG too. As with any idea, there are times and places for it. I gave two specific use cases that make sense. Ever try placing inline SVG in an input? You can't. Instead you need to use a pseudo element or the much easier method: an SVG as a background-image. You could use inline SVG within an unorder list (), but you'd need to duplicate the code for every bullet or better yet, just place the SVG in CSS and let CSS do what it does best. I do need to give you credit for making one great point: "to have full control" and "animate" the SVG, it should be inline. Agree. There are lots of reasons to use inline SVG, and I only gave one in this video - not to trick anyone - but to keep my video on topic and to the point.

[@NicoHeinrich]

If you want an inline SVG in an input (e.g. magnifier in search field), you simply add padding to the end of the input and position that icon absolute.

[@AppyDave]

@@MattVisiwig excellent video @MattVisiwig, good production value and as any content creator knows, you can't cover every edge case in a video if you want people to fiind it interesting, awesome work.