Is there a way to reduce the space occupied by my SVG and why am I encountering limitations in resizing it?

The issue with SVG extra space persisting even after trying various fixes is driving me crazy. When inspecting the SVG, there seems to be a large blue space that is pushing everything else down. I have experimented with different solutions like setting height:auto;, display: block;, and adjusting the view box, but nothing seems to work.

I am unable to modify the size of the SVG outside of the media query. Despite being told that it is already inline, the excessive space it occupies suggests otherwise.

 <svg version="1.1" style="display: block;" viewBox="0 0 800 800">
        <defs>
          <!-- The text path: see links above regarding coordinate system -->
          <path d="M0, 200a200, 200 0 1, 0 400, 0a200, 200 0 1, 0 -400, 0" id="txt-path"></path>
        </defs>

        <text fill="black" font-size="45.5" font-family="moholregular">
          <!-- This is the magic -->
          <textPath startOffset="0" xlink:href="#txt-path">Try our all new baby name generator</textPath>
        </text>
      </svg>

Access the complete page on codepen

htmlcsssvg

Answer №1

The issue lies in the setting of your viewBox, which is currently set to 800 width and 800 height, even though your content does not take up that much space.

Highlighting the SVG background makes this discrepancy clear.

svg {
  width: 400px;
  background-color: linen;
}
<svg version="1.1" style="display: block;" viewBox="0 0 800 800">
  <defs>
    <!-- The text path: see links above regarding coordinate system -->
    <path d="M0, 200a200, 200 0 1, 0 400, 0a200, 200 0 1, 0 -400, 0" id="txt-path"></path>
  </defs>

  <text fill="black" font-size="45.5" font-family="moholregular">
    <!-- This is the magic -->
    <textPath startOffset="0" xlink:href="#txt-path">Try our all new baby name generator</textPath>
  </text>
</svg>

To resolve this, adjust the viewBox to encompass the graphic more closely.

For instance, you can use: viewBox="-10 151 420 260".

svg {
  width: 400px;
  background-color: linen;
}
<svg version="1.1" style="display: block;" viewBox="-10 151 420 260">
  <defs>
    <!-- The text path: see links above regarding coordinate system -->
    <path d="M0, 200a200, 200 0 1, 0 400, 0a200, 200 0 1, 0 -400, 0" id="txt-path"></path>
  </defs>

  <text fill="black" font-size="45.5" font-family="moholregular">
    <!-- This is the magic -->
    <textPath startOffset="0" xlink:href="#txt-path">Try our all new baby name generator</textPath>
  </text>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The :before and :after pseudo classes are not displaying properly on the video element

I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...

htmlcssvideo

Guide on accessing a local image while setting the background image using JavaScript

I am trying to set a background image from a local source on my computer. Below are two lines of code, one that works and one that does not: (the local one fails) _html.style.backgroundImage = 'url("urlsourceblahblahblah")'; _html.style.backgro ...

javascripthtmlcssangularjsimage

Guide to making a dropdown menu that pulls information from a text box and displays the location within the text

I'm currently working on a unique dropdown feature that functions like a regular text field, displaying the text position. To achieve this, I've constructed a hidden dropdown menu positioned beneath the text field. My goal is to develop a jQuery ...

javascriptjqueryhtmlcss

Calculate the average color of the outer pixels in an image

I am looking to dynamically set the background color of a div using the average color of the outer pixels in an image. This way, I can avoid manually setting the background color for each image. For example, if the image is 100px x 100px, I would check th ...

javascriptjquerycssimage

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

javascripthtmlajax

Has the user successfully authenticated with Google?

Possible Repetition: How to verify if a user is logged into their Google account using API? I'm working on a website that displays a Google Calendar. My query is: Can I determine whether a user is currently logged into a Google Account? If it&ap ...

javascripthtml

What is causing the image to move to the following line?

(https://i.stack.imgur.com/5oi7s.png) The image appears to be shifting to the next line inexplicably. I have experimented with various methods to address this issue, including utilizing the built-in Image component which seemed to show improvement. However ...

cssreactjsimagenext.js

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

htmlcssresponsive-design

Unable to display SVG file in HTML

I'm currently facing an issue where my SVG file is not displaying and instead showing the alt attribute of the element. https://i.sstatic.net/01cl6.png Despite having data in the src attribute of the img tag. https://i.sstatic.net/4pXrx.png This i ...

reactjssvgnext.js

Issue with Dropdown alignment in Bootstrap Navigation Menu

I'm currently utilizing Bootstrap to design a Navbar. However, I'm encountering an issue where clicking on the dropdown menu causes the items in the dropdown to extend outside of the window instead of adjusting the window size accordingly. To try ...

htmlbootstrap-4

The functionality of Angular Datepicker is disrupted when scrolling through the page

Coding in HTML <div class="col-5 col-md-3 px-0 daterange-picker"> <div class="form-group"> <div class="input-group"> <input type="text" id="second ...

javascripthtmlcssangularangular-ui-bootstrap

The jQuery AJAX call is successful in Firefox, but unfortunately, it is not working in Internet Explorer

I've encountered a perplexing issue with an AJAX call. It's functioning perfectly fine in Firefox, but for some reason, it's not working in IE. Curiously, when I include an alert() specifically for IE, I can see the returned content, but the ...

javascriptjqueryhtmlajaxinternet-explorer

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

Hover-over functionality not functioning properly on select images

My website, located at , is fully functional. When you visit the homepage, you will see some words that turn black when you hover over them. I recently switched this site, which was originally created in Dreamweaver, to Umbraco, a .net based CMS. My site ...

javascriptjqueryhtmlcss

The dropdown menu stubbornly refuses to close even after multiple clicks on it in the mobile responsive user interface

Currently, I am tackling the challenge of creating a website navigation bar with a dropdown menu that adjusts to different screen sizes. However, I have encountered an obstacle where the dropdown menu fails to close when I click outside of it. To address t ...

javascripthtmlcssbootstrap-5

The absence of spacing in the .pug file is creating a margin conflict with Bootstrap due to elements being densely packed

One puzzling issue arises: can a space be added between the html div's created by a .pug file? Converting HTML to Pugs has been smooth sailing for the most part, except for one hiccup. A set of buttons suddenly lost their spacing. Upon closer inspec ...

htmlcssnode.jspugbootstrap-5

The order of event handlers in jQuery

I am currently setting up event binding for a text element dynamically. Take a look at the following code snippet: <input type="text" id="myTxt" /> <script type="text/javascript"> function attachEvent1(element){ element.keyup(func ...

javascriptjqueryhtmlevents

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

javascripthtmlcss

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Here is a demo example showcasing 'Server Sent Events(SSE)': Embed HTML code(index.html) : <!DOCTYPE html> <html> <body> <h1>Receiving server updates</h1> <div id="result"></div> <script> if(type ...

javascriptphpjsonhtmlserver-sent-events

Using PHP to generate a table populated with generic elements from an array

How can I create a dynamic table in PHP that can handle any generic array with different keys and values, including nested arrays? I want to use the same table structure for various arrays regardless of their content. Any advice on achieving this flexibili ...

phphtmlarrayshtml-table