You demystified SVG by gradual explanation of every little concept going from raster to vector representation until how to draw a shape , you even paid attention for people who may have seeing or hearing troubles , very professional videos that looks spontaneous. Many thanks Kevin
I know this is an old video, but it's a nice introduction to SVG for me. I recently built a countdown clock with a progress ring. I knew how to build the clock, but didn't know how code a progress ring; so I had to search how to do that. The search results I found used this method of a circle inside an SVG element; I didn't understand what I was following, but was able to complete clock by following the examples. So now, I'm coming back to see how this actually works. Your explanation of the seemingly minor details helped a lot - I found myself saying " aha... that's why..", on more than one occasion. Thank you!
I think you should give PHPStorm a spin for the rest of the SVG series. Don't worry about learning PHPstorm, just open your SVG and edit away. The autocomplete is good plus you can reformat your code to pretty print. However, the killer feature is the preview pane complete with Photoshop style grid. Should look better on the videos, plus CTRL+S refreshes the preview. The other top tip for working with SVGs is to work in Chrome in Workspaces mode, that silently reloads your CSS and images if you update them. Handy if you have inlined your SVGs into CSS... Look forward to the rest of the series including how you do the viewbox. Keep it up, great series!
Another must watch for mastering SVGs is Lea Verou's latest talk. This shows how to get SVGs into a stylesheet so they are maintainable and don't add document weight or require extra downloads. I think she also mentions the sepia trick for colouring them too. ruclips.net/video/vs34f9FiHps/видео.html
is there any difference on working with inkscape svg instead of coding the file? I ussualy code only basic shapes for logos icons and other stuff use inkscape (plain svg file). My questions is, this "plain svg" will work excatly as a non inkscape svg or not.
It should do. Any Inkscape only things won't work. Also, some effects are rendered differently depending on the software. The SVG format has a standard definition.
Kevin, thank you for the SVG video. I use 100% SVG coding for NatureTrailMaps.net, since 2016. I will gladly share my coding examples. I have found no need for any other coding tools, such as Illustrator, Inkscape, Javascript, PHP etc.
Great video. When I "draw" a rectangle and I want to add a line to it - it doesn't work. Only the rectangle appears, but when I remove the rectangle -> the line appears. (I cannot draw more than one 'object') Any idea why? Thanks in advance!
Hi Very interesting video, would it be possible to explain how to create graphs using SVG. Of course, this is extensively used by a lot of libraries like high-charts etc.
I love the idea, but for the moment it's a bit beyond what I know as well. I agree that it can be super useful, and I know there are some libraries for this...
Yes, there are so many libraries. At my work, they implement their own graphs using svg. Before bothering them i would like to know some basics. Ofcourse i can go through their code but its scares shit out of me.
i know that the default cx and cy is 0,0 but why does making the cy to positive goes down but in coordinate system going down is negative?(Any answer is greatly appreciated)
How do you create shapes in JavaScript? The mySVG.appendChild(document.createElement("circle")) statement doesn't seem to be working, although it does put the markup in there.
At 6:00, why are the black borders showing on the four sides? The width for the svg dom element was 250px, the radius of the circle was 125px. the circle should've fully filled the box on the 4 sides, while showing partially in the corners. I imagine it should look like the first one jsbin.com/mogorepoto/1/edit?html,output Is there something like a default padding or margin for svg elements?
With vectors, the default for a stroke is actually half on the inside, half on the outside. I'm not sure if there is a way to change it with SVG to be honest, I've never bothered to look. If you create with vector software, you can toggle the stroke to be centered (like it is here), or outside or inside only.
bro I know lil bit Vanilla JavaScript n jQuery . i m still try learning new things both . it's benefit to learn React or Vue JavaScript . wch one is better . is it good to learn Bulma and materialize Css frame work too ? .
I'd say learn as much vanilla JS as possible. If you want to learn something like React or Vue, I tend to prefer how Vue approaches things, but React is a lot more popular. Those are more for web apps though. I'd focus on learning the fundamentals of HTML, CSS, JS, then finding a popular framework to add to your arsenal.
I talk about that in another video 😁 but it's good to understand how it works, because you'll want to optimize what comes out of Illustrator. Plus, if you want to do anything like animation you'll want to dive in there and know what you're looking at
Well I personally thinks this is way more fun, to be able to create your own images with just a bit of code - that does not even lose it's graphics when you scale it up.
![What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]](http://i.ytimg.com/vi/TBYJ2V1jAlA/mqdefault.jpg)
![What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]](/img/tr.png)
I probably won't say what has already been said but again, very clear, concise video in just the right moment. You are a gift to FE developers
You demystified SVG by gradual explanation of every little concept going from raster to vector representation until how to draw a shape , you even paid attention for people who may have seeing or hearing troubles , very professional videos that looks spontaneous.
Many thanks Kevin
Kevin, Your tutorials are so simple. Thank you very much. I used to run from svg files, but seeing this broke that fear.
Thanks again!
I know this is an old video, but it's a nice introduction to SVG for me. I recently built a countdown clock with a progress ring. I knew how to build the clock, but didn't know how code a progress ring; so I had to search how to do that. The search results I found used this method of a circle inside an SVG element; I didn't understand what I was following, but was able to complete clock by following the examples. So now, I'm coming back to see how this actually works. Your explanation of the seemingly minor details helped a lot - I found myself saying " aha... that's why..", on more than one occasion. Thank you!
Kevin, you are a life saver! Your videos are so detailed, informative, so simple and easy to understand. Thank you so much! SVG just blow my mind
OK, I'm ready for Part 3!
Brilliant stuff Kevin.
I've just gotten into SVG's and this has answered so many of my noon questions.
Cheers mate!
Kevin, you are fantastically Awesome in SVG
Thank you. This is a great explanation of SVG.
I'm a graphic designer so im extremely familiar with illustrator. this is a godsend
I've been fearing svg. I used illustrator, but the coding part has scared me. Thank you :)
Same here, but it isn't so bad, and once you understand it, it makes it easier to deal with once you're done in illustrator
SVGs slowly loose their mystery! Thanks Kevin!
Thank you, Kevin.
Awesome tutorial
I think you should give PHPStorm a spin for the rest of the SVG series. Don't worry about learning PHPstorm, just open your SVG and edit away. The autocomplete is good plus you can reformat your code to pretty print. However, the killer feature is the preview pane complete with Photoshop style grid. Should look better on the videos, plus CTRL+S refreshes the preview. The other top tip for working with SVGs is to work in Chrome in Workspaces mode, that silently reloads your CSS and images if you update them. Handy if you have inlined your SVGs into CSS... Look forward to the rest of the series including how you do the viewbox. Keep it up, great series!
Thanks for the suggestion! It sounds really useful, I might have to check it out :)
Another must watch for mastering SVGs is Lea Verou's latest talk. This shows how to get SVGs into a stylesheet so they are maintainable and don't add document weight or require extra downloads. I think she also mentions the sepia trick for colouring them too. ruclips.net/video/vs34f9FiHps/видео.html
Oh, I'll have to check that out, many thanks for sharing the link. I'm a big fan of her stuff!
Took good Sir Thumbs up, All your tutorials are very easy to learn and understandable, thank you
Simple and great explaination
this is phenomenal
easy to listen to, super helpful. Thank you!
Wow I!!! Very clear… excellently explained.
Excellent Kevin. I learned a lot from it.
very clear and great explanation, thank you!
Thanks buddy for the explanation!!
Kevin, your are great! Thank you very much bro!
Thanks man, extremely good explaination
You are a Guru indeed!!
Thank you Kevin. Great tutorial!
thanks for keeping the spelling mistakes in the final cut. also thanks for the follow up on Twitter.
Nicely explained. Thank you 👍
we want more videos on svgs
great vid bro! can't wait for more on this!
very good work sir!
clarify this! the x axis goes from left to right and y axis goes from top to bottom? ( normally y axis is from bottom to top but not on svg) right?
is there any difference on working with inkscape svg instead of coding the file? I ussualy code only basic shapes for logos icons and other stuff use inkscape (plain svg file). My questions is, this "plain svg" will work excatly as a non inkscape svg or not.
It should do. Any Inkscape only things won't work. Also, some effects are rendered differently depending on the software. The SVG format has a standard definition.
Awesome tut. Thanks!
thank you for a nice tutorial. It really help
Thank you so much!!! What tool do you use for creating SVGs? inkskape?
thank you
Damn , thank you man
Very awesome , regard the closing circle tag , is this also apply in the video tag
Kevin pls what tool do you use to create svg files? I mean really complex svg
He uses Adobe illustrator.
@@LuisJimenezr01 Yh Thanks
Vídeo Incrível! Obrigado!
Kevin, thank you for the SVG video. I use 100% SVG coding for NatureTrailMaps.net, since 2016. I will gladly share my coding examples. I have found no need for any other coding tools, such as Illustrator, Inkscape, Javascript, PHP etc.
Which resources did you use to learn svgs?
Great video. When I "draw" a rectangle and I want to add a line to it - it doesn't work. Only the rectangle appears, but when I remove the rectangle -> the line appears. (I cannot draw more than one 'object') Any idea why? Thanks in advance!
Genius
Great stuff. :-)
Hi Very interesting video, would it be possible to explain how to create graphs using SVG. Of course, this is extensively used by a lot of libraries like high-charts etc.
I love the idea, but for the moment it's a bit beyond what I know as well. I agree that it can be super useful, and I know there are some libraries for this...
Yes, there are so many libraries. At my work, they implement their own graphs using svg. Before bothering them i would like to know some basics. Ofcourse i can go through their code but its scares shit out of me.
i know that the default cx and cy is 0,0 but why does making the cy to positive goes down but in coordinate system going down is negative?(Any answer is greatly appreciated)
in svgs the x axis is from left to right and y axis is from top to bottom ig?
Thank you, really good stuff. Great
Nice stuff! Keep going. How about text tags in svg?
I wasn't planning on it, but you're not the first to mention it, so I might add that in, but maybe at a later date as an add-on to the series
Kevin please why my emmet is not suggesting svg abbrevations?
I find that polygon works a lot like clip-path: polygon( ) instead of clipping something , its just building a shape from nothing in the viewbox .
I suppose you could make a SVG mask and call that on your SVG.
Woooooooooooooooooooooooooooooow this video is really very benefit
How do we make the circle bigger
How do you create shapes in JavaScript? The mySVG.appendChild(document.createElement("circle")) statement doesn't seem to be working, although it does put the markup in there.
yes yes thankyou so muchhh!!
6:37 Kevin we don't want you to have a stroke.
What code editor are you using for html?
Thks for sharing subscribed
Glad you liked it, thanks for the sub!
At 6:00, why are the black borders showing on the four sides? The width for the svg dom element was 250px, the radius of the circle was 125px. the circle should've fully filled the box on the 4 sides, while showing partially in the corners. I imagine it should look like the first one jsbin.com/mogorepoto/1/edit?html,output
Is there something like a default padding or margin for svg elements?
With vectors, the default for a stroke is actually half on the inside, half on the outside. I'm not sure if there is a way to change it with SVG to be honest, I've never bothered to look. If you create with vector software, you can toggle the stroke to be centered (like it is here), or outside or inside only.
@@KevinPowell Thanks, great tutorials.
or download krita and use the vector tools and export the vectorial layer as SVG
I'll be looking at doing that as well :)
sketch export a lot attributes that confused me, can you tell something about how sketch show the svg code?
I'll be looking at using software to make SVGs later on :)
bro I know lil bit Vanilla JavaScript n jQuery . i m still try learning new things both . it's benefit to learn React or Vue JavaScript . wch one is better . is it good to learn Bulma and materialize Css frame work too ? .
I'd say learn as much vanilla JS as possible. If you want to learn something like React or Vue, I tend to prefer how Vue approaches things, but React is a lot more popular. Those are more for web apps though. I'd focus on learning the fundamentals of HTML, CSS, JS, then finding a popular framework to add to your arsenal.
thank you so much bro . i will learn pure JavaScript .
i also need some animation with svg..
Smashed the like button... :)
My chrome doesnt seem to want to display the full hight and cuts me off at around 100px. Anyone got any Idea how to fix this?
Curious. Are you setting a size on them?
Yes, Ancap coolors...
💖💖💖💖💖
this looks like a html only version of canvas
Johnson Paul Martin Christopher Perez Linda
does it makes my hairs grey?
x-access, y-access
not every hero wears a cape if you know what i mean
Williams Thomas Harris Joseph Wilson Daniel
You didn't say anything about the software
It is easier than canvas.
So much easier!
Thanks .... Material.io Crash course ???
I've never used it, so no promises!
Great
I can't help to increase speed for your video, it is too slow...
You should be able to put it up to 2x speed in the video settings
Please explain points clearly.
What points are you unclear about?
@@KevinPowell Polygon points.
Why do all this when you can create this in illustrator and export as svg?
I talk about that in another video 😁 but it's good to understand how it works, because you'll want to optimize what comes out of Illustrator. Plus, if you want to do anything like animation you'll want to dive in there and know what you're looking at
Well I personally thinks this is way more fun, to be able to create your own images with just a bit of code - that does not even lose it's graphics when you scale it up.