Front End Center - Why Inline SVG is Best SVG

[@Dxpress_]

10:56 Years of query-selecting elements and logging them to the console for testing, and I had no idea you could just do this.

[@luckylukeskywalker]

This is the typical youtube channel you don't want to have stopped

[@sarcasticdna]

why is it stopped ??

[@Naz-yi9bs]

Wow I wish you made a tutorial on how to go from newb to pro in SVG... you're teaching style is amazing.

[@supersjaak123]

Jesus Christ what high quality content. I wish I discovered this channel when I was still in school studying for web design & development.

[@nurbekamanbekov9824]

One of the most underrated channels I've ever seen

[@adarshverma4599]

This just blows my mind! It makes me realise how superficially I know about SVG. Great Video 👌

[@MaximeRouiller]

Mind blown. Dude... you're insane. I love it!

[@4.0.4]

Wow, this guy is so concise and sharp! And also bringing in good content! You can tell there was a well-written script. Can't shut the brain for a second or you'll miss something. Great for actually paying attention.

[@dawidpomioto1595]

Before I ignored all the stuff about inline svg and I just copy pasted intro my projects, but your video inspired me to really master inline svg. I was study it for 2 weeks and I memorized all the commends for drawing, filters , masks, different kinds of animations, I learned JS dom and few JS libraries. and other stuff related. At the end I came back to your video to make sure I understand everything you presented, and I still learn something new. Thank you for making this video!

[@enochappathurai]

This is the "SVG is awwwsome" talk I've been needing. Great work mate

[@avimehenwal]

OMG .. this video is an eye opener. I never knew we can do so much with SVG. Thankyou so much for sharing

[@thekaleb]

Why Front End Center video is best video.

[@adrianpoubinskli6044]

Because because

[@filemot25]

This is some of the cleanest and simplest code I've seen in a good while.

[@nizamuddinshaikh3185]

What a power Inline SVG has got! Thanks for sharing. 👍😃

[@danieldante8341]

There's a special place in heaven for people just like you :) Great explanation! Subbed!

[@zgmg9263]

SO HIGH QUALITY PLEASE DON'T STOP

[@swtrials2911]

I am just seeing this for the first time. You are blowing my mind.

[@skettdog]

God damn I am so glad I clicked this. I have consumed many articles and videos on web development since I started learning 2 months ago, but this was the best by far. I am finally able to wrap my head around so many things which were confusing about SVG before.

[@natashakamokaba9574]

Completed wireframing in xd and exported to html. Backend mostly came with svg tags that got me confused. Your tutorial helped. More videos on SVG would be great. Thank you sir.

[@busyrand]

This was super advanced and impressive! I was blown away by the depth of what you demonstrated, especially the logic of each piece of code. Thank you for sharing this. Subscribed....

[@milleniummoses]

You unknowingly also taught me some advanced CSS. Thanks for the video.

[@sanchariBahubali]

great video.. u deserve a million subscribers for your teaching style. soon u will hit that number

[@FlaxeMusic]

This is exceptionally well presented on all fronts, well done.

[@NickyKeyse]

I'm just starting to look at svg and I'm so glad I found this video, thank you very much.

[@jenoyestewart1516]

I am new to this channel and this is the first video that I'm watching from your channel but I am blown away. In that vein, is there any reliable resource online for learning these things about SVG as you have just demonstrated (granted most things will come with usage and experience)?

[@ryanmcpherson6167]

Satisfied and Jealous at the same time. How is that possible?! Liked and Subscribed.

[@impankratov]

Great dasharray & dashoffset explanation, thanks!

[@sam.kendrick]

Thanks for your time and effort! I learned about more than SVGs in this video!

[@masteryoda63]

Learned new things about SVG today, thank you!

[@_jikkujose]

Absolutely good presentation, content & production quality! Keep up the great work!

[@goncalodumas]

Great asset, instant subscriber!

[@asif-rahaman]

Wow, very good quality tutorials. Why did you stop making videos?

[@Tommersable]

Watched for about 5 minutes. This channel is gold. Get back to making video content already.

[@bluesprodeep2079]

At 16:14, why do you move the svg to below the input and later set an order:-1 to show the svg ahead of the input again? why not just leave it ahead the input in the first place?

[@ShrinivasKattimani66]

In love with SVG. Will start using using it.

[@flwi]

Great tutorial! Thanks for sharing!

[@flavourfulski]

This tutorial is absolutely amazing, thanks!

[@realdaly]

I can't believe this tutorial is 7 years old!

[@jurgentreep]

Saved this for later, looks promising!

[@bluesprodeep2079]

This is awsome. Thank you!

[@wicek3d]

Fantastic. Thanks a lot for this simple and powerful example! :)

[@Velenir]

You can control svg inside object, embed, with yourObject.contentDocument.querySelector("svg") as long as everything is same-origin.

[@ethanarrowood7454]

Mind=Blown thank you so much for this.

[@길병찬학부생-소프트]

Amazing! Also impressed by the way of your editing video. What is the name of video editing program by the way?

[@randommode3016]

4:01 benefits of inline svg💚

[@JayRGabz]

thank you for this... I love it...

[@berakoc8556]

A lovely british accent and awesome tutorial. Just the way I like it.

[@HarpreetSingh-cz2zh]

How did you get 0.5 and why did you divide it by 2? 11:05 of the video.

[@seydinabadiane8761]

just insane dude !!!!!!

[@thiswiedel]

This is an amazing tutorial, thank you so much.

[@mightyjoetech]

I enjoyed the first video so much, I might buy 1 month.

[@zer0ne83]

Good stuff mate. Cured me of my subconscious avoidance of SVG usage. Admittedly had no idea they could do even half of that. Thought SVG was an STD your CSS could catch by having unprotected sex with PNGs. The more you know, eh? ;)

