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.
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!
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.
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 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....
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?
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/
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!
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
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 😀
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? ;)
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?
Hi, Glen, I'm wanting to create a fansite for the web series, Chrontendo. As a part of that, I'd like to use web standards to recreate his wordmark/logo. He uses Georgia Pro Bold with some simple text shadows, which are simple enough to replicate. I've been stuck for over half a year now on the fact that he uses what Adobe Illustrator would call an 'Envelope Distort' effect on the text. I re-created the effect as a baked SVG image last year, but would love to have this be dynamic on the site so that if someone translates the page, the logo is translated along with the rest of the page with the 'fisheye lens' effect intact. If you could illustrate how to do this, I would be most grateful. Please contact me if I can pay you for a solution to this challenge.
I think my bigger issue with inline SVG is, in the event that I need to reference the same graphic multiple times, I'm having to store and transfer it multiple times. For example, my logo is in the top left on desktop, in the hamburger menu on mobile, and in the footer. As an , that's 1 file with 3 references, and the first one caches for the 2nd and 3rd. This means that my 3.3K SVG effectively takes up 9.9K per page transfer, and I have to maintain a large number of lines inline unless I want to use a PHP include, which also hurts my CPU time. While yes, inline svg is great for small objects, things like a logo can be a pain to manage. My dream solution is that mask-image would get better support so I could use it. Currently, I'm using masks with sprite fallbak, which are actually less efficient than inline. Still looking for a better solution that ticks all the boxes.
This is actually the exact issue I cover in episode 4 (which is a subscriber-only one I'm afraid - frontend.center/ep4-automating-an-inline-svg-workflow) Basically, inline SVG is the best way to _include_ an SVG on the page (in terms of rendering flexibility) but you need to do some extra work to keep things cacheable, and only referenced in one place. Ep4 demonstrates how to do this, working with a spritesheet exported from Sketch. I hope you'll consider subscribing and check it out!
Easy enough to get around once you understand more of the SVG spec. We have the tag for this purpose, so once your inline SVG is loaded up, you can reference it with an href property effectively instancing a new copy of your SVG src similar to the img tag: sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/#the-use-element
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 👌
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.
Jesus Christ what high quality content. I wish I discovered this channel when I was still in school studying for web design & development.
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.
OMG .. this video is an eye opener. I never knew we can do so much with SVG.
Thankyou so much for sharing
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!
What a power Inline SVG has got! Thanks for sharing. 👍😃
Mind blown. Dude... you're insane. I love it!
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.
This is the "SVG is awwwsome" talk I've been needing. Great work mate
Why Front End Center video is best video.
Because because
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!
SO HIGH QUALITY PLEASE DON'T STOP
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.
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)?
I am just seeing this for the first time. You are blowing my mind.
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....
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.
Satisfied and Jealous at the same time. How is that possible?! Liked and Subscribed.
This is exceptionally well presented on all fronts, well done.
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?
Great dasharray & dashoffset explanation, thanks!
You can control svg inside object, embed, with yourObject.contentDocument.querySelector("svg") as long as everything is same-origin.
Wow, very good quality tutorials. Why did you stop making videos?
Watched for about 5 minutes. This channel is gold. Get back to making video content already.
Learned new things about SVG today, thank you!
Amazing!
Also impressed by the way of your editing video. What is the name of video editing program by the way?
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.
Absolutely good presentation, content & production quality! Keep up the great work!
How did you get 0.5 and why did you divide it by 2? 11:05 of the video.
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!
Thanks for your time and effort! I learned about more than SVGs in this video!
Great asset, instant subscriber!
Hello, as mentioned in your video - you said there will be a javascript version for svg.. any updates on that? Excited to learn!
How are you able to show output at the same time you write css without having to save ?
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?
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 ?
In love with SVG. Will start using using it.
Great tutorial! Thanks for sharing!
Saved this for later, looks promising!
@6:08 what’s that plugin called that shows arrows which indicates it is newline?
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
Master at work.
how much will the svg affect the overall size of the websites as compared to plain css?
This tutorial is absolutely amazing, thanks!
I can't believe this tutorial is 7 years old!
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
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 😀
A lovely british accent and awesome tutorial. Just the way I like it.
I enjoyed the first video so much, I might buy 1 month.
This is awsome. Thank you!
Mind=Blown thank you so much for this.
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? ;)
Fantastic. Thanks a lot for this simple and powerful example! :)
just insane dude !!!!!!
which theme you are using, also which font
What is font used in pink color?
Good info thanks. I like the idea of using an or object [contenteditable]
This is an amazing tutorial, thank you so much.
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.
thank you for this... I love it...
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.
concise & clear points. thanks
Great stuff, thank you ;)
4:01 benefits of inline svg💚
This is brilliant. Thank you so much.
What is the name of the editor that's being used in this video?
This is really helpful, thank you!
SVG can be Standalone File with reactjs component
Very informative!
Great video !!!!
Great tut thanks!
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?
Nice video. Very didactic. Tks.
Diamond quality.
Great video, thanks!
Love it !
Hi, Glen, I'm wanting to create a fansite for the web series, Chrontendo. As a part of that, I'd like to use web standards to recreate his wordmark/logo.
He uses Georgia Pro Bold with some simple text shadows, which are simple enough to replicate.
I've been stuck for over half a year now on the fact that he uses what Adobe Illustrator would call an 'Envelope Distort' effect on the text.
I re-created the effect as a baked SVG image last year, but would love to have this be dynamic on the site so that if someone translates the page, the logo is translated along with the rest of the page with the 'fisheye lens' effect intact.
If you could illustrate how to do this, I would be most grateful.
Please contact me if I can pay you for a solution to this challenge.
Please explain how is this simple? This is basically advanced CSS and this is complicated.
yeah they broke everything lol
th-cam.com/video/3UsQxAIyr3o/w-d-xo.html
I think my bigger issue with inline SVG is, in the event that I need to reference the same graphic multiple times, I'm having to store and transfer it multiple times. For example, my logo is in the top left on desktop, in the hamburger menu on mobile, and in the footer. As an , that's 1 file with 3 references, and the first one caches for the 2nd and 3rd. This means that my 3.3K SVG effectively takes up 9.9K per page transfer, and I have to maintain a large number of lines inline unless I want to use a PHP include, which also hurts my CPU time. While yes, inline svg is great for small objects, things like a logo can be a pain to manage. My dream solution is that mask-image would get better support so I could use it. Currently, I'm using masks with sprite fallbak, which are actually less efficient than inline. Still looking for a better solution that ticks all the boxes.
This is actually the exact issue I cover in episode 4 (which is a subscriber-only one I'm afraid - frontend.center/ep4-automating-an-inline-svg-workflow)
Basically, inline SVG is the best way to _include_ an SVG on the page (in terms of rendering flexibility) but you need to do some extra work to keep things cacheable, and only referenced in one place. Ep4 demonstrates how to do this, working with a spritesheet exported from Sketch. I hope you'll consider subscribing and check it out!
Easy enough to get around once you understand more of the SVG spec. We have the tag for this purpose, so once your inline SVG is loaded up, you can reference it with an href property effectively instancing a new copy of your SVG src similar to the img tag: sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/#the-use-element
In this case, you should embed the SVG only once - be sure to give it an id, and then use href to create other instances by referencing the SVG id.
Thanks for the very informative video :D
love you man
what font do you use?...
The codepen uses Avenir Next and Arial.
Exquisite!
How do you make this hot reload?
I use browsersync.io/ with some flags, described here: twitter.com/frontendcenter/status/920096669940592640
please create more svg videos...
Excellent! thanks
This video was a surreal reminder that I don't know shieeyyt. Oh well, still a great video 🙌🏽
Brilliant!
You totally convinced me
hey, 11:05 why did he divide by 2 and - 0.5?
I thought this channel was dead, glad to see that I was wrong.
amazing! thank you!
Awesome!
Why draw 2 identical lines, when all your doing is changing the css?