Stay tuned for "Beyond SVG" in a few days... You can do amazing things with SVG from a design perspective.
@softwarelivre23893 жыл бұрын
Figma or Inkscape* Illustrator is dead. Thanks for the video though, one of the best channels on KZbin for sure!!
@fibredeneige3 жыл бұрын
Can't wait, hope we'll see some animation examples
@klutch41983 жыл бұрын
OMFG
@DavidB-tw9tp3 жыл бұрын
Nice! I love the potential that SVG has
@theolavaux3 жыл бұрын
😍😍😍
@brianevans43 жыл бұрын
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
@Fireship3 жыл бұрын
I mean I wouldn't recommend it for most things, but it's possible. Working on a long SVG vid now :)
@elementiro3 жыл бұрын
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.
@MobiusCoin3 жыл бұрын
Math baby!
@literallybiras3 жыл бұрын
@@Fireship Please, SVG is like an old art for making great UIs, not good UIs, but the great ones with user interactivity and animations
@erkangorgulu60133 жыл бұрын
@@Fireship you knew it was coming
@alexhooper273 жыл бұрын
I had no idea the inside of an svg file was just markup. This opens the door to so many possibilities
@SirusStarTV3 жыл бұрын
Shocking for me was that Android .apk and IOS .ipa application files was just zip archives with different file extension name!
@IxMeTutorials3 жыл бұрын
@@SirusStarTV Even Microsoft Office files like .docx and .xlsx are just zip archives
@somerandomuser51553 жыл бұрын
The more you know!
@alexhooper273 жыл бұрын
@@SirusStarTV whaaaaaaaa
@SirusStarTV3 жыл бұрын
@@IxMeTutorials interesting
@jdubina60783 жыл бұрын
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.
@shahnawazazam3 жыл бұрын
Damn never knew about that
@jdubina60783 жыл бұрын
@@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-Daegu3 жыл бұрын
@@jdubina6078 but what well you use svg in this example?? also is it that kinda ling and redundant easier to use an img
@jdubina60783 жыл бұрын
@@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.
@brndto3 жыл бұрын
@@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
@DesignByFaizi3 жыл бұрын
You are on fire lately.
@thefreeze60233 жыл бұрын
now he's firefireship.
@and-ant9843 жыл бұрын
help him, don't let him burn
@coach100013 жыл бұрын
I love all the "fashionable" 100 seconds. But these little gems is what I personally appreciate most. Thank you.
@stevend27489 ай бұрын
0:33 - Code 1:17 - d = draw M = Move absolute m = move relative to the last point l = line that actually draws
@mohammadoulabi42123 жыл бұрын
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
@DexieTheSheep2 жыл бұрын
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.
@furball_vixie3 жыл бұрын
Today I learned: SVG isnt a binary format but rather a format thats actually simmiliar to HTML
@abdallahmohammed99783 жыл бұрын
It is HTML code you can literary write svg tags in your html
@092_deepak_kumar33 жыл бұрын
@@abdallahmohammed9978 it's based on XML
@igorswies59133 жыл бұрын
@@abdallahmohammed9978 it's XML to be specific because it's more strict, you have to close every tag
@abdallahmohammed99783 жыл бұрын
@@igorswies5913 The Path tags can be closed like this
@igorswies59133 жыл бұрын
@@abdallahmohammed9978 that's what I meant
@bilaleyrik86803 жыл бұрын
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 !
@Digital9633 жыл бұрын
Best shortest svg video I’ve ever seen. And believe me I spent a whole day once researching SVG
@blueguy55883 жыл бұрын
The best "casual watching" programming channel. Magnificent work.
@pemessh3 жыл бұрын
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.
@TheGitGuild3 жыл бұрын
I noticed that I was blindly using svg files for years. I've enlightened :)
@SolomFoz3 жыл бұрын
god this saved me from watching hundreds of minutes of videos and tutorials to just know these basic things! thank you so much
@crashingflamingo30283 жыл бұрын
I didn't actually know that SVG works like turtle graphics. Thanks for an awesome and concise explanation :)
@AshifKhan-sn6jx Жыл бұрын
Yeah lol
@brucewayne24803 жыл бұрын
Bézier is a Genius , He invented those curves controlled by some points for renault
@ivanangelov88252 жыл бұрын
Totally worth the 100 seconds! Short enough and within the same time crystal clear, amazing!
@md.fazlulkarim88473 жыл бұрын
Great man... You can't even imagine how creatively 100 seconds of series helped me. And possibly every one of us .✨
@kuroikenshi92173 жыл бұрын
Cool! Next: HTML5 Canvas API in 100 seconds🔥
@ludologian3 жыл бұрын
Omg yes !
@DavidDeCorso3 жыл бұрын
Mozilla has pretty good docs and tutorials for the canvas that helped me a lot.
@SirusStarTV3 жыл бұрын
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
@DavidDeCorso3 жыл бұрын
@@SirusStarTV you could probably do simple animation as well
@Aouraghmouhamed3 жыл бұрын
+1
@ScottLee643 жыл бұрын
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.
@LopissoErgando-f4x11 ай бұрын
short, detailed and straight to the point, thanks
@jannes66663 жыл бұрын
I love those shorts!
@grandpaK4203 жыл бұрын
Those arent the shorts but still this series is so good
@venkateshprasad74883 жыл бұрын
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 !!!
@micah29362 жыл бұрын
This is a perfect pace for somebody who already has knowledge of coding Thank you
@danyalijaz3 жыл бұрын
I have never used PNGs for my web applications. It's crazy how high quality your website becomes with SVGs.
@kevinshah_tv3 жыл бұрын
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.
@brianzhamilton3 жыл бұрын
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!
@mediocreman63233 жыл бұрын
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!
@Qwetzxl3 жыл бұрын
This series is so cool that i end up watching so many it goes from 100 seconds to 10000000000000000
@Psychopatz3 жыл бұрын
Woahh, you made my day a lot productive knowing that SVG's inner workings. Thanks a lot sir!
@akC0123 жыл бұрын
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
@dennisbarzanoff90253 жыл бұрын
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
@imthiaz093 жыл бұрын
The only channel that gives you what you need right when you need it.
@sinpi3143 жыл бұрын
You can use Inkscape, which is an excellent, open source and very professional vector graphics software It’s what I use and I absolutely love it!
@nikyabodigital3 жыл бұрын
It's really daunting to stare at svg codes but this 100 seconds literally made it easier
@p329293 жыл бұрын
whoa!! I was always scared of drawing SVG by myself. Never thought it would be that simple :O
@timothymccully7953 жыл бұрын
I wish I would had seen this half an hour ago. This is the first video that's made sense to me. Thank you!
@manavshah70333 жыл бұрын
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 🔥
@bsky19983 жыл бұрын
Me before watching this video: **looks at SVG I'm trying to make with intense confusion** 😵 Me after watching this video: SO THAT'S WHAT THOSE NUMBERS AND LETTERS MEAN 🧠
@Dloc473 жыл бұрын
Wow I got basic clear understanding of SVG in 100 seconds. Wow! Thank you!
@tamsucophieuchungkhoan42412 жыл бұрын
couldn't believe I spent 4 hours before finding you, thank god
@jannesvanquaillie91513 жыл бұрын
My mind was blown, watching this video I didn't expect this, happy surprise!
@muazahmed41063 жыл бұрын
SSL/TLS in 100 Seconds
3 жыл бұрын
this
@nrnoble3 жыл бұрын
Just stumbled on this channel and ended up subscribing because I like the 100 seconds concept of high-quality content.
@FunnyHaHa4203 жыл бұрын
It reminds me of Fortran. For those of you under 50, Fortran was an old programming language that stopped being used for the most part after C+ came out. but back in the mid 80's it was still viable.
@kingbiibii3 жыл бұрын
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
@treyquattro3 жыл бұрын
another brilliant episode that is keeping my list of stuff-I-should-know-but-don't topped up!
@ThiagoVieira913 жыл бұрын
MIND = 🤯 Always had a hard time to grasp the basics of SVG. You explained it like no one. Waiting eagerly fo the Beyond 💯s
@lautarolesniewicz2884 Жыл бұрын
Great video, helped me more than the other 10 minutes videos explaining SVG xd
@salmankazi53083 жыл бұрын
Thanks A Lot...Was Unable TO Understand The Difference Between PNG and SVG from a Long time
@all_watched_over3 жыл бұрын
one 'gotcha' in SVG transforms like rotate is that by default the elements use the origin of the SVG rather than the origin of the element. so in your example of rotate being applied to the element, it would rotate using the top left of the SVG as a transform origin. that behavior would be unexpected, because it is not like normal HTML elements. One way to fix this is to apply transform-box: fill-box; to the SVG element. that way it would rotate as expected (and like your example)
@spb11793 жыл бұрын
Litterally the best explanation ever for svgs
@DruSerkes3 жыл бұрын
Learned more about SVG in 2 minutes here than I've been able to pickup anywhere else
@mridulbarman0273 жыл бұрын
Your channel is the best every channel for programmers. Love u a lot bro ❣️
@hollowbug24433 жыл бұрын
A mention of "currentColor" would have been helpful as well in order to be able to dynamically overwrite the svg color from outside
@blinkpromotion7 ай бұрын
This channel is making shorts before shorts became a thing in youtube!!!
@apurvthakur7 Жыл бұрын
Amazing, I am using SVGs for many years without knowing how actually they are created.
@LanceThorpe3 жыл бұрын
Holy these 100second vids are so good
@David-nk7pv3 жыл бұрын
This content is fantastic. We need more teachers like you
@lukehatcher983 жыл бұрын
I learned more in the first 20 seconds than I have seeing and hearing about “svgs” over the last 2 years
@LegendBegins11 ай бұрын
It also opens the door to tons of security issues. Love SVGs.
@nullpointer38603 жыл бұрын
New subscriber, your videos are simply as cool as they are entertaining and educational.
@fxmtoeclipse3 жыл бұрын
This has to be your best video.
@developerpranav3 жыл бұрын
hey man, love your amazing knowledgeable videos. one of my favourite channels of all time
@TvsChaitanya3 жыл бұрын
Much needed one for me. Thank you so much for this simple easiest video ❤️
@Isickincorporated2 ай бұрын
ik im late to commenting on this vid but tysm, now i inderstand the svg bits in html when im making webscraper code. Now im able to figure out how to pull the "most viewed" bar from youtube videos in my next project :D
@kennethlarsen39072 жыл бұрын
Holy Smokes. Thank you for making it so simple!
@sinanyaman20073 жыл бұрын
I had no idea that I would be interested in learning svg lol you are a legend
@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
@oneoflokis2 жыл бұрын
You've basically explained it to me! Thank you!! 🙂👍 (Basically, it creates images which are good to be enlarged to any size.) 🙂
@Norsilca Жыл бұрын
It always seemed strange to me that in such a structured xml-based language, the tag just uses this weird string with its own mini language. The list of commands could easily have been child tags inside the instead. I wonder why they decided to go this route.
@shateq3 жыл бұрын
I didn't know that I needed that
@saikrishnasunkam43442 жыл бұрын
The "useful content per second" metric of this video is insane
@WagnerDeQueiroz3 жыл бұрын
magnific work! Now I can understand Curves!
@blablablabla293823 жыл бұрын
didn't know that we could manually make svg, ty !
@diablomertn3 жыл бұрын
All these years ... How did i miss the opportunities i can create with illustrator ... Thank you for this !
@SANDEEPSandeep-pr2xi Жыл бұрын
U explain very good in short time, that's very good
@islamibrahim81213 жыл бұрын
I can say, I've watched this before and coming back to this after hitting my head on the wall with svgs, I realised that this has a lot of info. One thing being the shapes. No more css circle hack from now on. SVG
@tonyavalcer34363 жыл бұрын
the best channel ever
@rohil30233 жыл бұрын
This makes svgs much more easier to understand
@fibredeneige3 жыл бұрын
Great video, love the banana
@vinnt_tnniv3 жыл бұрын
When doing a simple html page for myself, I used a lot of svg icons I've downloaded, and perhaps I'll make some SVGs of my own. it was fun screwing around with the KZbin logo, but... not the same thing as making your own
@joaocesarlima73393 жыл бұрын
I learned more about SVG by watching this video than by watching some full courses on the subject.
@anandt20033 жыл бұрын
More such shorts please.. this is 🔥🔥
@neveriodev3502 жыл бұрын
Amazingly explained for a 100 sec video wow
@pranavsetpal3 жыл бұрын
I never knew SVG were that easy. It is like having pre-defined React elements like rect with CSS type attrributes. Instead of top, left, etc it is just x and y.
@HenrikBgelundLavstsen3 жыл бұрын
I used svg to create a course builder made in angular, it was not obvious but you can make svg components in angular by using namespaces in the tags. Due to the transforms you can do with svg. its actually fairly easy to do operations for manipulating existing svgs without understanding much math. Angular might not be the right platform for this, but in some cases you have existing projects within where something like this suddenly is required. Maybe create a short using svg together with events. Like dragging and dropping might be interesting to people. Also it could potentially save people quite a few bucks learning that. Instead of spending money on diagram libraries etc.
@joshramnarain3 жыл бұрын
This is one of my wow moments. Liked
@SnjP3RDrjv3R2 жыл бұрын
This is really helpful. At my Job I got a Project to visualize data in svgs.
@anmolrajx3 жыл бұрын
Well explained i just love your content brother. Lots of love from 🇮🇳
@triminhtruong2512 жыл бұрын
I am really appreciate the series. I wish if your team can release a 'ADA in 100 seconds' since I do love that language
@gh0stcloud4993 жыл бұрын
That’s so cool! Hope you do a bigger vid on them!
@Prabh_cc Жыл бұрын
when i start understanding, video ends🙄😶💀
@learningtocode50495 күн бұрын
😂
@lukor-tech3 жыл бұрын
Ayyy perfect! Just in time for an afk meal :D
@umarhasnain73693 жыл бұрын
I learned total SVG from this video. Thanks. Maybe I can work with it now
@SeanClarkeMusic3 жыл бұрын
I'm wondering 🧐could we crowd-fund Fireship to produce "rapid, concise, and meaningful dev docs" for ALL web related langs/platforms/libs? Seriously, I get such a lot from these short vids. It's a power punch of just the right amount of info to dive in and get going with things. Much appreciated ♥️
@antoniojimenez9653 жыл бұрын
Amazing. Just amazing !! Good job. It's really valuable