Front End Center - Why Inline SVG is Best SVG
HTML-код
- Опубликовано: 29 сен 2024
- SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques.
In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction that only need a handful of lines of SVG + CSS. But we'll also consider why it is that Inline SVG, in particular, is so much easier to work with than embedding SVG in other ways.
Want to see more? Subscribe at frontend.center
One of the most underrated channels I've ever seen
This is the "SVG is awwwsome" talk I've been needing. Great work mate
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.
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.
Excellent! thanks
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
Why draw 2 identical lines, when all your doing is changing the css?
Why Front End Center video is best video.
Because because
Mind blown. Dude... you're insane. I love it!
Wow I wish you made a tutorial on how to go from newb to pro in SVG... you're teaching style is amazing.
Utility to make sprites: goo.gl/sDpdEh ✨
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
This just blows my mind! It makes me realise how superficially I know about SVG. Great Video 👌
This video was a surreal reminder that I don't know shieeyyt. Oh well, still a great video 🙌🏽
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 ?
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.
Wow, very good quality tutorials. Why did you stop making videos?
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.
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?
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
OMG .. this video is an eye opener. I never knew we can do so much with SVG.
Thankyou so much for sharing
how much will the svg affect the overall size of the websites as compared to plain css?
I can't believe this tutorial is 7 years old!
Pushing Pixels until it works^TM!!
Jesus Christ what high quality content. I wish I discovered this channel when I was still in school studying for web design & development.
There's a special place in heaven for people just like you :)
Great explanation! Subbed!
which theme you are using, also which font
How are you able to show output at the same time you write css without having to save ?
You can recreate the same bottom border animation using CSS pseudo elements and animation... avoids having to make a mess of the HTML structure.
While inline SVG has the most power, it also potentially litters the structure with purely presentational elements.
Don’t get me wrong, I liked the SVG explaination. It was just clear that semantics was not part of this video... no paragraphs grouping form labels and inputs (W3C) and the redundancy of inputs with the class of input and labels with the class of label. An OOCSS methodology here seem overkill for the scope of this particular project/demo. More semantic selectors might have allowed for again a less cluttered and streamlined markup.
Just some fuel for though...
semantics is nonsense when you consider the way modern front end is written with all the JS, CSS frameworks.
When you make edits, PLEASE SLOW DOWN. You're a wizard with your editor so I had to pause and rewind like a million times to understand what edit you just made. Making it a little unpleasant. Great content though, have already implemented new knowledge into projects. Thanks.
Maybe you can set the video speed to 0.75.
thank you for this... I love it...
Liked. Subscribed. Dinggggg ALL
please create more svg videos...
What is font used in pink color?
Fantastic. Thanks a lot for this simple and powerful example! :)
Great asset, instant subscriber!
This is awsome. Thank you!
You can control svg inside object, embed, with yourObject.contentDocument.querySelector("svg") as long as everything is same-origin.
4:01 benefits of inline svg💚
Great stuff, thank you ;)
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?
Diamond quality.
just insane dude !!!!!!
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!
sir waiting for new tuts...
kindly make it 4 videos per month...
so it will be 1 over a week...
15 days of wait for a video is very long
Watched for about 5 minutes. This channel is gold. Get back to making video content already.
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.
great video.. u deserve a million subscribers for your teaching style. soon u will hit that number
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)?
Satisfied and Jealous at the same time. How is that possible?! Liked and Subscribed.
I thought this channel was dead, glad to see that I was wrong.
What a power Inline SVG has got! Thanks for sharing. 👍😃
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 😀
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.
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!
A lovely british accent and awesome tutorial. Just the way I like it.
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?
Hello, as mentioned in your video - you said there will be a javascript version for svg.. any updates on that? Excited to learn!
Thanks for your time and effort! I learned about more than SVGs in this video!
Amazing!
Also impressed by the way of your editing video. What is the name of video editing program by the way?
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? ;)
thanks a lot
Exquisite!
@6:08 what’s that plugin called that shows arrows which indicates it is newline?
Awesome!
Good info thanks. I like the idea of using an or object [contenteditable]
I enjoyed the first video so much, I might buy 1 month.
Making the borders with SVG and the dasharrays seems overly complicated. You can just do a scaleX from 0 to 1 to get the same effect. Easier to animate when width is unknown too. Moving the transform origin (which is centered by default) you can make it grow from anywhere in the line.
Also "svg is simpler, because it has no z-index, it just renders top to bottom". Yeah, that is how dom works also by default.
Good talk for the rest of the video though!
Great tutorial! Thanks for sharing!
up
Great dasharray & dashoffset explanation, thanks!
You are a magician :O!. Master Yoda, teach me how to use the force
How did you get 0.5 and why did you divide it by 2? 11:05 of the video.
What is the name of the editor that's being used in this video?
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....
Learned new things about SVG today, thank you!
You unknowingly also taught me some advanced CSS. Thanks for the video.
Nice video. Very didactic. Tks.
Absolutely good presentation, content & production quality! Keep up the great work!
Saved this for later, looks promising!
what font do you use?...
The codepen uses Avenir Next and Arial.
Mind=Blown thank you so much for this.
SVG can be Standalone File with reactjs component
This is some of the cleanest and simplest code I've seen in a good while.
I am just seeing this for the first time. You are blowing my mind.
Very nice! thank you
In the meantime, me trying to center things in a responsive way on css
This is exceptionally well presented on all fronts, well done.
I'm just starting to look at svg and I'm so glad I found this video, thank you very much.
This is the typical youtube channel you don't want to have stopped
why is it stopped ??
Thanks for the very informative video :D
This is really helpful, thank you!
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
This tutorial is absolutely amazing, thanks!
Great video, thanks!
This is an amazing tutorial, thank you so much.
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.
In love with SVG. Will start using using it.
This is brilliant. Thank you so much.