What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]

this solved my problem - thanks : -)

Thanks - I FINALLY get it. That ViewBox thing has really been puzzling me for longer than I'll care to admit

Hi i have a question,first of all very comprehensive video,the thing is I made an alert svg with 300px width and 200px width and a viewBox="0 0 150 100" so how it is working that even if I change the width of my svg say 30px and 20px its the SVG fits my viewport ,it working fine but I didn't understand how it scaling itself based on the width I provided

i really love your videos man. you're a good teacher. ive been doing web development for 20+ years, and have never sat down and really dove into svg's... lol...

you are nothing less than a god!!!!

Hopefully we will learn how to change the viewbox numbers without having to edit the svg code. Maybe with CSS?? I'm pretty sure I could stumble through doing it with jQuery, but CSS would be dope.

Great that i had this tutorial

This is very helpful.

first few minutes your definition is very confusing and incorrect. I think you misspoke a few times and said viewport instead of viewbox?

Is it possible to set multiple veiwbox on 1 svg? I mean setting viewBox in class="twitter" and not in svg. So you can show 3 icons on seperate places?

Nah this the best tutorial out there man.

You're amazing!

thanks!

Thanks, nice explanation of viewBox

You explained the viewport and viewbox so well. Thank you.

It's werid because we are working whit vectors! I got it now!

Thank you so much, its a great explanation

Explaining svg in photoshiop 😂😂

Thank you

In the instance of using an image which is an svg, how would i manipulate it's dimensions and positioning? Really struggling on this and there are no videos I can find

I kind of conceptualize it as though I'm looking through binoculars, the bino's represent the "viewBox" and when I pan the bino's, changes only what I see, not what is actually there, so in retrospect, you're moving the "binoculars", not what you see through the binoculars.

Can we use this svg as a pseudo element content??

You are whispering

This tutorial is so helpful.
Thanks.

I learned a lot, thank you kevien

Great! Now I understand view box. Because of your explanation with Photoshop!!

This viewBox explanation was within... the viewBox

This is so well explained. Many thanks! 🙏🙏🙏

Belíssima Aula! Você é um professor fantástico! Obrigado!

Merci pour cette explication grâce à laquelle j'ai enfin compris la viewBox, après plusieurs tutoriels !

excellent video!

I have gotten so good in CSS it's hard to believe that. I almost followed all of your videos and Mann I feel so good I flaunt my CSS skills in front of my friends and they just get surprised everytime. Whenever any of my friends get stuck styling up something using CSS they reach out to me every single time. Kevin thanks Mann and cheers to making more such videos

Keep up your good work! It is good to know that between a lot of trash content on YT recently we can find such a pearls like your movies.

So, can the viewbox be used to control the svg responsively?

Thank you, great job!

amazing simple explanation, thx!

The best explanation of viewBox i have ever seen.

The best explanation about SVG

Learning svg now. This video was amazing, thank you!

Wow thank you that was amazing i was reading alot about it but did not understand much since english not my native language i was having bad time translating rather than understanding

Thank you) Like & Subscribe)

Learned tons! Thank you Kevin!

thanks this was v useful.

I never understood that ViewBox stuff in text. This video was a god-send. Thank you very much :)