Why use viewBox attribute in symbol if you can just change it's size with height and width attributes once you use it in an SVG?

Question

I can't figure out why viewBox is used in symbols, at first I thought it was to zoom in or out the symbol in order to make it smaller or bigger, but it seems I can do the same thing way easier using height and width in my <use> element when I put the symbol in an SVG, so, why exactly would I use viewBox in a symbol? Whats the point?

Answer 1

When you use viewBox in your symbol, and you use it in an SVG it will keep the same size it had no matter how much the SVG is zoomed it or zoomed out, it also is scaleable, meaning, if you want your symbol to be at 200 pixels height and 500 pixels width you can write width="500" height="200" and it will get smaller, if you want to move it you use x and y attributes.

When you don't use the viewBox attribute on your symbol the symbol stays at the same width and height size it originally was, if you zoom out it will not keep same size in your viewport like before, it will stay at width="x" height="y", it also works like a viewport in some way, meaning, when you specify it's height and width you don't make your symbol bigger, you just say you want it's 500 pixels width and 200 pixels height to be visible, if you changed width to 250 half of your symbol would be cut out, if you made width 1000 nothing would really change, since your symbol only takes the first 500 pixels.

Answer 2

I can give two examples of when viewBox may be useful and when not.

When you draw something, like a star for example, you should better use viewBox, so if you ever need to use that star again in the future you can just put it in your SVG, without caring about the size of the SVG, if it has 1000 pixels or 100, since your star can be scaled to fit in however you want it.

When you want to make a diagram with lines and numbers that counts the pixels of the viewport, something I like to use when I draw in SVG, you shouldn't use viewBox, because you want it to stay at it's original size no matter how much you zoom out or in the SVG, if you zoom in the SVG to 100 pixels width you want only the 100 first pixels in the diagram to be visible.

Thats the best examples I can give.

Edit: I know pixels isn't the correct term, since SVG doesn't use pixels, but I'm not sure how I should call it.

Answer 3

Karak10 If you want to show information you know to the community, send it on your own feeds. Q&A discussion are reserved for someone has coding problem can raise questions on.

Answer 4

This is a question, I still haven't figured this out completely, I just started to understand it a little and decided to write it here as an update, also, since it seems I'm not gonna take much answers, I will write the conclusion I had after I searched and played around with the viewBox, for two reasons, firstly I can come back at any time to see my previous answers whenever I need, since I'm probably going to forget how it works when I stop using it, and secondly people who may have the same question could search for it in the search bar and be helped by my explanation.

Answer 5

Karak10 This is to my surprise, I've been answering Sololearn questions for years, never have seen someone can answer his own questions to this extend. 🤣

Answer 6

I guess I rushed to ask way too fast, I just needed few hours to understand how it works by my self, but still I am not sure that the way I believe it works is truly the way it works, I am keeping notes in a website I made when I started learning HTML a month ago, this viewBox attribute is tricky, its been three times already I had to go over my notes to fix them because what I had wrote ended up being wrong, I may be spending way too much time on SVG for no reason, I will leave it for now and go learn better CSS.