How to Work with SVGs in Figma, HTML, and CSS | Optimized SVG Icons

[@jemjem8902]

I feel like an artist by just watching this. Very informative Thanks!

[@buildux]

Thanks so much! Let me know what topics you would like to see in future videos.

[@boomerangfish3558]

I have been trying to master SVG's once and for all since 2 weeks ago, and the only thing I really needed was this video. Thank you so much!

[@buildux]

I'm so glad to hear that! Glad you found it useful.

[@boomerangfish3558]

@@buildux Like, my friends tell me "hey at least you learned from the other videos", but no. I really just needed your video. You are a godsend

[@number1neek]

The visual centering is a killer tip! Thanks 👍 Personally, I don't love that the music is on throughout the video because I tend to have my own music on while I'm working. But the content is great, keep it up :D

[@buildux]

Thanks for watching! And I agree about the music. Soon after this video, I started only using music in the intro/outro.

[@CuttingEdgeSchool]

This is so so well made, absolutely premium content. Please continue these videos! I hope you reach a million subscribers soon! 100/100

[@buildux]

Thank you so much! I have many more videos planned and I appreciate all the support 🙇‍♂️

[@Alfreditop]

Dude you are such a pro! I've been watching a lot of your videos and learned a lot! Seriously Thanks so much for putting the effort of creating the content!

[@buildux]

Thanks for the kind feedback! Really appreciate it. I'm glad you're getting value out of the videos.

[@lifeok6188]

Excellent explanation. Great job 👍

[@buildux]

Thank you! Glad you liked the video. What other topics would you like to see me cover?

[@TheGolden90s]

Lots of great tips here. Thank You!

[@buildux]

You're welcome! Thanks for watching.

[@dxdn5217]

i really like the music and this was very helpful

[@buildux]

I'm glad you liked the video! Thanks for watching.

[@theretroman3862]

Good example indeed. Can I suggest to lower the background music for future videos? I could actually do very well without any music as well.

[@buildux]

Definitely! I will try to mix the background music lower and also see how it feels with no music. Thanks for the feedback!

[@buildux]

In the latest video, I left the music out during narration and I actually like it much better. Thanks so much for suggesting this improvement.

[@lucaspessoapereira]

About the 4th step: there is a way of calculating the exact optical center. Basically you just need to find the center of each line of the triangle and intersect them. Voilà, you got yourself the perfect optical center. But I guess this would make things a bit slower.

[@buildux]

That's such a helpful tip! It may take a little extra effort, but doing it right with confidence makes it worth the added time to measure things out. Thanks so much for teaching me something new!

[@lucaspessoapereira]

@@buildux Glad I could help!

[@DM-nj9vw]

When I drag my svg's over it it puts a file name above them. How do I get this off? Thanks!

[@bunnyboy7008]

Great video! I'm designing my own SVGs for my portfolio website. This video was helpful. You've my sub! I would appreciate more such videos which focus on tips & tricks to improve your SVGs & the like of possible. Thanks!

[@Oswee]

So great video!! Thank you so much! Would like to know about thumb rules to set the viewbox padding. How do you determine it. Like.. some icons are square, some rectangles and other shapes, so the padding somewhat shifts. With padding i mean that white space between viewbox and the icon itself.

[@buildux]

Great question! This usually comes down to decisions in the design tool. When creating SVGs, I start with a "bounding box" (which will become the `viewBox` in code) that has the layout dimensions I'm looking for. I typically stick to increments of 2, 4, or 8 pixels. For example, most icons I create are 24x24, 20x20, 16x16, etc. depending on the project and desired size. Within this box, I will design the icon to fit neatly within the bounding box. Sometimes, icons don't take up the full space, so I make sure spacing is consistent between the icon and it's bounding box, and an icon set might have some rules to make sure they all look good together, such as keeping a 2px gap between each icon and it's box. When I export the SVG out of the design tool, it's width and height should be nice, even numbers that work well in my layout. I set the `viewBox` to include the width and height, just so everything's at a 1:1 scale. For example, a 24x24 icon would be ``. This process is same whether the SVG is square or rectangular. My main advice is start by picking the outer dimension you want, let's say 80px wide by 40px tall, and go from there!

