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!
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.
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.
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.
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....
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)?
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?
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? ;)
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 😀
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?
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/
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?
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
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!
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.
Make a video where you show how to manipulate external svgs. I've been struggling with that for a long time. It needs to be a complex svg, say a character with lots of different elements with their own ID's. So far I've manage to change simple solid fills but not gradients on runtime. It's also annoying since I have to upload the files to the server every single time I make a change because of cross origin, I don't know if you can fake that with a desktop server solution. Anyways. Do a video on that. Alternatively. Show a way to have inline complex svgs where you have more control. My problem would be that I don't understand where to put them because 1 single svg is thousands of lines of code and I need to pull in hundres of them for my project. So is there a simple way to store them inline so to speak?
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.
This is the typical youtube channel you don't want to have stopped
why is it stopped ??
One of the most underrated channels I've ever seen
Wow I wish you made a tutorial on how to go from newb to pro in SVG... you're teaching style is amazing.
This just blows my mind! It makes me realise how superficially I know about SVG. Great Video 👌
Jesus Christ what high quality content. I wish I discovered this channel when I was still in school studying for web design & development.
Mind blown. Dude... you're insane. I love it!
Why Front End Center video is best video.
Because because
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!
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.
This is the "SVG is awwwsome" talk I've been needing. Great work mate
OMG .. this video is an eye opener. I never knew we can do so much with SVG.
Thankyou so much for sharing
SO HIGH QUALITY PLEASE DON'T STOP
What a power Inline SVG has got! Thanks for sharing. 👍😃
This is some of the cleanest and simplest code I've seen in a good while.
There's a special place in heaven for people just like you :)
Great explanation! Subbed!
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.
I am just seeing this for the first time. You are blowing my mind.
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.
great video.. u deserve a million subscribers for your teaching style. soon u will hit that number
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....
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)?
This is exceptionally well presented on all fronts, well done.
You unknowingly also taught me some advanced CSS. Thanks for the video.
I'm just starting to look at svg and I'm so glad I found this video, thank you very much.
4:01 benefits of inline svg💚
Watched for about 5 minutes. This channel is gold. Get back to making video content already.
Learned new things about SVG today, thank you!
Satisfied and Jealous at the same time. How is that possible?! Liked and Subscribed.
Great dasharray & dashoffset explanation, thanks!
Thanks for your time and effort! I learned about more than SVGs in this video!
In love with SVG. Will start using using it.
Absolutely good presentation, content & production quality! Keep up the great work!
You can control svg inside object, embed, with yourObject.contentDocument.querySelector("svg") as long as everything is same-origin.
I can't believe this tutorial is 7 years old!
I enjoyed the first video so much, I might buy 1 month.
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?
A lovely british accent and awesome tutorial. Just the way I like it.
Great tutorial! Thanks for sharing!
Saved this for later, looks promising!
This tutorial is absolutely amazing, thanks!
Great asset, instant subscriber!
Amazing!
Also impressed by the way of your editing video. What is the name of video editing program by the way?
How did you get 0.5 and why did you divide it by 2? 11:05 of the video.
Mind=Blown thank you so much for this.
Master at work.
Fantastic. Thanks a lot for this simple and powerful example! :)
Diamond quality.
This is awsome. Thank you!
just insane dude !!!!!!
This is an amazing tutorial, thank you so much.
This is brilliant. Thank you so much.
Wow, very good quality tutorials. Why did you stop making videos?
thank you for this... I love it...
This is really helpful, thank you!
concise & clear points. thanks
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? ;)
Great stuff, thank you ;)
@6:08 what’s that plugin called that shows arrows which indicates it is newline?
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 😀
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?
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/
Cool, I'll have to check your subscription. I wasn't aware of those drawbacks, I thought the only issue was browser support.
Good info thanks. I like the idea of using an or object [contenteditable]
Great video, thanks!
Great tut thanks!
Very informative!
Nice video. Very didactic. Tks.
Thanks for the very informative video :D
You totally convinced me
hey, 11:05 why did he divide by 2 and - 0.5?
This video was a surreal reminder that I don't know shieeyyt. Oh well, still a great video 🙌🏽
Love it !
how much will the svg affect the overall size of the websites as compared to plain css?
Hello, as mentioned in your video - you said there will be a javascript version for svg.. any updates on that? Excited to learn!
Great video !!!!
Excellent! thanks
I thought this channel was dead, glad to see that I was wrong.
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?
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
Ok, thanks for the advice.
@6:08 what’s that plugin called that shows arrows which indicates it is newline?
wrong thread haha
thanks a lot
Exquisite!
Brilliant!
How are you able to show output at the same time you write css without having to save ?
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 ?
which theme you are using, also which font
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!
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?
love you man
amazing! thank you!
SVG can be Standalone File with reactjs component
Awesome!
What is font used in pink color?
Liked. Subscribed. Dinggggg ALL
Wow dude, amazing!
What is the name of the editor that's being used in this video?
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.
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
thank you :)
amazing
What is the name of the editor that's being used in this video?
lot usefull, thanks
hey, 11:05 why did he divide by 2 and - 0.5?
Please explain how is this simple? This is basically advanced CSS and this is complicated.
yeah they broke everything lol
ruclips.net/video/3UsQxAIyr3o/видео.html
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.
please create more svg videos...
Make a video where you show how to manipulate external svgs. I've been struggling with that for a long time. It needs to be a complex svg, say a character with lots of different elements with their own ID's. So far I've manage to change simple solid fills but not gradients on runtime. It's also annoying since I have to upload the files to the server every single time I make a change because of cross origin, I don't know if you can fake that with a desktop server solution. Anyways. Do a video on that.
Alternatively. Show a way to have inline complex svgs where you have more control. My problem would be that I don't understand where to put them because 1 single svg is thousands of lines of code and I need to pull in hundres of them for my project. So is there a simple way to store them inline so to speak?