Максим

https://codepen.io/topicstarter/pen/PgLdog если не парится совсем красотой то вот так можно

Визуальное скрытие SVG в разметке делается для того что бы сам SVG документ на странице не занимал место и не было пустого пространства ...
USE - это дубликат какого то объекта и этот тег помогает с экономить место на странице за счёт дублирования нужного SVG хотя в инспекторе кода будет отображаться как будто вставлен реальный код

Насколько это корректно ? Да вполне ...

https://github.com/yWorks/svg2pdf.js не знаю вариант это или нет

К примеру мы хотим из polygon нарисовать слоника, для этого возьмём обычный листок в клеточку
Нарисуем через линейку две линии которые будут пересекаться в центре ...
На скриншоте я показал все точки которые нам нужны для того что бы наш слоник появился
для этого рисуем слоника ...в общем смотри на скрин

Каждая точка у этого слоника выделена красным цветом эти точки пронумерованы вот их и берём и записываем на листочек отдельно начиная в 0 в такой последовательности ...

point="a b"

где a - точка по X
где b - точка по Y
через запятую



Конечно для боловства можно нарисовать и полигоны и даже что то поинтереснее но есть векторные редакторы ..типа Inkscape Corel Draw Illustrator Gravit OpenOffis Draw и в них это делается легко ...если что не ясно спрашивайте

Если с английским не сложно хотя не особо нужно его знать - смотрите и повторяйте

https://codepen.io/topicstarter/pen/WmMwMp - вариант ?

Анимация анимации рознь
Есть сложные анимации , где пытаются оживить то что в нативной техники анимации SMIL не возможно сделать и тогда применяют уже всякие приёмчики на подобии Рисуют в Люстре и сохраняют как AI и открывают в Adobe After Effects в который заранее устанавливают Bodymovin и тот генерирует уже просто json файл где на выходе мы можем получить вот такие анимации

Если же касается просто Smil то особо напрягаться не стоит лишь бы было одинаковое количество точек и эти точки равномерно куда распихать , как правило хватает обычного Inkscape

Бывает щас Gsap который пока халявный но это до поры до времени
Есть AnimeJs который тоже не плохо справляется
так же много всяких плагинов на js которые именно делают анимацию ..
на youtube кучу примеров и уроков по любой технологии

Так же есть сообщества типа Toster и stackoverlow (рекомендую англоязычное сообщество) где есть энтузиасты готовы рассказать что и как нажать что бы эта плюшка заработала

Но главное понимать что конкретно надо сделать

Выкладывайте спрайт в html
У вас написано что svg находится в папке img ...это так ?

Я тут не совсем понял что надо что бы не уменьшалось ....
Pattern имеет viewbox который растянет/сожмёт т.е сделает резиновым весь документ и всё содержимое SVG

Примерно так это делается

<svg style="display:none;">
   <defs>
     <symbol id="icon1">
        <path d="M......z" />
     </symbol>
     <symbol id="icon2">
        <path d="M......z" />
     </symbol>
     <symbol id="icon3">
        <path d="M......z" />
     </symbol>
   </defs>
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon1">
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon2">
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon3">
</svg>

https://codepen.io/topicstarter/pen/XoqoMK - работает если перепелить по правилам
у вас главная проблема что стили что stroke-width и для stroke и fill указан inline в svg и потому перебить это можно только написав в css любое правило с important