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

[@zoliky]

This is, hands down, the best explanation of viewBox I've seen.

[@KevinPowell]

Thanks alot! Took me forever to even understand it myself, I'm glad I managed to figure out a clear way to explain it. It's such a weird concept.

[@codewithegai]

No cap

[@martefact]

I could not agree .more. Excellent!

[@Iammrunkown]

I'm with you.

[@AkashYadav-rj6fn]

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

[@djdx2]

Kevin is the god of CSS

[@totalnewbie8619]

Thank you for a great tutorial Mr. Powell. It is people like you that share their knowledge freely with the world that restore my faith in humanity.

[@8nasir7]

5:57-6:06 sums up the difference in under 10 seconds. This guy really knows how to explain. These 18 minutes are what I needed to understand in those 3 years. Thank you very much @Kevin Powell

[@KevinPowell]

So glad that the video helped you out Nasir!

[@KayahanKahrman]

Finally a clean and understandable explanition of viewBox and viewoport! This is the best explanition on the internet. Photoshop example really help a lot. Thanx and keep up the good work. :)

[@KevinPowell]

Glad that the video helped clear things up :). It's a hard concept, I'm happy that the Photoshop example worked!

[@darkfuryroblox8540]

I am a 12-year-old computer scientist and I am learning this so I can make my game. I am learning SVG graphics on LinkedIn learning and the lesson they had on SVG viewport and etc was confusing. This video makes it a lot simpler. Keep up the good work.

[@AnthonyJackman]

At video time of 15:02, you mentioned this is your zoom and this is your pan with relation to viewBox. All of the bells (ding ding ding) just went off in my head. Now I get it!

[@aeronwolfe7072]

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...

[@bachaplegic]

Reminds me of hardware scrolling and sprite management when used to program on my Amiga computer back in the day. I might give svg a play. Great work, very clear.

[@ThatGuyAnonymous]

Great explanation as always. I don't think I could have been able to understand this without your video.

[@abhimanyusharma2094]

You are a CSS geek. Keep up the good work. :)

[@dutu000]

Best SVG viewport tutorial on KZbin!!! Very logic and well explaned!

[@patilyb]

The best explanation of viewBox i have ever seen.

[@vedtam]

I've read over and over about the viewBox but couldn't understand until I saw your great PhotoShop example. Thanks!!!!! :)

[@KevinPowell]

Glad I could help! It is such a strange thing, even when you understand the idea behind it.

[@tarek3735]

it is basically a camera view

[@tallitvak5325]

I started learn SVG yesterday, you saved me so much time to understand so many concepts! Thank you, subscribed :)

[@KevinPowell]

Glad that I was able to help, and thanks for the sub!

[@gavinm2339]

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

[@fervideos2011]

Amazing explanation! it shows dedication and passion about code!!

[@gregorytippett9692]

Note that at 10:30, you say: "My viewport, this red box", and then shortly after state that the viewport is not the red box. Otherwise, great introduction!

[@GuitarreroDaniel]

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

[@tanikobas6991]

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

[@nathancornwell1455]

In the future, could you possibly do a series on animating SVG? I've seen some incredible things accomplished by animating SVG since you can animate individual parts of the SVG or animated borders, animated background images, etc...It's quite powerful.

[@s_u_z_u9494]

This is extremely helpful, both the visuals and the explanation, and i'm officially subscribed!

[@prathameshsawant5574]

Best explanation about viewport and viewbox, I was struggling with this. thanx it really helped.

[@KevinPowell]

Such a hard concept to talk about, and even harder to visualize. I'm glad that I was able to make some sense of it!

[@perezshealtiel7011]

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

[@OlehBiblyi]

The best explanation about SVG

[@bambooindark1]

So the concept is, viewport is the red border box you saw in this video, that red [border]-[box] thing on webpage. viewBox is a more abstract concept. You can imagine now you finished drawing a [svg image]-[work], then you draw a special translucent [rectangle]-[box] (the viewBox) on the top of your work, then you "scale up" or "scale down" the full canvas until it fit your viewport (the viewport need to "contain", not "cover" the viewBox) (if there is extra spaces, center aligned viewBox to viewport), this is what you finally see in webpage. Notice, the 4 arguments of viewBox is: startingAbsoluteX startingAbsoluteY endingRelativeX endingRelativeY (Where startingAbsoluteX + endingRelativeX = endingAbsoluteX)! Not startingAbsoluteX startingAbsoluteY endingAbsoluteX endingAbsoluteY or startingAbsoluteX startingAbsoluteY expendWidth expendHeight!

