Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Medala's avatar
Level 12

Why does my svg have so much top & bottom padding?

I made this svg from inkscape and it has a lot of padding on its Y axis, I can't seem to find out why this happens. Any Tip?

<div class="w-full z-0">
      <svg class="fill-current w-full bg-orange-500"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="1920"
        height="1080"
        viewBox="0 65 508 285.75"
      >
        <defs>
          <linearGradient id="a">
            <stop offset="0" stop-color="#fcd2b6" />
            <stop offset="1" stop-color="#fcd2b6" stop-opacity=".162" />
          </linearGradient>
          <linearGradient
            xlink:href="#a"
            id="b"
            x1="177.941"
            y1="-12.756"
            x2="222.288"
            y2="280.706"
            gradientUnits="userSpaceOnUse"
          />
        </defs>
        <path fill="url(#b)" d="M-16.631-13.607h551.089v328.839H-16.631z" />
        <g fill="#fff" fill-rule="evenodd">
          <circle cx="254" cy="117.929" r="104.321" fill-opacity=".412" />
          <circle cx="254" cy="117.929" r="89.202" />
          <circle cx="254" cy="117.929" r="131.536" fill-opacity=".265" />
        </g>
        <g fill="#fff" fill-rule="evenodd">
          <ellipse cx="28.331" cy="91.673" rx="20.312" ry="11.493" />
          <ellipse cx="49.712" cy="97.821" rx="20.312" ry="9.087" />
          <ellipse cx="35.814" cy="84.457" rx="10.156" ry="7.484" />
          <ellipse cx="54.256" cy="86.595" rx="12.562" ry="5.88" />
          <ellipse cx="73.232" cy="95.682" rx="18.174" ry="6.949" />
          <ellipse cx="76.706" cy="93.277" rx="12.027" ry="11.493" />
          <g transform="matrix(1.13462 0 0 1.03571 -1.08 12.218)">
            <ellipse cx="28.331" cy="91.673" rx="20.312" ry="11.493" />
            <ellipse cx="49.712" cy="97.821" rx="20.312" ry="9.087" />
            <ellipse cx="35.814" cy="84.457" rx="10.156" ry="7.484" />
            <ellipse cx="54.256" cy="86.595" rx="12.562" ry="5.88" />
            <ellipse cx="73.232" cy="95.682" rx="18.174" ry="6.949" />
            <ellipse cx="76.706" cy="93.277" rx="12.027" ry="11.493" />
          </g>
          <g transform="matrix(1.13462 0 0 1.03571 402.498 -13.44)">
            <ellipse cx="28.331" cy="91.673" rx="20.312" ry="11.493" />
            <ellipse cx="49.712" cy="97.821" rx="20.312" ry="9.087" />
            <ellipse cx="35.814" cy="84.457" rx="10.156" ry="7.484" />
            <ellipse cx="54.256" cy="86.595" rx="12.562" ry="5.88" />
            <ellipse cx="73.232" cy="95.682" rx="18.174" ry="6.949" />
            <ellipse cx="76.706" cy="93.277" rx="12.027" ry="11.493" />
          </g>
          <g transform="matrix(2.14744 0 0 .55357 300.832 63.228)">
            <ellipse cx="28.331" cy="91.673" rx="20.312" ry="11.493" />
            <ellipse cx="49.712" cy="97.821" rx="20.312" ry="9.087" />
            <ellipse cx="35.814" cy="84.457" rx="10.156" ry="7.484" />
            <ellipse cx="54.256" cy="86.595" rx="12.562" ry="5.88" />
            <ellipse cx="73.232" cy="95.682" rx="18.174" ry="6.949" />
            <ellipse cx="76.706" cy="93.277" rx="12.027" ry="11.493" />
          </g>
        </g>
        <path
          d="M-27.796 106.908C119.737 80.715 51.316 33.14 156.62 84.458 261.924 135.772 310.567 38.486 346.38 57.73c35.814 19.244 102.097-19.243 121.875 4.811 19.778 24.054 91.94 21.382 95.683 49.178 3.741 27.796-151.81 89.802-196.176 88.733-44.367-1.069-338.143 15.949-351.082-15.01-12.94-30.96-44.477-78.534-44.477-78.534z"
          fill="#fff"
          fill-opacity=".344"
        />
        <path
          d="M-63.5 226.786C101.298 134.56 61.232 128.512 89.958 154.97c28.727 26.459 40.066-3.024 121.709-23.434 81.643-20.411 91.028 143.488 135.315 29.482 60.762-156.416 78.62 14.363 123.976-34.774 45.357-49.137 85.423-30.994 97.518-18.899 12.095 12.095-10.583 205.62-10.583 205.62l-589.643-1.513z"
          fill="#ffc29b"
        />
        <path
          d="M-80.131 190.5c185.208 46.87 138.34-68.036 210.155 7.56 71.815 75.595 34.424 29.776 111.88-60.477 29.277-34.112 120.953 6.804 132.292-7.56 11.34-14.362 30.239 59.721 77.108 31.75 46.869-27.97 84.666-102.809 92.982-55.94 8.315 46.87-1.512 194.28-1.512 194.28H-18.9z"
          fill="#ff8c42"
        />
        <path
          d="M-30.238 253.244c83.91-48.38 80.13-93.738 130.024-56.696 49.893 37.041 75.595 44.6 130.78 15.875 55.184-28.727 108.1-83.155 145.898-49.137s44.601 52.16 77.107 34.774c32.506-17.387 43.09-86.935 78.62-69.548s46.869 194.28 46.869 194.28l-628.953-3.024z"
          fill="#c45f2a"
        />
        <path
          d="M58.499 149.35l-2.093 6.555-2.831-.542 1.565 4.506-.006.018-11.2 11.07 7.048 1.933-1.562 4.892 9.715-2.116v26.08h2.895V175.92l8.373 2.295-1.239-4.733 9.418-2.053-7.233-7.951 3.493-4.04-8.681-1.664-1.555-1.709-1.152-4.4-1.502 1.484zM11.509 182.52l-2.184 8.28-2.955-.685 1.634 5.692-.006.023-11.688 13.984 7.355 2.441-1.63 6.18 10.138-2.672v32.946h3.021v-32.627l8.74 2.9-1.294-5.98 9.83-2.593-7.55-10.044 3.645-5.105-9.06-2.1L17.883 191l-1.202-5.56-1.567 1.876zM183.592 200.405l-1.819 5.696-2.46-.47 1.36 3.915-.005.017-9.733 9.62 6.125 1.68-1.358 4.252 8.443-1.84v22.667h2.516v-22.447l7.278 1.996-1.077-4.115 8.185-1.783-6.287-6.91 3.036-3.513-7.545-1.445-1.35-1.485-1.002-3.825-1.305 1.29zM256.043 160.33l-1.91 5.983-2.584-.495 1.429 4.112-.005.018-10.223 10.104 6.433 1.763-1.426 4.466 8.867-1.932v23.805h2.642V184.58l7.643 2.095-1.13-4.32 8.596-1.873-6.603-7.258 3.188-3.688-7.923-1.518-1.42-1.56-1.05-4.017-1.371 1.355zM351.32 112.594l-2.462 7.713-3.331-.638 1.842 5.301-.007.022-13.179 13.026 8.293 2.274-1.838 5.757 11.431-2.49v30.688h3.406v-30.39l9.853 2.7-1.458-5.57 11.082-2.414-8.512-9.357 4.11-4.754-10.214-1.957-1.83-2.01-1.355-5.18-1.767 1.747zM448.146 136.029l-2.627 8.226-3.553-.68 1.965 5.654-.007.024-14.056 13.893 8.845 2.425-1.96 6.14 12.192-2.655v32.732h3.633v-32.415l10.509 2.88-1.555-5.94 11.82-2.576-9.079-9.98 4.384-5.07-10.895-2.087-1.95-2.145-1.447-5.524-1.884 1.863z"
          fill="#c45f2a"
        />
        <path
          d="M420.625 153.983l-2.627 8.226-3.553-.68 1.965 5.654-.007.024-14.056 13.893 8.845 2.425-1.96 6.14 12.192-2.655v32.732h3.633v-32.415l10.51 2.88-1.556-5.94 11.82-2.576-9.079-9.98 4.384-5.07-10.895-2.087-1.95-2.145-1.447-5.524-1.884 1.863z"
          fill="#c45f2a"
        />
        <path
          d="M11.509 182.52l-2.184 8.28-2.955-.685 1.634 5.692-.006.023-11.688 13.984 7.355 2.441-1.63 6.18 10.138-2.672v32.946h3.021v-32.627l8.74 2.9-1.294-5.98 9.83-2.593-7.55-10.044 3.645-5.105-9.06-2.1L17.883 191l-1.202-5.56-1.567 1.876z"
          fill="#d0652d"
          fill-opacity=".45"
        />
        <path
          d="M58.002 147.642l-2.093 6.554-2.83-.542 1.565 4.506-.006.018-11.2 11.07 7.048 1.933-1.562 4.892 9.715-2.116v26.08h2.894V174.21l8.374 2.296-1.239-4.734 9.418-2.053-7.234-7.951 3.493-4.04-8.68-1.664-1.555-1.709-1.152-4.4-1.502 1.484z"
          fill="#c45f2a"
          fill-opacity=".667"
        />
        <path
          d="M182.742 197.36l-2.062 6.459-2.79-.535 1.543 4.44-.006.018-11.035 10.908 6.944 1.904-1.54 4.82 9.573-2.084v25.697h2.852v-25.449l8.25 2.262-1.22-4.664 9.28-2.022-7.128-7.835 3.442-3.981-8.554-1.639-1.531-1.683-1.135-4.337-1.48 1.463z"
          fill="#c45f2a"
          fill-opacity=".533"
        />
      </svg>
      </div>   
0 likes
2 replies
Tray2's avatar
Tray2
Best Answer
Level 73

Have you checked it in your browsers dev tools?

Medala's avatar
Level 12

I did not remove the SVG width and height attribute, that was the problem.

Please or to participate in this conversation.