Turning SVG into CSS is magic
HTML-код
- Опубликовано: 3 мар 2024
- I'm going to show you how to take your own vector design and place it on a website, whether you design in Illustrator, Figma, Inkscape, or wherever.
Instead of placing your SVG code into HTML, you can now place your SVG code into CSS. We do so using the CSS property background image.
In the video I show you some real use cases, and then show you how to convert SVG into CSS, and how to customize that on your website.
LINKS----
SVG to CSS Converter:
www.svgbackgrounds.com/tools/...
SVG OMG (optimizer):
jakearchibald.github.io/svgomg/
Website graphics sourced from:
www.svgbackgrounds.com/?...
Custom CSS Bullets (video):
• Create custom HTML bul...
Custom CSS Bullets (article):
www.svgbackgrounds.com/custom...
Buy me a coffee:
www.buymeacoffee.com/mattvisiwig 
Хобби
This is such an awesome video.
Straightforward, useful and without any flashy animations
Subscribed!
Thanks, but I spent days and days on the intro animation where the SVG icon slides into the laptop 😅
Your website and RUclips content are awesome. Thank you for all your work!
Hey thanks, I appreciate that! Going to keep at it :)
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
Thanks for Sharing Antoine! I'm trying to go full-time on SVGBackgrounds.com so I appreciate the nudge to keep at it.
wow just found this channel and cannot believe how good this is and the value you add. thank you so much
Hey, thank you so much! Glad you got something out of the video.
This was a really useful tip, and your website is amazing! Thank you
Thanks Marius, glad you think so :)
Very underrated channel, thanks for the info, keep doing this! :))
Hey, I appreciate this and plan on releasing videos more often.
Thanks for the info Matt! I didn't know your channel! Just subscribed! Greetings from Brazil!
Glad you found the video useful Alex!
Thanks, Matt. Will be watching your future videos :)
Awesome, I can't wait to watch them too
I really enjoyed the video, and found useful the use case mentioned, 😊
Great to hear Daniele!
this is so awesome. THANK YOU!!
Glad you think so!
That was lovely! Hermoso!
Thanks so much!
Thanks for this video.
Thank you for the comment :)
Thank you very much!
You're very welcome!
Here before this channel blows up
Thanks for the confidence boost :)
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 ?
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 RUclips (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 :)
How to trigger animation on objects within the svg (in layers) using browser events such as cursor hover?
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 'RUclips', you could change a few properties with hover like so...
#RUclips{
fill: black;
transition: fill .2s, stroke-width .2s, transform .2s;
}
#RUclips:hover{
fill: red;
stroke-width: 3px;
transform: translate(5px, 5px) rotate(15deg);
}
Disclaimer: I didn't test this CSS.
0:11 Missed the epic drop 1st time I watched .😅😅
I just sat here repeatedly clicking the 0:11, think I'm going to take the rest of the day off.
🔥🔥🔥👍🤝
🤝🙏
You can simply embed SVG files using HTML image tags or the various CSS options. You don’t need to inline your SVG files.
Have fun changing its color and being Nostradamus with CSS selectors. Especially if that icon is used in many places with slight modifications.
Can you use multiple background svg images in one div or would you place them in separate divs?
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!
To kill many birds with one stone. Best of all, wholesome lack of vulgarity. Subscribed to, Mr Visiwig. God bless you.
Thanks for the kind words :)
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.
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.
Does this technique trigger a http request?
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
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.
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.