[@cowcow505]

I am really happy that I found your svg series

[@KevinPowell]

I'm glad that you've found it helpful!

[@Andrans1]

Nah this the best tutorial out there man.

[@dominiktargosz3094]

Wow, such a hard topic explained so smoothly

[@KevinPowell]

Yup, it's a strange one. I hope I did okay!

[@DaveMcGarry]

Thanks for your concise explanations... Always look forward to your videos.

[@sqbok]

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.

[@haroldmcbroom7807]

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.

[@christopheribault3945]

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

[@KavYT]

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

[@ondrejmarek9752]

This tutorial is so helpful. Thanks.

[@TerjeNesthus]

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

[@sampson1952]

Let me ask you a question to clarify my understanding. Would it be accurate to say that the "ViewBox" is analogous to the canvas on which the SVG shape is being written and the "ViewPort" is the window, sitting on top of the canvas, through which one can see the canvas??

[@KevinPowell]

That's one way to see it, yes :D

[@Fateslav]

Great explanation 👍 This reminds me of Google map kit where you set camera position on the map

[@manohoo]

Thank you, great job!

[@hugopierre3458]

The better explaination ever ! Thx's veryyyyy much

[@hasanmirarabshahi1956]

Thanks, nice explanation of viewBox

[@codzymajor]

Learned tons! Thank you Kevin!

[@lewisone]

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.

[@stefanw8203]

Thank you very much for this series. Great and helped me a lot

[@DANNYFIGDESIGNS]

Love your videos Kevin. Thank you. Was confusing, but not anymore. :)

[@roberto9369]

awesome explanation man. thanks. you're a great teacher

[@czapi03]

perfect explanation! thank you mate! :)

[@ravikiran3455]

Thank you so much, its a great explanation

[@samirdanial9346]

I learned a lot, thank you kevien

[@JuveniusDrakonius]

amazing simple explanation, thx!

[@indieNik]

This clears so many things. Thank you so much Kevin :)

[@fernandasalesbittencourtde1039]

Omg, amazing video! thank you SO much! I was struggling with this but now everything makes sense =)

[@markghanayem5879]

Very good explanation

[@notablemind]

I still don't understand why TWO numbers are necessary to control zoom in a the viewBox. If it really is "zoom" that we're trying to achieve, most other softwares control zoom with a single number. They'll say zoom factor 15, or magnifications of 100x, etc... Why does viewBox need two numbers to do zoom?

[@pdsnpsnldlqnop3330]

It is hard to understand viewBox as a concept, I liked your reasoning for having an external stylesheet. Maybe more examples needed for viewbox, in the icon case it seems that 48x48 is a useful starting point. Then to confuse/explain, setting the 0 0 to -24 -24... This sets the origin in the middle. This is actually useful when you draw concentric circles as you know that you don't need to reposition things, or even give an x or y as the middle is in the middle... When it comes to transforms a viewbox of -24 -24 48 48 makes sense, e.g. one icon for an arrow can be rotated in the SVG to point in any direction without difficulty, or if you have drawn a complex shape you, e.g. one half of a telephone handset then you can mirror it to create the whole phone icon. Nobody has done a full tutorial of viewbox beyond having it as whatever illustrator churns out so hopefully you will be doing a viewbox 2 tutorial!!! Maybe that is going to be in the 'intermediate' series, either way I look forward to SVG episode 4.

[@KevinPowell]

I could be wrong on this, as I'm just getting into SVGs, but from what I understand, full on sprite systems were popular at one point, but inline SVGs tend to be more popular nowadays, since they lend us more control.... might be why you havent' seen a ton on them. I'll see if I can't come up with some better usecases though.

[@pdsnpsnldlqnop3330]

