Remove excess text above or below padding in SVG

I need assistance removing the above/below padding from an SVG text element.

Current state:

!

Desired state:

Below is the SVG code snippet

<svg xmlns:svg="http://www.w3.org/2000/svg" id="svg" style="margin-top: 100px;" viewBox="0 0 1656 614" preserveAspectRatio="xMinYMin meet">
  <g id="mySVG">
    <text x="0" y="0" dx="0" dy="0" fill="#000"  style="font-family: DINPro; font-size: 120px;" dominant-baseline="hanging" class="text-0">TEEEEEEXT</text>
  </g>
</svg>

There seems to be padding only above and below the text, as shown in the image link provided.

If anyone has a solution to remove this unwanted padding, I would greatly appreciate it.

Thank you in advance.

csssvgtext

Answer №1

To get rid of the excess space in the svg, remove the style attribute (which actually affects margin) and adjust the viewBox attribute by reducing the last digit to modify the height of the svg - in this case, I have decreased the height from 614 to 120 (the size of the font you are using).

If you want to increase the font size, you may also have to decrease the width since the svg is set to maintain its aspect ratio.

<svg xmlns:svg="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 1656 120" preserveAspectRatio="xMinYMin meet">
  <g id="mySVG">
    <text x="0" y="0" dx="0" dy="0" fill="#000"  style="font-family: DINPro; font-size: 120px;" dominant-baseline="hanging" class="text-0">TEEEEEEXT</text>
  </g>
</svg>

Answer №2

The term "padding" actually refers to the additional space around a font that accommodates characters extending above the uppercase letters or below the baseline. Although it may seem removeable, it is an essential part of the font and will always be present within the bounding box of the <text> element.

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

Can you explain the function of the "Normalize CSS" feature in Fiddle?

I recently came across this interesting fiddle: Demonstration of rounded corners It achieves the desired outcome, however, I noticed that it only works properly when the "Normalised CSS" checkbox is selected. When it's not checked (like in my code), ...

css

Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important ...

javascriptjquerycss

The CSS dropdown menu is malfunctioning on Internet Explorer and Firefox

After searching for a solution and coming up empty-handed, I have decided to ask a question. The drop-down menu on my computer and other devices at home works perfectly in Chrome but not in Firefox and IE. #menu { position: absolute; left: 50%; bottom ...

htmlcssdrop-down-menu

Revealing Transition Element on mouseover

My side-menu consists of icons that display text to the right upon hovering over them. I want the text to show up and the div to expand smoothly with a sliding transition, ideally without the need for additional JavaScript. Is there a way to achieve this? ...

htmlcssbootstrap-5

Ways to create gaps among the links in the Bootstrap 4 navigation bar?

I recently put together a Bootstrap 4 navbar and now I'm looking to increase the spacing between the items on the right side of the navbar. <nav id="menu" class="navbar navbar-expand-md sticky-top"> <div class="site-branding navbar-brand c ...

htmlcssbootstrap-4

Can floating elements be disregarded by block elements?

According to W3C, the behavior of floating elements is such that: When a float is present, non-positioned block boxes that come before and after the float flow vertically as if the float doesn't exist. However, line boxes positioned next to the fl ...

htmlcsscss-float

What can I do to remove the hidden <p> tags that Wordpress is inserting into my HTML code?

There seems to be some extra space appearing between my divs (inside a main div) that is possibly due to unexpected <p> and </p> tags being added by WordPress. This issue is quite common with WP, but the problematic tags are hidden so I am unab ...

htmlcsswordpress

Step-by-step guide on sorting WordPress posts by a custom field date

I've created an event sidebar section that will only show the next 3 upcoming events. I have successfully set up the custom post type and custom fields, but I am struggling to figure out how to order the posts based on the start date of the events, wh ...

phpjavascripthtmlcsswordpress

The collapse button in Bootstrap 3.3 and jQuery 1.1 appears to be visible but unresponsive when clicked

This code isn't functioning properly as it displays the three horizontal bar button, but nothing happens when clicked. bootstrap-3.3 jquery-1.1 Toggle navigation CopyHere <div class="collap ...

htmlcsstwitter-bootstrap-3jquery-1.10

The font-family CSS properties inheritance is not functioning as I had anticipated

I'm currently working on a webpage where I want to add a list of links that resemble tabs. While this style is functioning correctly for the main pages, I'm having trouble implementing it for a new section. The existing list is located within: ...

fontscss

Tips for showing the value in the subsequent stage of a multi-step form

Assistance is required for the query below: Is there a way to display the input field value from one step to the next in multistep forms? Similar to how Microsoft login shows the email in the next step as depicted in the image below: https://i.sstatic.ne ...

javascriptphphtmlcss

Is it possible to target all children with CSS3 if a certain number of children are present?

I've been racking my brain trying to select all children if there are x or more children present. I want to be able to select all child elements if there are at least x children. So far, I've managed to target all children when there are exactl ...

csssass

Adjusting the appearance of Google charts

Is there a way to eliminate the label for the area chart located at the top right corner? ...

htmlcsschartsgoogle-visualization

The challenge of handling overflow in IE9

I'm encountering an issue specifically in IE9 where a child div is not respecting the overflow:hidden property of its container div. The outlined blue div in the image represents the container with overflow:hidden. The goal is for the images to stay w ...

htmlcssinternet-explorerinternet-explorer-9overflow

Continual dark mode throughout page navigation with the ability to switch between light and dark modes

I've been experimenting with creating a persistent dark mode feature for web pages. My goal is to remember the user's preference as they navigate between pages. Additionally, I included a toggle button for switching between dark and light modes t ...

javascripthtmlcss

Optimizing the speed and load performance of SQLite in Phonegap

As someone who is new to Android programming, I am seeking advice on how to optimize the performance of my phonegap SQLite application. Currently, it takes 30 seconds to load 150 words when I hit the refresh button. Can anyone provide tips on how to enhanc ...

jqueryhtmlcsssqlitecordova

Parent div is positioned absolutely with overflow set to hidden

I am facing a unique requirement where the parent div has an absolute position and the child div also has an absolute position. Inside the parent div, I have set overflow: hidden to hide the extra width of the child div. However, this setup is not working ...

htmlcss

Create a table within the B-Col element that automatically adjusts its size to match the column width using Vue-Bootstrap

Within my Vue component, I have the following code snippet: <b-modal ...> <b-row> <b-col sm="12"> <table > <tr v-for=... :key="key"> <td><strong>{{ key }}: </str ...

cssxmlvue.jsbootstrap-vue

Using various span elements with distinct alignment within an h1 tag in Bootstrap 5

How can I nest three span tags inside an h1 tag, aligning them differently? The first on the left, the second in the center, and the third on the right. Can this be achieved using Bootstrap or does it require custom CSS? ...

htmlcssbootstrap-5

Having trouble understanding why <p> and <h3> elements are displaying as links?

Starting my journey in front-end development with my first website project. Using HTML, CSS, Bootstrap, and Flask. Encountering an issue where my code is styled like a link instead of plain text. It appears blue and becomes underlined when hovered over. & ...

htmlcssbootstrap-4