Удаление лишнего «хвоста» из SVG, включающего изображение

Question

У меня есть логотип PNG, который я заключаю в кружок SVG.Делая изображение достаточно большим, я вижу, что здесь много лишних пробелов.

Я новичок в svg и пытался изменить его размеры всеми возможными способами, которые я могу найти, но это приводит к снижению качества или размера изображения.,Я попытался поместить svg в контейнер div и изменить размер div без какого-либо успеха.Приложенное изображение имеет размер 940 x 940 пикселей.

<div class="container" style="height:10%;width:100%; display:block;">
    <svg id="graph" class="text-center" width="100%" height="3500px" display="block">

        <defs>
            <pattern id="image" x="0%" y="0%" height="100%" width="100%"
                     viewBox="0 0 350 420">
                <a href="index.html">
                    <image x="0%" y="0%" width="512" height="512" xlink:href="img/CheesyTools2.png"></image>
                </a>
            </pattern>
        </defs>

        <circle id="sd" class="medium" cx="50%" cy="5%" r="5%" fill="url(#image)" stroke="black" stroke-width="0.5%" />
        <text text-anchor="middle" x="50%" y="11%" style="color:#274666; font-size:40px;">CheesyTools</text>
        <text text-anchor="middle" x="50%" y="12%" style="color:#274666; font-size:20px;">The world's leading website in being useless.</text>

    </svg>
</div>

Изображение, показывающее логотип:

Я получаю, что появляется лишний пробелс высоты 3500px, но это был единственный способ получить логотип, соответствующий размеру сайта.Я хотел бы иметь его в том же размере, но без всей избыточной высоты.

С уважением, нуб.

Answer 1

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

svg {
  border: 1px solid;
  width: 365px;
  height: 380px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<svg id="graph" class="text-center" viewBox="245 45 365 380" display="block">

        <defs>
            <pattern id="image" x="0" y="0" height="100%" width="100%">
                <a href="index.html">
                    <image width="260" height="260" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg"></image>
                </a>
            </pattern>
        </defs>
 
        <circle id="sd" class="medium" cx="430.75" cy="175.075" r="127.5" fill="url(#image)" stroke="black" stroke-width="5" />
        <text text-anchor="middle" x="430.75" y="370" style="color:#274666; font-size:40px;">CheesyTools</text>
        <text text-anchor="middle" x="430.75" y="400" style="color:#274666; font-size:20px;">The world's leading website in being useless.</text>
  
    </svg>