Как добавить SVG изображение на страницу таким образом, чтобы можно было легко изменять его атрибуты?

Существует несколько способов добавить SVG изображение на страницу и легко изменять его атрибуты:

1. Встраивание SVG кода непосредственно в HTML:
```html
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" fill="red" />
</svg>
```
В этом случае вы можете изменять атрибуты напрямую внутри тега SVG.

2. Использование тега <object> для загрузки внешнего SVG файла:
```html
<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>
```
Этот метод позволяет загружать SVG файлы и также изменять их атрибуты через JavaScript.

Чтобы эффективно вставлять крупные SVG-файлы на веб-страницу и управлять их fill или stroke, можно использовать следующие методы:

1. Использование внешних CSS стилей:
```html
<svg width="100" height="100" class="my-svg">
   <circle cx="50" cy="50" r="40" />
</svg>
```
```css
.my-svg circle {
   fill: red;
   stroke: black;
}
```
Этот метод позволяет применять стили к SVG элементам из внешнего CSS файла.

2. Использование JavaScript для изменения атрибутов:
```html
<svg id="my-svg" width="100" height="100">
   <circle id="my-circle" cx="50" cy="50" r="40" fill="red" />
</svg>
```
```javascript
document.getElementById('my-circle').setAttribute('fill', 'blue');
```
Этот метод позволяет динамически изменять атрибуты SVG через JavaScript.

Выбор метода зависит от конкретной ситуации и требований проекта.

А в чем сложность "создания компонента под svg"? В простейшем случае там просто взять его и обернуть в template, добавить в него в нужные места атрибуты и сверху script setup с логикой добавить. 
 
 В простейшем случае можно вообще классами разрулить, главное заинлайнить, например с помощью https://www.npmjs.com/package/vite-svg-loader .

Смотря в каком контексте. 
 Последний раз я вставлял svg во vue компонент с помощью axios. Потом прекрасно можно взаимодействовать с ним - менять цвета и тп. 
 
 Выглядит примерно так - отправляешь axios запрос на путь к своей картинке и потом контейнеру, куда ты хочешь вставить svg добавляешь innerHtml  равный ответу axios. 
 Получается асинхронно да, но тем не менее всё работает прекрасно. 
 
 const result = await localAxios.get(PATH) 
 container.innerHTML = result.data 
 
 PATH - путь до svg. Типа './public/assets/svg/logo.svg' 
 localAxios - инстанс экземпляра axios 
 
 Если вынести путь в пропсы, получится прекрасный переиспользуемый компонент.