прямой ввод с кодом SVG html некоторые проблемы и некоторые вопросы

Question

так что я дурачусь с svg на codepen.io, и у меня есть несколько вопросов

1. почему атрибуты высоты и ширины не действуют в html (можно найти в элемент изображения svg)? я читал, что удаление этих атрибутов и использование css для определения размера является лучшей практикой, как вы думаете?

2. делает использование тега объекта для ссылки на файл SVG позволяет для того же настраиваемость, которую встроенный svg будет иметь в отношении css и js? если да, перевешивает ли это преимущество наличие дополнительного http-запроса для связанного изображения?

3. , когда возникает необходимость в значках, лучше ли использовать значки шрифтов или значки SVG? (значки шрифтов Что нового для меня, позволяют ли они редактировать с css и js? Их легко сделать? Они меньше по размеру файла?)

4. в этой ручке c https://codepen.io/cole-pratt/pen/xxGdmRN есть две иконки. первый значок имеет синий градиент, второй значок, как предполагается, имеет зеленый градиент, но по какой-то причине он принял синий градиент, даже если их цвета указаны в каждом элементе (насколько я знаю), предполагая, что встроенный лучше, чем тег объекта, а также предположить, что svg более подходит, чем значки шрифтов. Как можно улучшить эту цветовую ситуацию наиболее эффективным способом?

5. относительно предыдущего пера ... я попытался используйте svg: hover, чтобы изменить цвет заливки. это не сработало, хотя свойство высоты было применено. У кого-нибудь есть причина для этого?

6. Любые другие вещи, которые я должен знать о svg и html, пожалуйста, стреляйте

следующее css от ручки. Это довольно неуместно, но этот сайт не позволит мне публиковать без кода

body {
  background-color: rgb(240,240,240);
  margin: 0 auto;
  padding: 0;
}

nav {
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: flex;
  flex-flow: row-reverse norap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100px;
  background-color: white;
  box-shadow: 0px 15px 10px -15px grey;
}

svg {
  height: 75px;
  margin: 0 auto;
}

svg:hover {
  fill: white;
}

, если вы читали это далеко, высоко ценится. с нетерпением жду ваших ответов