[@orenmizr]

concise & clear points. thanks

[@kadekeqw23]

Master at work.

[@javascript_developer]

How are you able to show output at the same time you write css without having to save ?

[@HarpreetSingh-cz2zh]

Hello, as mentioned in your video - you said there will be a javascript version for svg.. any updates on that? Excited to learn!

[@mykelchang846]

Great stuff, thank you ;)

[@rugia813]

This is really helpful, thank you!

[@technicallygeckley14]

This is brilliant. Thank you so much.

[@pradipspeaks9395]

Very nice ❤ If I have a svg file (a.svg) how can I easily, without any overhead, can translate to an inline svg in my React js ?

[@sujanlimbu4540]

which theme you are using, also which font

[@kakaIbrah]

Nice video. Very didactic. Tks.

[@blendjams]

how much will the svg affect the overall size of the websites as compared to plain css?

[@awekeningbro1207]

Please explain how is this simple? This is basically advanced CSS and this is complicated.

[@ravencoin_premium_admin_assets]

yeah they broke everything lol kzbin.info/www/bejne/aYbWgqt3ft6ladE

[@ZaneDev]

Great tut thanks!

[@autorashades1984]

Good info thanks. I like the idea of using an or object [contenteditable]

[@oussamabouchikhi8110]

What is font used in pink color?

[@meagar]

I thought this channel was dead, glad to see that I was wrong.

[@keanukentgargar5743]

@6:08 what’s that plugin called that shows arrows which indicates it is newline?

[@249-a-b-n]

Thanks for the very informative video :D

[@terehovsergej]

Excellent! thanks

[@DisfigurmentOfUs]

Great video, thanks!

[@kjvisual7]

This video introduced me to what is possible with SVG. Wow. And I was only looking for a video that explained the benefits of using SVG inline. SVG is like a whole new world of code to learn. Especially if I consider that it was intended to be like Flash. Hmmm what is possible, what can SVG really do? Thanks 😀

[@kadekeqw23]

Diamond quality.

[@TadejKanizar]

Very informative!

[@1001-w5q]

I don't understand how line appears right below the input field and has the same width while my line appears righter or bigger than input form

[@284LOLXp]

You totally convinced me

[@HarpreetSingh-cz2zh]

hey, 11:05 why did he divide by 2 and - 0.5?

[@ozzyfromspace]

This video was a surreal reminder that I don't know shieeyyt. Oh well, still a great video 🙌🏽

[@tompazourek]

There's also in SVG with xlink:href attribute. That can be used to have a standalone file while using the "inline" SVG mode. Any opinions on that, Glen?

[@FrontEndCenter]

It's actually covered in the sequel to this video! (which is a subscriber-only episode I'm afraid) But the short version is this - the CSS rules that are possible with "true" inline SVG don't quite work the same when using . You can achieve _most_ of the same effects but IMO it's nowhere near as easy to work with. Here's a good resource: css-tricks.com/svg-use-with-external-reference-take-2/

[@tompazourek]

Cool, I'll have to check your subscription. I wasn't aware of those drawbacks, I thought the only issue was browser support.

[@KinTuza]

I was hoping that you'd explain "Viewbox". I'm having a problem with media icons that I put under my nav div. I thought that the ul was at fault since it is inherently 100% in width. Even that won't help. WELP!

[@JayRGabz]

please create more svg videos...

[@tough_year]

thanks a lot

[@brianevans4]

would be interesting to see more usage of inline SVG in frameworks like react. Anyone know of a good npm package that helps with using svg in react?

[@walid7189]

amazing! thank you!

[@doktoren99]

Exquisite!

[@ressalg]

What is the name of the editor that's being used in this video?

[@lesterarteaga3729]

Love it !

[@nicolasparada]

Very interesting. I have one question about performance. I've always heard that you should only animate opacity and transform on CSS because they are optimized and bla bla bla... Are those stroke-dasharray and stroke-dashoffset safe to animate without impact on the performace?

[@FrontEndCenter]

A good rule of thumb when it comes to performance is "how many pixels are getting redrawn?". With big objects, you do have to be careful so only using transform and opacity is a good idea. But if you're animating small things (and those animations don't affect the layout of the rest of the page) then you can pretty much do what you like! Check D3's examples page to see just how smoothly SVG can be redrawn, even at larger sizes: github.com/d3/d3/wiki/Gallery

[@nicolasparada]

Ok, thanks for the advice.

[@keanukentgargar5743]

@6:08 what’s that plugin called that shows arrows which indicates it is newline?

[@keanukentgargar5743]

wrong thread haha

[@DavezillaMedia]

Brilliant!

[@dukaxavier]

Wow dude, amazing! What is the name of the editor that's being used in this video?

[@FrontEndCenter]

It's Webstorm. I've been using it for years and love it. I've also heard good things about VS Code, it might be a bit easier to get started with.

[@codingparadise841]

lot usefull, thanks

[@HarpreetSingh-cz2zh]

hey, 11:05 why did he divide by 2 and - 0.5?

[@kshitizadhikari7826]

thank you :)

[@faustohernandez3645]

Great video !!!!

[@svgsprite4942]

Utility to make sprites: goo.gl/sDpdEh ✨

[@troymartz8740]

Awesome!

[@maxpain3294]

amazing

[@StingSting844]

love you man

[@mustache2295]

Is this still applicable today? Just discovered SVG and not sure what to do from here other than make some cool stuff and try to put it into websites. At first I thought of just creating my own images but then I thought... Well, why not make some awesome animations as well.

[@kramviteam552]

what font do you use?...

[@MichaelGauciMT]

The codepen uses Avenir Next and Arial.

[@onlyafriend]

SVG can be Standalone File with reactjs component