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!
Learn more about web design, SVG, and CSS in this tutorial: fireship.io/lessons/css-cards...
References:
Star Wars Animation codepen.io/nerdmanship/pen/ZL...
Path Docs developer.mozilla.org/en-US/d...
#webdev #html #100SecondsOfCode
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
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.

[@softwarelivre2389]

Figma or Inkscape* Illustrator is dead. Thanks for the video though, one of the best channels on KZbin for sure!!

[@fibredeneige]

Can't wait, hope we'll see some animation examples

[@klutch4198]

OMFG

[@DavidB-tw9tp]

Nice! I love the potential that SVG has

[@theolavaux]

😍😍😍

[@brianevans4]

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

[@Fireship]

I mean I wouldn't recommend it for most things, but it's possible. Working on a long SVG vid now :)

[@elementiro]

Obviously it is, why wouldn't it? It's just... difficult. Not syntax-wise but rather getting-the-right-numbers-wise. But if it can be done with software then it's obvious it can be written without it. Software can only use what's already defined in SVG format.

[@MobiusCoin]

Math baby!

[@literallybiras]

@@Fireship Please, SVG is like an old art for making great UIs, not good UIs, but the great ones with user interactivity and animations

[@erkangorgulu6013]

@@Fireship you knew it was coming

[@alexhooper27]

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

[@SirusStarTV]

Shocking for me was that Android .apk and IOS .ipa application files was just zip archives with different file extension name!

[@IxMeTutorials]

@@SirusStarTV Even Microsoft Office files like .docx and .xlsx are just zip archives

[@somerandomuser5155]

The more you know!

[@alexhooper27]

@@SirusStarTV whaaaaaaaa

[@SirusStarTV]

@@IxMeTutorials interesting

[@jdubina6078]

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.

[@shahnawazazam]

Damn never knew about that

[@jdubina6078]

@@shahnawazazam yep, if you were to be building an e-commerce site with customization or personalization products, svgs would be the way to go. Would easily give your customer a visual of their selections.

[@ko-Daegu]

@@jdubina6078 but what well you use svg in this example?? also is it that kinda ling and redundant easier to use an img

[@jdubina6078]

@@ko-Daegu you could use this this if you had an e-commerce store where you sell personalized or customized items. Like an item where someone could put their name on a product. When they type their name in an input field, you could render and svg to show them what it would look like. This image could then be saved.

[@brndto]

​@@ko-Daegu not sure what you mean by 'kinda ling' but img tags can be quite annoying when trying to deal with the new web vitals, each tag to our image domain (not cdn) is around 120ms with 20ms of that being the actual image download and the rest being pre-download communication to the server hosting the image tbh anything that can be vectorized should be imo if it can be kept under 2kb gzipped in svg format

[@furball_vixie]

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

[@abdallahmohammed9978]

It is HTML code you can literary write svg tags in your html

[@092_deepak_kumar3]

@@abdallahmohammed9978 it's based on XML

[@igorswies5913]

@@abdallahmohammed9978 it's XML to be specific because it's more strict, you have to close every tag

[@abdallahmohammed9978]

@@igorswies5913 The Path tags can be closed like this

[@igorswies5913]

@@abdallahmohammed9978 that's what I meant

[@DesignByFaizi]

You are on fire lately.

[@thefreeze6023]

now he's firefireship.

[@and-ant984]

help him, don't let him burn

[@coach10001]

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

[@bilaleyrik8680]

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 !

[@muazahmed4106]

SSL/TLS in 100 Seconds