Currently I am trying to build an icon set for ecommerce. So there are a dozen or so that I need on every page load, e.g. add to cart, wishlist, search, view as grid/list, navigation arrows, stars for reviews and so on. I am also trying to use no presentational markup in the document, so that means HTML5 document structure rather than lots of div/span/class/id fluff in the HTML. I then style by elements rather than classes. This means lots of pseudo selectors/elements in the CSS. Which is fine, particularly since my SASS files are properly commented. I am using CSS grid all the way, so the document should be perfect for screen readers, even if the styled version shown in the browser moves content around quite a bit. Initially I had a lot of SVG tags in the document and a SVG spritesheet at the foot of the page, with this containing my icons as elements. This was going well as I could also do things in PHP to embed locale specific titles and descriptions in the spritesheet symbols. But this spritesheet was getting bigger and bigger. I also ran into persistent problems of the SVG in the document wanting to render at default 300x150 size. Not wanting to put x/y sizes in the spritesheet symbols I then independently worked out that there were advantages to the Lea Verou approach - embedding the SVG in the CSS. Everything is a compromise, and I also realised that this was not so good when it came to changing the colours of icons on hover or selected states. The symbol approach wasn't that good either when it came to that even if using currentColor for stroke/fill. Everything is a compromise and I didn't like the hacky nature of the SVGs in the stylesheet plus the filter: invert/brightness/hue-rotate way of colouring. But I do want to have no javascript as an option - so pages can download with one HTML document, one stylesheet and product images. In this way I can have an extremely speedy web page that is not re-downloading the many SVG icons with each page load. I did have a pure javascript solution that read an external SVG spritesheet and inserted it into the DOM so I only needed tags in the document. This worked very nicely and I may revisit this approach for brand logos. However, for the core furniture icons I have decided that the CSS embedded SVG stylesheet with the 'filter:' hack is the best compromise there is for my ecommerce project with SVG icons shown with ::before or ::after pseudo elements and no 'junk' in my 'pure HTML5' document. Although the project is just mine I hope to do other people's projects and therefore what I make has to be maintainable. The Lea Verou approach of having the SVG data+xml listed in the stylesheet with '\' newlines makes it maintainable enough, if not ideal as the '#' references need to be escaped as '%023'. But I can live with that and I think the next developer can too... By using the filter: invert + brightness + saturation + hue rotate 'trick' I can make fill and stroke declarations be just 'black' rather than '%023efa52e' (or whatever). If I also put the filter into a CSS variable and change that variable then I can globally style the monochrome icons consistently. So the goal of one document and one CSS file is achieved. Separation of concerns is achieved. All looks good on webkit/firefox and even edge. I can also edit the icons in the live document by using normal inspector tools and write that back into my SCSS files by using Chrome's Workspaces feature. Although I use the online SVGO tool to see what I could further optimise (e.g. merging a rotate and transform) and I do use Inkscape for doodling, I can do icons in the browser, to see them in context. I have to say that PHPstorm is actually best for drawing icons though, even though it is a PHP IDE! Inkscape doesn't let you centre the 0,0 origin in a 48x48 icon so might as well do it code style. I am getting a good 60fps with my grid layout pages at the moment but now I have the 'filter' trick as a requirement for the icons I am thinking of using that for the page links too. So that means setting links to black and then using the filter used for the CSS embedded SVG to colorise the icon text links too. Rachel Andrews usually has in her talks a few words about not using polyfills for older browsers. Since I am going for highly accessible markup with this new Grid/SVG shiny I am also taking her approach for how best to do backwardly compatible stuff. Javascript is only for progressive enhancement for my project so I am also trying to get drop-down menus to work on CSS only, with feature detection, e.g. media queries for 'pointer'. At a later stage I might put javascript back in to make the menus better, but not there yet... Regarding media queries, I have discovered that it is best to use a media query to set a variable, e.g. 'display: unset', 'display:none' to do something such as hide a 'next page' label on mobile or small screens. This results in more concise and maintainable CSS. There is some Australian guy into fluid typography who does talks including that trick. I am no longer using 'breakpoints' as such, feature detection and CSS grid is getting it to work for me, with fluid typography thrown into the mix. Spite/revenge is a good motivator - it was for Lamborghini when Ferrari would not sell him a car because he was a lowly tractor making industrialist. So my current project is 'spite' driven - I have made ecommerce projects for many people as a backend developer but not liked the frontend development aspect. So, out of 'spite' I am motivated to make something load ten times faster than anything else... The women of tech have been the main leading lights, they seem to speak my language about document structure + CSS grid whereas the men seem to be making things more complex! PWA service workers are good though, as is using mod_pagespeed to create image src-sets, but I am not interested in this frankenstein CSS written by JS stuff with every page element having ten class tags... Anyway, I must crack on, I hope my work is to be interrupted by a new video from yourself soon!!!

