Whats the <symbol> element?

Question

I can't understand it, I did search in google but I don't find much about it. I think Its used with SVG and it has something to do with viewBox? I do know how viewBox works, but I still don't understand what exactly <symbol> tag does and how its used with viewBox.

Answer 1

I understood how to use it, so I will write here what I understood about this element so future people who search for similar questions can find an answer.

Symbol is used as a container for svg elements, for example, in order to make a human using SVG you may need to create many different shapes and paths, if you wanted to put this human you made on another place in your site you would have to copy paste everything in a new SVG, which would take space in your code, and trying to keep a small and simple code is very important, especially when you have a big site, and you need to use that human you made over and over again, thats why symbol element was created.

To make symbol you simply write <symbol id="example"> your shapes and paths </symbol>
and then to use that symbol you write <use href="#example" />

Answer 2

Ore this doesn't help, I still don't understand how it is used.

Answer 3

Karak10 A typical web site might have a dozen or more svg icons used in various parts of the site. Instead of fetching each icon individual by seperate http request. One can create a sprite that contains all the icons. That is what <symbol> tags do. Just read through the MDN docs to know how to use it.

Answer 4

It however becomes a little tricky when you use the symbol in an SVG that uses viewBox attribute,
you expect it to work just like any other shapes you have in the SVG, but it doesn't, the reason it works differently is because its not the paths and shapes you added in your SVG, but an svg spite, and since you haven't specified the height and width this spite should use it automatically takes the width and height you put in the viewBox, and because of this behaviour, when you try to zoom in and move your box to the right, in order to make the symbol seem bigger in the viewport your symbol may be missing parts, to fix that you simply should specify the height and width of your symbol by writing <use href="#example" width="500" height="200"> for example.

Answer 5

It is used to create an SVG sprite

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

Answer 6

It is needed to create an svg sprite, it is a container for each svg.

Answer 7

Karak10 You finally figured it out 👍. I think you should mark your answer as best.