SVG Explained in 100 Seconds

What are Scalable Vector Graphics 🤏? How are vector images different than raster images? Learn the fundamentals of SVG in 100 seconds!

References:

#webdev #html #100SecondsOfCode

Install the quiz app 🤓

Use code lORhwXd2 for 25% off your first payment.

My VS Code Theme

- Atom One Dark
- vscode-icons
- Fira Code Font

[Fireship]

Stay tuned for "Beyond SVG" in a few days... You can do amazing things with SVG from a design perspective.

[brianevans]

I had no idea it was even possible to manually draw bezier curves without the use of software like illustrator. This is definitely one i would have watched beyond 100 seconds for

[alexhooper]

I had no idea the inside of an svg file was just markup. This opens the door to so many possibilities

[jdubina]

Coolest things I’ve learned about svg’s is that you can make changes to them with JavaScript, like a prop in react and change a color or text on the svg. Additionally you can put mathematical equations in svgs. SVGs are underrated IMO.

[coach]

I love all the "fashionable" 100 seconds. But these little gems is what I personally appreciate most. Thank you.

[furball_vixie]

Today I learned: SVG isnt a binary format but rather a format thats actually simmiliar to HTML

[mohammadoulabi]

I have been doing frontend for 5 years, I started building open sources and contributing to existing ones, worked on huge projects

Drawn svgs and animations using figma and css

This 100 seconds explained svgs better than any other resources I've read lol

Manually writing SVGs been one of the most difficult topics for me

Thanks a lot fireship you're awesome

[pemessh]

This was a much needed video for me.

I have been using SVG for quite a while now and I had no idea that these things were this simple.

[ivanangelov]

Totally worth the 100 seconds! Short enough and within the same time crystal clear, amazing!

[bilaleyrik]

Hey, I hope one day I can see this channel have 10m subs because you honestly deserve it with the perfect, concise, informative, entertaining and engaging content you create on a weekly basis. You are a legend, thank you so much for the content. Great Video !

[brucewayne]

Bézier is a Genius, He invented those curves controlled by some points for renault

[md.fazlulkarim]

Great man... You can't even imagine how creatively 100 seconds of series helped me. And possibly every one of us .✨

[Digital]

Best shortest svg video I’ve ever seen. And believe me I spent a whole day once researching SVG

[brianzhamilton]

This just gave me the answers I need to work on a project that’s been in the back of my mind! So helpful! Thanks!

[mediocreman]

WOW! Amazing video! I think I will use what I learned in _only 100 seconds_ to create small icons in websites that can be colored like text just by the use of color-definitions via CSS. One of the most useful videos I have ever watched on YouTube!

[blueguy]

The best "casual watching" programming channel. Magnificent work.

[TheGitGuild]

I noticed that I was blindly using svg files for years. I've enlightened :)

[venkateshprasad]

This was amazing .. I always ignored svg part, when ever I had came across it...now seems like it's the time, I will start doing some designing stuffs as well...Thanks. .It was really helpful !!!

[manavshah]

This is so cool and informative.
I always wondered what was the long code in the path attribute when I inspected a website!
Thank you 🔥

[crashingflamingo]

I didn't actually know that SVG works like turtle graphics. Thanks for an awesome and concise explanation :)