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
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
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. :)
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.
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!
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...
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.
This explanation was clearer than the ones i found at Udemy. I will probably mistakenly switch those two terms around, but at least now i understood how it works!
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!
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.
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. ?
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.
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
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??
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?
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.
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
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!
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?
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.
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 ?
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].
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
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.
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.
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.
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.
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!!!
As per earlier comment, Mike Riethmuller shows how to set CSS variables to do responsive things neatly with minimal stylesheet. ruclips.net/video/pF0pSwbZV9Y/видео.html
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.
![How to create, clean up, and optimize an SVG [ A beginners guide to SVG part 4 ]](http://i.ytimg.com/vi/cWh0de8IhX4/mqdefault.jpg)
![How to create, clean up, and optimize an SVG [ A beginners guide to SVG part 4 ]](/img/tr.png)
This is, hands down, the best explanation of viewBox I've seen.
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.
No cap
I could not agree .more. Excellent!
I'm with you.
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
Kevin is the god of CSS
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.
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
So glad that the video helped you out Nasir!
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. :)
Glad that the video helped clear things up :). It's a hard concept, I'm happy that the Photoshop example worked!
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.
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!
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...
Best SVG viewport tutorial on RUclips!!! Very logic and well explaned!
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.
You are a CSS geek. Keep up the good work. :)
I've read over and over about the viewBox but couldn't understand until I saw your great PhotoShop example. Thanks!!!!! :)
Glad I could help! It is such a strange thing, even when you understand the idea behind it.
it is basically a camera view
Great explanation as always. I don't think I could have been able to understand this without your video.
Thanks - I FINALLY get it. That ViewBox thing has really been puzzling me for longer than I'll care to admit
The best explanation of viewBox i have ever seen.
Amazing explanation! it shows dedication and passion about code!!
I never understood that ViewBox stuff in text. This video was a god-send. Thank you very much :)
This explanation was clearer than the ones i found at Udemy.
I will probably mistakenly switch those two terms around, but at least now i understood how it works!
Great! Now I understand view box. Because of your explanation with Photoshop!!
Thank you, great job!
I started learn SVG yesterday, you saved me so much time to understand so many concepts!
Thank you, subscribed :)
Glad that I was able to help, and thanks for the sub!
Best explanation about viewport and viewbox, I was struggling with this. thanx it really helped.
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!
You explained the viewport and viewbox so well. Thank you.
This is extremely helpful, both the visuals and the explanation, and i'm officially subscribed!
The best explanation about SVG
Nah this the best tutorial out there man.
I am really happy that I found your svg series
I'm glad that you've found it helpful!
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.
Thanks for your concise explanations... Always look forward to your videos.
This clears so many things. Thank you so much Kevin :)
This is so well explained. Many thanks! 🙏🙏🙏
Great explanation 👍 This reminds me of Google map kit where you set camera position on the map
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!
Learning svg now. This video was amazing, thank you!
This tutorial is so helpful.
Thanks.
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.
Wow, such a hard topic explained so smoothly
Yup, it's a strange one. I hope I did okay!
Learned tons! Thank you Kevin!
I learned a lot, thank you kevien
Love your videos Kevin. Thank you. Was confusing, but not anymore. :)
Thank you very much for this series. Great and helped me a lot
awesome explanation man. thanks. you're a great teacher
Omg, amazing video! thank you SO much! I was struggling with this but now everything makes sense =)
Merci pour cette explication grâce à laquelle j'ai enfin compris la viewBox, après plusieurs tutoriels !
The better explaination ever ! Thx's veryyyyy much
amazing simple explanation, thx!
Thanks, nice explanation of viewBox
perfect explanation! thank you mate! :)
Thank you so much, its a great explanation
Very good explanation
excellent explanation!
Great explanation! I finally get it, thank you!
I think July is gonna be svg awesome...you are awesome...keep up the good work best teacher!!✌😎✌
Belíssima Aula! Você é um professor fantástico! Obrigado!
Brilliant explanation!
Great use of photoshop as a learning aid, thanks.
This is very helpful.
excellent video!
Great that i had this tutorial
Awesome video
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. ?
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.
Nevertheless, your video helped construct a good picture 🙂. Thanks a lot!
This was the only point I was confused about.
You are friggin awesome thank you
this solved my problem - thanks : -)
great explanation ty
Good job! Thank you very much :)
you are nothing less than a god!!!!
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
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.
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 😊
Very clear explanation
thanks this was v useful.
Хорошо объяснил) даже не зная языка, всё понятно!
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??
That's one way to see it, yes :D
You're amazing!
Super helpful, thank you
perfect explanation.
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.
Super cool! Thanks for the explanation but it is still a super weird concept :-)
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
Excellent!
Thanks! Simple and not so tricky anymore for me.
Can you make video about working with svg in gulp(+post-css)
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?
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.
well explained!
Welk explained. Thanks!
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
This is great
So great to have a series on svg. Do you think you'll ever do something similar for canvas?
Nothing in the works yet, but maybe at one point.
you save me, thank you for this nice deo
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!
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?
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?
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.
great video
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 ?
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].
Can we use this svg as a pseudo element content??
So, can the viewbox be used to control the svg responsively?
Thks keep it up dude
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
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.
Okay got it, thanks for your answer
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.
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.
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.
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!!!
As per earlier comment, Mike Riethmuller shows how to set CSS variables to do responsive things neatly with minimal stylesheet.
ruclips.net/video/pF0pSwbZV9Y/видео.html
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.
Thank you
Hello, I'm a beginner. How do I increase the size of my svg/icon?