วีดีโอ

You're welcome!

Glad it helped :)

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.

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

I like that effect too. I don't have the code I used any more. For the HTML on the first two examples, you'll likely want to place the background class on the container that wraps the section and all its content.

@@MattVisiwig I started coding this up, but I can't figure out how to apply opacity on the svg when it's on the background. How would you accomplish this?

@@terhuneb, yeah, you can't place opacity easily on backgrounds. Instead, place it on the SVG. Use fill-opacity="0.5" on the path.

You're welcome

You're welcome

You're welcome!

Thanks!

Thanks for the kind words :)

Thanks!

Thanks!

This is an earlier video. Recorded the video using OBS (a streaming software), which allows you to customizes screens and transition between them live. Then took the video and edited in Descript.

@@MattVisiwig I meant the IDE 😅

@@zerobatsu LOL, I assumed that was the case at first, but I skimmed my video, and didn't see any IDE. Think there's only one instance a 02:44 The IDE is VS Code with extension SVG by jock.

Great point: a lot of Awwwards.com sites aim for the unique side of the scale, but the rest of us gotta make sure we remain highly useable, whilst adding unique designs and touches.

03:11 🤣 Reverse psychology!

Thanks for the kind words Lucian, and thanks for noticing I like being creative in everything I CREATE :)

Thanks for the kind words :)

I chose to use HTML color names (blue, green, etc.) because it's much easier to understand the color you'd expect for this demo. I personally opt for hex codes, but any valid HTML color code or color name would work.

Yes, I don't see why not. You could easily nest DIVs, where the animated gradient background is applied to the outer DIV and the transparent background is applied to the inner DIV. Alternatively, you can place multiple backgrounds comma separated in the background-image property, like so: background-image: url('image_1.svg'), url(image_2.png);

@@MattVisiwig maybe that could be your next video.......please?

@@boydriver2978 That's a good idea, but since that's not happening today, I also have an article I wrote, just scroll down to the "Layering multiple background images" section. www.svgbackgrounds.com/how-to-add-svgs-with-css-background-image/

You're welcome. Glad you found it useful.

Thanks, I watch tuts too and find myself walking away from the ones that slowly progress to the point.

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

There's a case for both and it may come down to preference. I touch SVG code a lot, so I prefer placing it in CSS because it reduces server requests and less files to manipulate if I wanted to change a color in the SVG code. If you're only using that list-style-image one page, it's probably better to load the image only for that page with an actual file and not the CSS that gets loaded on every single web page. All that said, if the SVG code file size amounts to 1kb, it doesn't matter much in the scheme of things, unless you're serving millions of pageviews daily.

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

Sounds like a great application

You're very welcome!

🤝🙏

Great to hear Daniele!

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

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!

Antoine, thanks for chiming in with solid tips!

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

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

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.

Thank you for the comment :)

Glad you think so!

Thanks Marius, glad you think so :)

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 (<UL>), 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.

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

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 TH-cam (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 :)

This is the way :)

Awesome, I can't wait to watch them too

Thanks for the confidence boost :)

I'm pretty sure you're right about currentColor. You're also very limited on hover effects... you'd need to duplicate the icon with a second fill color for a hover effect using background-image, but even then you couldn't use transition for a smooth animation.

Thanks so much!

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