[@pdsnpsnldlqnop3330]

As per earlier comment, Mike Riethmuller shows how to set CSS variables to do responsive things neatly with minimal stylesheet. kzbin.info/www/bejne/pneToYatl7-Jb7s

[@glimmbo6812]

Great use of photoshop as a learning aid, thanks.

[@soffylicous]

Great explanation! I finally get it, thank you!

[@EdivarSRosa]

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

[@parasarora5869]

I think July is gonna be svg awesome...you are awesome...keep up the good work best teacher!!✌😎✌

[@efthyvoulos_tsouderos]

In 3:18 you say that the svg canvas is infinite. Why is infinite since it occupies specific size on a web page? Can you please explain it a bit.

[@KevinPowell]

The canvas is infinite in size, the viewport is what we see on the page. The viewport let's us see a specific part of the canvas 😊

[@mroze6825]

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

[@rinatvaliullov3247]

Thanks! Simple and not so tricky anymore for me. Can you make video about working with svg in gulp(+post-css)

[@rohil3023]

So view box is basically a virtual camera within a box which can zoom in and out go left and right

[@YL3nt]

Does this also work when using SVG as symbols? Otherwise I would be writing 3 times the code for all 3 icons which sounds more redundant to me.

[@katty4682]

So great to have a series on svg. Do you think you'll ever do something similar for canvas?

[@KevinPowell]

Nothing in the works yet, but maybe at one point.

[@ajk7151]

excellent explanation!

[@WEBSTART-LIVE]

Хорошо объяснил) даже не зная языка, всё понятно!

[@perkin524]

Thanks for these incredibly useful SVG videos - SVG was pretty much a closed book to me before. You often ask what other topics we would like to see covered so can I suggest a 'philosophical' on js frameworks. I am a longtime user of jQuery and I love that. But recently I have been studying Angular and Vue and my reaction to both is the same. After 15 minutes I'm getting really excited and thinking this is the shape of the future. After 3 hours I'm thinking this is a ridiculously complicated way to do a very simple thing. You have a steep learning curve and the final product seems to have a mass of dependencies, ten times the code, harder to understand and maintain, full of gotchas but not a bit better in terms of appearance or functionality. What is the point and how are we winning? Do you agree or can you convince us otherwise?

[@KevinPowell]

My current state of mind is use vanilla JS unless you have a good reason not to :). Vanilla JS has come a long, long way, and apart from certain specific use cases I feel like jQuery isn't as useful as it used to be. Vue, Angular and React all are more for web applications that deal with state (logged in, logged out, as a very simple example) and more complicated things like that.

[@ifzo123]

I've noticed that Chrome doesn't display properly random hex values set on svg's "fill" and "stroke". It can only display pre-defined values like "red", "pink","green" etc..

[@ifzo123]

Actually I need to be more precise: That "fill" doesn't work properly only when I use SVG object (e.g. circle) as a my cursor (e.g. instead of pointer). There is possibility to make custom cursor shape/object. But if I use SVGs Chrome does not display its color out of hex. It only takes pre-established values/colors (like "red", "blue".. etc). Have You noticed such a behavior before?

[@abdullahs3463]

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

[@deafdogdesign]

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

[@Gruximillian]

Thank you for this great explanation! There's one thing I don't understand from your last example though. How can you have two or more icons displayed on the separate places on the page but have only one svg defining the icons, as you have here? Could it be done by using a and , and then add viewBox on that wraps ?

[@jooom8525]

Hey, look at this easy example Each rectangle starts at another point: 0,0 ; 150;0 ; 300,0. So they are all in one svg but they don't have to start all in the upper left corner at 0,0. You can change their respective starting points and have them overlap etc. as shown in the video [A beginners guide to SVG part 2].

[@vaaaaaaaaan8678]

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?

[@nitishchauhan8655]

You are friggin awesome thank you

[@bernhardsmuts2265]

Brilliant explanation!

[@dasojushiva8663]

you are nothing less than a god!!!!

[@davidpicarazzi]