[@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.

[@ivanangelov8825]

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

[@md.fazlulkarim8847]

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

[@brucewayne2480]

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

[@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!

[@mediocreman6323]

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 KZbin!

[@Digital963]

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

[@mohammadoulabi4212]

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

[@DexieTheSheep]

figma balls

[@billygreggory7899]

@@DexieTheSheep Lmao

[@V.Z.69]

If you have a good handle on math and trigonometry, even geometry, you can get down. But I would say for x/y location and shapes, not really as an Artist. As an artist, it's moot. I just explained to a person: An artist can learn HTML and CSS, but a mathematician won't become an artist. I created a drawing tool, using JavaScript that draws circles, arcs, shadows, pinpoints arcLengths and projections and line of sight over a curve and so on; even scales it with a slider. But there is nothing about it that is what an artist can use. It's pure math and navigation and plotting points with said math and trig and geometry.

[@manavshah7033]

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 🔥

[@venkateshprasad7488]

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 !!!

[@blueguy5588]

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

[@Psychopatz]

Woahh, you made my day a lot productive knowing that SVG's inner workings. Thanks a lot sir!

[@developerpranav]

hey man, love your amazing knowledgeable videos. one of my favourite channels of all time

[@timothymccully795]

I wish I would had seen this half an hour ago. This is the first video that's made sense to me. Thank you!

[@nrnoble]

Just stumbled on this channel and ended up subscribing because I like the 100 seconds concept of high-quality content.

[@TvsChaitanya]

Much needed one for me. Thank you so much for this simple easiest video ❤️

[@kingbiibii]

I love your post. You have the best explanation for all the ideas of web and programming that were never clear to me, Thanks @Fireship

[@micah2936]

This is a perfect pace for somebody who already has knowledge of coding Thank you

[@akC012]

something that i was ignorant to study for long period assuming it is complex; but...as usual, u just spoonfed my brain and its asking for more! thnx man

[@SolomFoz]

god this saved me from watching hundreds of minutes of videos and tutorials to just know these basic things! thank you so much

[@nullpointer3860]

New subscriber, your videos are simply as cool as they are entertaining and educational.

[@stevend2748]

0:33 - Code 1:17 - d = draw M = Move absolute m = move relative to the last point l = line that actually draws

[@dennisbarzanoff9025]

omg literally what i needed at this very moment. i was just trying to wrap my head around why one of my icons did not work properly and boom.. fireship makes a video about it

[@Prabh_cc]

when i start understanding, video ends🙄😶💀

[@kuroikenshi9217]

Cool! Next: HTML5 Canvas API in 100 seconds🔥

[@ludologian]

Omg yes !

[@DavidDeCorso]

Mozilla has pretty good docs and tutorials for the canvas that helped me a lot.

[@SirusStarTV]

I thought it would be too short for HTML canvas API but you can pretty much describe how to draw shapes and clear background in 100 seconds

[@DavidDeCorso]

@@SirusStarTV you could probably do simple animation as well

[@Aouraghmouhamed]

+1

[@ThiagoVieira91]

MIND = 🤯 Always had a hard time to grasp the basics of SVG. You explained it like no one. Waiting eagerly fo the Beyond 💯s

[@user-rp7fk7vn7y]

short, detailed and straight to the point, thanks

[@mridulbarman027]

Your channel is the best every channel for programmers. Love u a lot bro ❣️

[@treyquattro]

another brilliant episode that is keeping my list of stuff-I-should-know-but-don't topped up!

[@etiennedaher]

Straight to the point awesome!

[@felipecarl1415]

loved this video, learned really fast!!

[@Banalitude]

Your content is so informative, thank you so so much !

[@crashingflamingo3028]

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

[@AshifKhan-sn6jx]

Yeah lol

[@TheGitGuild]

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

[@arospro]

This was so well explained! Thank you!

[@gh0stcloud499]

That’s so cool! Hope you do a bigger vid on them!

[@pauloprado1688]

What a nice and fine way of explaining it. Really good

[@MarcosSecu]

Excellent man, it helped me a lot!

[@ScottLee64]

With fewer than a 600K subscribers, this channel is greatly undervalued. Thanks for all the content!

[@albedesigns]

Now they have over 2 million! I love the way they explain everything so simply so it's easy to understand. Too bad KZbin wasn't around when I started learning vanilla HTML & CSS.

[@LanceThorpe]

Holy these 100second vids are so good

[@jannes6666]

I love those shorts!

[@karlnassar8646]

Those arent the shorts but still this series is so good

[@Dloc47]

Wow I got basic clear understanding of SVG in 100 seconds. Wow! Thank you!

[@ValchyGaming]

Awesome video man !

[@hayatasuenaga969]

I just love your videos thank you

[@anandt2003]

More such shorts please.. this is 🔥🔥

[@lautarolesniewicz2884]

Great video, helped me more than the other 10 minutes videos explaining SVG xd

[@SANDEEPSandeep-pr2xi]

U explain very good in short time, that's very good

[@salmankazi5308]

Thanks A Lot...Was Unable TO Understand The Difference Between PNG and SVG from a Long time

[@antoniojimenez965]

Amazing. Just amazing !! Good job. It's really valuable

[@sikfreeze]

Wow super clear. Thank you

[@Qwetzxl]

This series is so cool that i end up watching so many it goes from 100 seconds to 10000000000000000

[@Jihed]

I really needed that , thank you ❤

[@imthiaz09]

The only channel that gives you what you need right when you need it.

[@kevinshah_tv]

Holy hell. I genuinely did not know it awas this simple. Always saw random X Y M L characters and blindly just copy pasted it in myHTML. God bless you Sir. This was extra awesome than your other, already awesome videos.

[@anubisystems]

what a great explanation, thanks for sharing.

[@pixiedev]

Amazing man and great explanation 👏.

[@p32929]

whoa!! I was always scared of drawing SVG by myself. Never thought it would be that simple :O

[@Ninetieth4]

Great as always

[@raypenbar8305]

Love those videos!

[@sinanyaman2007]

I had no idea that I would be interested in learning svg lol you are a legend

[@jannesvanquaillie9151]

My mind was blown, watching this video I didn't expect this, happy surprise!

[@WagnerDeQueiroz]

magnific work! Now I can understand Curves!

[@stevesmith0624]

I find these so useful lol, would like in depth courses or tutorials from this page, cuz if they can provide this much information in 100 seconds, well

[@danyalijaz]

I have never used PNGs for my web applications. It's crazy how high quality your website becomes with SVGs.

[@kennethlarsen3907]

Holy Smokes. Thank you for making it so simple!

[@sandunmadushan1732]

This is awesome. Thanks a lot

[@victornoagbodji]

😊 🙏 😊 amazing overview!

[@oneoflokis]

You've basically explained it to me! Thank you!! 🙂👍 (Basically, it creates images which are good to be enlarged to any size.) 🙂

[@SanishkaJayasena]

thank you, this is worth subscribing!!!

[@web_masud]

that is reallly awesome focus on svg icon

[@andriilukianenko8106]

I want to see a longer version fo this brilliant video.

[@fxmtoeclipse]

This has to be your best video.

[@azlearningway2527]

Thank you for this amazing video , very good explanation :)

[@manojband1]

Nice work !

[@fugeratube1334]

really well explained in 100 min thanks

[@CHANDRASHEKAR-ox4qt]

Awesome content 💕👍

[@spb1179]

Litterally the best explanation ever for svgs

[@khawkeyukethe3692]

Once again, a super good video, continue like this ! What about a video about bash, zsh ... and their differences ?

[@ibrahimnajjar8241]

Helpful, interesting, spry. THANK YOU!

[@teodorchirileanu]

awesome work, more svg please!

[@triminhtruong251]

I am really appreciate the series. I wish if your team can release a 'ADA in 100 seconds' since I do love that language

[@Miyuru_]

didn't know about this. thx 😃

[@anmolrajx]

Well explained i just love your content brother. Lots of love from 🇮🇳

[@SnjP3RDrjv3R]

This is really helpful. At my Job I got a Project to visualize data in svgs.

[@ddarkodev2923]

Amazing content, thank you ✌⭐

[@sfathahila4799]

thankyou you saved my life

[@umarhasnain7369]

I learned total SVG from this video. Thanks. Maybe I can work with it now

[@sampreethg7065]

Thanks bro for this video 👏👏

[@diablomertn]

All these years ... How did i miss the opportunities i can create with illustrator ... Thank you for this !

[@blablablabla29382]

didn't know that we could manually make svg, ty !

[@joshramnarain]

This is one of my wow moments. Liked