SVG has too much space around it. Nothing is working

HTML & CSS
#1

Alright I think spent too much time on this. The only thing that came remotely close to what I want is removing the 800 800 on the viewbox but then I can’t even resize the svg or apply anything to it where it actually resizes it. Please help.
Notes; for some reason only when I change the svg height in the media queries it changes but when I do it outside of the query it doesn’t change at all.
([https://codepen.io/lilliongoddess/pen/bGwKqXL)

I just want it to be inline but its supposedly inline already and I would like to resize it outside of viewbox?

#4

Hi,
From your thread title it seems that you are wanting to remove the excess space from the text in your image.

What I did was just open it in inkscape and resize the document to fit the content. That changed the viewbox size and there is no excess white space now.

Just run this in your browser as a stand alone image first and you will see that it will scale just fine.

<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 425.93732 330.76227"
  width="100%"
  height="100%">
  <defs>
    <!-- The text path: see links above regarding coordinate system -->
    <path d="m 0,200 a 200,200 0 1 0 400,0 200,200 0 1 0 -400,0" id="txt-path"/>
  </defs>
  <text font-size="45.5" transform="translate(14.720589,-80.005355)" fill="black" font-family="moholregular">
    <!-- This is the magic -->
    <textPath startOffset="0" xlink:href="#txt-path" id="textPath9">Try our all new baby name generator</textPath>
  </text>
</svg>
2 Likes