[@Oswee]

@@buildux Thank you. Practicing now by vectorizing some png icon set i found online. :)

[@_mariannajackeline]

Sooo so good!

[@buildux]

Thank you!

[@audiblevideo]

BEM class naming in your CSS? How needed is that for the granularity of your design? Pro's and con's? Regardless it seems like a good habit ;)

[@buildux]

I use BEM on projects of all scales so it's my go-to approach for class naming. I think the most important thing is having a convention and sticking to it, regardless of what that convention is.

[@fakjearaztridvactyry]

@@buildux Hello, I'm a beginner. Great video, thank you! I find using BEM in code and atomic CVS inside the Figma rather confusing. Isn't there some way to unify them? What is your opinion?

[@stefcioagoodboy]

Why putting SVG within our HTML and instead use CSS and background property with an encoded Data-URL? Which technique is better?

[@buildux]

Inline SVGs have many advantages over other techniques. You can easily control their sizing and styling with attributes and CSS classes, you have more control over their accessibility, and they are very performant when optimized. Data-URIs can technically have a smaller byte size, but they are more resource-intensive to decode vs. having the SVGs inline. Another advantage is if CSS fails to load, inline SVGs can still render with the HTML. Lastly, this approach is the simplest to implement and manage at scale.

[@stefcioagoodboy]

@@buildux Thanks for your detailed answer. Do you ever use Data URLs for other type of use case? I'm wondering also what technique you use for Font loading?

[@buildux]

@@stefcioagoodboy I personally don't make use of Data URIs, as I haven't found a need for them. I just stick with optimized inline SVGs and optimized image files. For fonts, I use self-hosted fonts using `@font-face` in CSS. I also make use of the `font-display: swap;` property for performance, and use variable fonts when available. This video from my CRM Inbox series shows how I set up my fonts and other assets: kzbin.info/www/bejne/i2q0e2NvmZynb6s

[@stefcioagoodboy]

@@buildux Fantastic I will take a look :)

[@SYNALEK]

What is the font name? Thanks for useful hints - clean video, without noise.

[@buildux]

If you are referring to the logo font used in the SVG, that is Open Sans. For all the Build UX branding, I use IBM Plex Sans. Both are free, open source, and found on Google Fonts.

[@SYNALEK]

​@@buildux IBM Plex Sans looks great. Thanks!

[@afshinator]

Nice job. Cut the volume of the music please, it competes with your voice and wins a lot.

[@buildux]

Thanks for watching! In more recent videos I leave the music out for this reason. Sorry it got in the way of the video.

[@aschultz007]

how do i make the code not have a rollover state if the icon color is black?

[@buildux]

I want to make sure I understand your question fully. Are you trying to change the icon's fill color on hover? Or, do you have an icon in a link or button and want to prevent the icon from changing color on hover? Or, something else? Thanks for helping me understand the question. I think we can find an easy fix together.

[@aschultz007]

Yes, I'm trying to change the icon's color on hover or after being selected. Sorry for the confusion.

[@buildux]

Ahh I see! Here's my preferred approach: HTML: … CSS: .button { color: white; } .button:hover { color: grey; } .button__icon { fill: currentColor; } With this approach, the icon matches whatever color you want for the button's text color, so you don't have to maintain it separately. Does this help for what you want to achieve?

[@aschultz007]

@@buildux Yes, thank you for the extra help. Much appreciated as my devs live like easy use of icons.

[@buildux]

@@aschultz007 Of course! Any time.

[@sydneyjupiter979]

It does'nt work for me

[@buildux]

What part of the process isn't working for you?

[@sydneyjupiter979]

@@buildux It’s working now 😃. I just forgot to link the css file. My bad 😂

[@buildux]

@@sydneyjupiter979 No worries! Glad you were able to fix it.