Thanks alot! Took me forever to even understand it myself, I'm glad I managed to figure out a clear way to explain it. It's such a weird concept.

No cap

I could not agree .more. Excellent!

I'm with you.

Kevin is the god of CSS

So glad that the video helped you out Nasir!

Glad that the video helped clear things up :). It's a hard concept, I'm happy that the Photoshop example worked!

Glad I could help! It is such a strange thing, even when you understand the idea behind it.

it is basically a camera view

Such a hard concept to talk about, and even harder to visualize. I'm glad that I was able to make some sense of it!

Yup, it's a strange one. I hope I did okay!

Glad that I was able to help, and thanks for the sub!

I'm glad that you've found it helpful!

I could be wrong on this, as I'm just getting into SVGs, but from what I understand, full on sprite systems were popular at one point, but inline SVGs tend to be more popular nowadays, since they lend us more control.... might be why you havent' seen a ton on them. I'll see if I can't come up with some better usecases though.

Currently I am trying to build an icon set for ecommerce. So there are a dozen or so that I need on every page load, e.g. add to cart, wishlist, search, view as grid/list, navigation arrows, stars for reviews and so on. I am also trying to use no presentational markup in the document, so that means HTML5 document structure rather than lots of div/span/class/id fluff in the HTML. I then style by elements rather than classes. This means lots of pseudo selectors/elements in the CSS. Which is fine, particularly since my SASS files are properly commented. I am using CSS grid all the way, so the document should be perfect for screen readers, even if the styled version shown in the browser moves content around quite a bit. Initially I had a lot of SVG tags in the document and a SVG spritesheet at the foot of the page, with this containing my icons as elements. This was going well as I could also do things in PHP to embed locale specific titles and descriptions in the spritesheet symbols. But this spritesheet was getting bigger and bigger. I also ran into persistent problems of the SVG in the document wanting to render at default 300x150 size. Not wanting to put x/y sizes in the spritesheet symbols I then independently worked out that there were advantages to the Lea Verou approach - embedding the SVG in the CSS. Everything is a compromise, and I also realised that this was not so good when it came to changing the colours of icons on hover or selected states. The symbol approach wasn't that good either when it came to that even if using currentColor for stroke/fill. Everything is a compromise and I didn't like the hacky nature of the SVGs in the stylesheet plus the filter: invert/brightness/hue-rotate way of colouring. But I do want to have no javascript as an option - so pages can download with one HTML document, one stylesheet and product images. In this way I can have an extremely speedy web page that is not re-downloading the many SVG icons with each page load. I did have a pure javascript solution that read an external SVG spritesheet and inserted it into the DOM so I only needed tags in the document. This worked very nicely and I may revisit this approach for brand logos. However, for the core furniture icons I have decided that the CSS embedded SVG stylesheet with the 'filter:' hack is the best compromise there is for my ecommerce project with SVG icons shown with ::before or ::after pseudo elements and no 'junk' in my 'pure HTML5' document. Although the project is just mine I hope to do other people's projects and therefore what I make has to be maintainable. The Lea Verou approach of having the SVG data+xml listed in the stylesheet with '\' newlines makes it maintainable enough, if not ideal as the '#' references need to be escaped as '%023'. But I can live with that and I think the next developer can too... By using the filter: invert + brightness + saturation + hue rotate 'trick' I can make fill and stroke declarations be just 'black' rather than '%023efa52e' (or whatever). If I also put the filter into a CSS variable and change that variable then I can globally style the monochrome icons consistently. So the goal of one document and one CSS file is achieved. Separation of concerns is achieved. All looks good on webkit/firefox and even edge. I can also edit the icons in the live document by using normal inspector tools and write that back into my SCSS files by using Chrome's Workspaces feature. Although I use the online SVGO tool to see what I could further optimise (e.g. merging a rotate and transform) and I do use Inkscape for doodling, I can do icons in the browser, to see them in context. I have to say that PHPstorm is actually best for drawing icons though, even though it is a PHP IDE! Inkscape doesn't let you centre the 0,0 origin in a 48x48 icon so might as well do it code style. I am getting a good 60fps with my grid layout pages at the moment but now I have the 'filter' trick as a requirement for the icons I am thinking of using that for the page links too. So that means setting links to black and then using the filter used for the CSS embedded SVG to colorise the icon text links too. Rachel Andrews usually has in her talks a few words about not using polyfills for older browsers. Since I am going for highly accessible markup with this new Grid/SVG shiny I am also taking her approach for how best to do backwardly compatible stuff. Javascript is only for progressive enhancement for my project so I am also trying to get drop-down menus to work on CSS only, with feature detection, e.g. media queries for 'pointer'. At a later stage I might put javascript back in to make the menus better, but not there yet... Regarding media queries, I have discovered that it is best to use a media query to set a variable, e.g. 'display: unset', 'display:none' to do something such as hide a 'next page' label on mobile or small screens. This results in more concise and maintainable CSS. There is some Australian guy into fluid typography who does talks including that trick. I am no longer using 'breakpoints' as such, feature detection and CSS grid is getting it to work for me, with fluid typography thrown into the mix. Spite/revenge is a good motivator - it was for Lamborghini when Ferrari would not sell him a car because he was a lowly tractor making industrialist. So my current project is 'spite' driven - I have made ecommerce projects for many people as a backend developer but not liked the frontend development aspect. So, out of 'spite' I am motivated to make something load ten times faster than anything else... The women of tech have been the main leading lights, they seem to speak my language about document structure + CSS grid whereas the men seem to be making things more complex! PWA service workers are good though, as is using mod_pagespeed to create image src-sets, but I am not interested in this frankenstein CSS written by JS stuff with every page element having ten class tags... Anyway, I must crack on, I hope my work is to be interrupted by a new video from yourself soon!!!

As per earlier comment, Mike Riethmuller shows how to set CSS variables to do responsive things neatly with minimal stylesheet. kzfaq.info/get/bejne/pqxgo7aox8C6aY0.html

My current state of mind is use vanilla JS unless you have a good reason not to :). Vanilla JS has come a long, long way, and apart from certain specific use cases I feel like jQuery isn't as useful as it used to be. Vue, Angular and React all are more for web applications that deal with state (logged in, logged out, as a very simple example) and more complicated things like that.

That's one way to see it, yes :D

Totally weird! I'd love to have been a fly on the wall when they were discussing the spec and how it would work. lol

Actually I need to be more precise: That "fill" doesn't work properly only when I use SVG object (e.g. circle) as a my cursor (e.g. instead of pointer). There is possibility to make custom cursor shape/object. But if I use SVGs Chrome does not display its color out of hex. It only takes pre-established values/colors (like "red", "blue".. etc). Have You noticed such a behavior before?

Nothing in the works yet, but maybe at one point.

You could just scale the entire svg element, might be easier. Set a width for the whole thing as a percentage perhaps?

Hey, look at this easy example Each rectangle starts at another point: 0,0 ; 150;0 ; 300,0. So they are all in one svg but they don't have to start all in the upper left corner at 0,0. You can change their respective starting points and have them overlap etc. as shown in the video [A beginners guide to SVG part 2].