Hi kev, is there a reason why we’d need a viewport width and height if we’re making something like a hamburger menu? A hamburger menu has 3 rectangles so shouldn’t the total dimension of the hamburger dictate what size my SVG is?

[@KevinPowell]

The size of the svg itself is a little different from the viewport. The hamburger is the svg itself, the viewport is the window to see that svg. It's like your browser window. An element might have a width of 500px, but you can make the browser window (your viewport) smaller or bigger than that.

[@pnjegosh]

Good job! Thank you very much :)

[@simonhallin1640]

Hi Kevin. When I'm on the internet I often see these websites that provide a "drag and drop" website development instead of coding, like Wix.com. I was wondering what your opinion is on these services and if companies regardless of their size should use these instead of making their own websites (by coding). Also, love the SVG series, haven't really seen many cover this part of CSS so precise

[@KevinPowell]

Wix and Weebly and Squarespace are all fine for companies with small budgets. Makes no sense for a small business with a tiny budget to drop 5 figures on a website. They serve a market, and that's fine. They have major limitations though, and often companies (and even individuals) outgrow them and need a more custom solution.

[@simonhallin1640]

Okay got it, thanks for your answer

[@ali-d-coded5620]

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

[@ahsath]

But if the viewBox it's infinite why we can start at 0 0?

[@tokyoDrift99]

Hi, first i want to thank you for the tutorial, very understandable, i'm a SVG beginner and i want to scale the svg viewbox to make it responsive how i can do ??? pls helppp

[@KevinPowell]

You could just scale the entire svg element, might be easier. Set a width for the whole thing as a percentage perhaps?

[@kissshu]

This is very helpful.

[@ahsenkh]

At 5:04, when you change viewPort size, the SVG appears or disappears. Whereas, at 13:31, the SVG scaled down instead. Is this behavior due to the difference in and other graphics i.e. ?

[@KevinPowell]

It depends what you are doing with the viewport. I can move my viewport around, so it'll 'hide' what I was looking for, or I can change the "zoom" level of it, which can grow and shrink it, which I realize is all terribly confusing, lol. It's a hard thing to figure out and really understand, I still get confused by it.

[@ahsenkh]

Nevertheless, your video helped construct a good picture 🙂. Thanks a lot! This was the only point I was confused about.

[@MindGem]

Okay Kev, got another request :) Can you make a video where you manipulate a complex svg (inline)? Say a character with a face, torso, legs and arms. I just don't understand where to put such a complex svg inline because it takes up thousands of lines of code. Plus I can't figure out how to manipulate gradients via js runtime.

[@johnconnor9787]

Can you make a video about " stroke-dashoffset " css property and how it works

[@KevinPowell]

I'm going to do a bit of other stuff in the short term, but it's definitely worth visiting once I get back to SVGs

[@sepiaflux123]

excellent video!

[@me_fault]

this solved my problem - thanks : -)

[@himbary]

great explanation ty

[@LukaszAntos]

Very clear explanation

[@mathematician849]

Great that i had this tutorial

[@florentinahofbauer3211]

Awesome video

[@rorh6462]

Hello, I'm a beginner. How do I increase the size of my svg/icon?

[@josefbichlmeier83]

Super cool! Thanks for the explanation but it is still a super weird concept :-)

[@KevinPowell]

Totally weird! I'd love to have been a fly on the wall when they were discussing the spec and how it would work. lol

[@MuhammadAdnan-gx6rd]

Sir world u explain 'Calc' css property ?

[@TheZMasterful]

a function that can do math basically. you can't do 5px + 10px on a width property for an example but you can do it if you put the calculation on the calc() function.

[@KevinPowell]

TheZMasterful mentioned it, but the really cool thing with calc() is that you can mix different units, so you can do calc(10vw + 2em) and it'll figure it out dynamically as you change the size of the screen. Really cool stuff, and really useful, but it's all about doing calculations. I should make a coding quicky video on it !

[@MuhammadAdnan-gx6rd]

Kevin Powell okay soon sir thanks responsive text with Calc function. .....

[@MuhammadAdnan-gx6rd]

TheZMasterful thanks bro

[@vladyacevedo4037]

perfect explanation.

[@varleycraig]

thanks this was v useful.

[@rubik3511]

Super helpful, thank you

[@JohnBanksTucsonAZ]

Excellent!

[@daklo9839]

This viewBox explanation was within... the viewBox