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

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

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

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

Thanks Marius, glad you think so :)

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

Awesome, I can't wait to watch them too

Glad you found the video useful Alex!

Glad you think so!

Great to hear Daniele!

Thanks so much!

Thank you for the comment :)

You're very welcome!

Thanks for the confidence boost :)

Thanks for the kind words :)

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

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 KZfaq (that's me). For the average site, this is a great trick to have in your tool-box.

@@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 ! :)

@@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 :)

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

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 'KZfaq', you could change a few properties with hover like so... #KZfaq{ fill: black; transition: fill .2s, stroke-width .2s, transform .2s; } #KZfaq:hover{ fill: red; stroke-width: 3px; transform: translate(5px, 5px) rotate(15deg); } Disclaimer: I didn't test this CSS.

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.

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.

@@MattVisiwig that's great, thanks!

🤝🙏

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.

very cool@@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.

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.

@@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.