How to Use SVGs with Base64

In this video, we'll talk about using SVG with Base64 to inject our SVG into the img tag or into CSS with the background property.

7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing

0:00 Intro / Beginning
1:36 SVG code inside an image tag
3:52 SVG code inside a CSS background url property

🤖 CODE

📹 OTHER VIDEOS IN THIS SERIES
+ Part 3 - Svgs with Base64 - You are here, THAT'S THIS VIDEO
+ Part 4 - SVG Sprites: Coming Soon

🔗 LINKS

[RDaneelOliwav]

Great video, as always!
To anyone using baseXY encodings, be aware of the size increase the encoding has to any image. Base64 can easily be 40% larger that its vector or bitmap variant

[DesignfulDev]

Came here after Career ReKaps with Kapehe. Great interview! Will definetly be following your content! Thanks for all the insights

[faissalabsml]

Come across your channel when I was looking to install oh my zsh yesterday and I'm so glad I did and at the same time sad that your channel isn't getting the recognition that it deserves. Hope that this will change soon tho, thank you for sharing your knowledge.

[svejdam]

Love those SVG series keep them coming please, I struggle with them little bit :D

[Viralplace]

Hope to see more videos! Usually I don’t use base 64 for my projects, just Svg (inline and not) or normal images. Hi from Italy! 🇮🇹

[chukwumdiebubeojinta]

I love your tutorials .... Please continue

[paulbuyswebdeveloper]

There is little good info on using Epics to manage async calls with redux. Maybe a topic for a future tutorial

[nicothefreelancer]

Hi, you know if variables work with SVG as a background in CSS? example: fill="var(--primary)" stroke="var(--primary)"