SVG <defs> and <symbol> elements

Question

I'm a little confused, I do understand symbol can create an icon by using the viewBox attribute which then you can use by adding the <use> element and scale it with height and width attributes, when you don't use viewBox however doesn't symbol work pretty similar to defs element? They both duplicate whatever shape and animation is inside them, whats the diffefence? When do I use symbol and when do I use defs? Also, can't I use <q> element to duplicate multiple shapes as well?

Answer 1

This article helped a lot: https://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

Answer 2

This should help!
Defs
https://www.w3schools.com/graphics/svg_grad_linear.asp
Symbols
https://www.w3schools.com/w3css/w3css_icons.asp