The incorporation of SVG within a span disrupts the conventional left-to-right arrangement of its child elements

As I was working with some basic HTML, I encountered an issue.

<span>
<span>Hello</span>
<span>World</span>
</span>

The above code displays:

Hello World

However, when I tried adding an SVG element like this:

<span>
<span>Hello</span>
<span><svg role="img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve"><path id="heart-full" d="M124 20.4C111.5-7 73.7-4.8 64 19 54.3-4.9 16.5-7 4 20.4c-14.7 32.3 19.4 63 60 107.1C104.6 83.4 138.7 52.7 124 20.4z"/></svg></span>
<span>World</span>
</span>

The elements are no longer side by side and instead appear stacked vertically.

Hello

♥

World

You can view the issue in this fiddle: https://jsfiddle.net/2Lot140g/2/

I'm looking for a solution to maintain the original left to right alignment of child elements. Can anyone provide guidance?

csssvg

Answer №1

Typically, an SVG will automatically adjust its size to fit the available screen space unless a specific size is defined.

However, if you specify a width or height for the SVG element, it will conform to that particular size.

svg {
  width: 1em;
}
<span>
<span>Hello</span>
<span><svg role="img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve"><path id="heart-full" d="M124 20.4C111.5-7 73.7-4.8 64 19 54.3-4.9 16.5-7 4 20.4c-14.7 32.3 19.4 63 60 107.1C104.6 83.4 138.7 52.7 124 20.4z"/></svg></span>
<span>World</span>
</span>

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

What could be causing the tabs to disappear from the Material UI tab component in my React project?

What am I currently working on? I am in the process of developing a horizontally scrollable tab component to select dates within a month For this project, I have decided to utilize the Material UI library Issues Encountered The dates before the 14th Sun ...

cssreactjsmaterial-uitabs

The integration of CSS into an HTML file is ineffective

I'm new to learning about html and css files, and I've been struggling with a particular issue for some time. I created these files, but I can't seem to apply the css to the html file: app.py from flask import Flask from flask import rende ...

pythonhtmlcss

The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

After experimenting with the viewport meta tag and enclosing it in a div class="container", I found that the issue persists on Codeply and Chrome DevTools. However, when I adjust my browser size, the problem seems to disappear. I also tried using various v ...

cssbootstrap-4viewportbootstrap-5bootstrap-grid

Having trouble with centering my div in HTML and CSS

Coding Challenge .nav_bar { position: absolute; top: 0; width: 800px; height: 23px; display: inline-block; text-align: center; background-color: #0090bc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 2px solid #004D6F; -web ...

jqueryhtmlcss

The transition effect for the box shadow is being altered to modify the dimensions

--- UPDATE 2 ---- Here is a different example video showcasing the bizarre behavior of my react application. I am struggling to identify the root cause of this issue. See the issue in action I have a div with the class name side-btn It contains an anim ...

cssreactjs

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows: $(document).ready(function(){ $(window).scroll(function(){ if ($(thi ...

javascriptjqueryhtmlcss

Concealing unnecessary borders on list elements using jQuery

Here is the code I am working with: http://jsfiddle.net/eLyJA/ I am looking to calculate and eliminate all border edges to achieve this visual effect: ...

htmlcss

Ensuring complete height and width with no scrollbar in a Material UI React application

I'm attempting to create a page that fills the entire height of the screen without adding an undesirable scrollbar. When I say 100% height, I mean it should just fit the size of the screen. Here is a demonstration of the issue. The yellow highlighted ...

htmlcssreactjsmaterial-ui

JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...

javascripthtmlcsslaravel

How can I apply a specific style class to a table row when I already know the table's id?

Hi there! I'm new to jquery and trying to enhance the functionality of my application which has multiple HTML tables in JSP's. My goal is to use jQuery to dynamically apply a CSS style class when hovering over a row. Currently, I have the followi ...

jqueryhtmlcss

What's the best way to trigger an alert popup after calling another function?

Here are some HTML codes I've been working with: <button id="hide" onclick="hide()">Hide</button> <p id="pb">This paragraph has minimal content.</p> My goal is to have the paragraph hide first when the button is clicked, foll ...

javascripthtmlcssalert

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

The input focus placeholder at the top is not functioning properly when applied to an input field that

I recently designed an input box similar to this: https://i.stack.imgur.com/lkSnh.png However, I encountered an issue when trying to make the input box readonly. Here is a snippet of my code: .myinput input:focus { outline: none; } ... <div clas ...

htmlcssfocuscss-transitions

No matter how much I try, the text refuses to align with the top-left corner

I have been working on creating a loading screen, but I am facing an issue with aligning the h1 tag selected to the top left. As a young developer at the age of 13, I am quite confused. I attempted to use the following CSS properties: vertical-align: top; ...

htmlcsssvgloadingloader

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

javascripthtmlcssvue.jsnuxt.js

Tips for reducing text in a card design

As a newcomer to codeigniter 4, I recently created an event card with a lengthy description. However, when I attempted to display the event data from the database on the card, it ended up becoming elongated due to the length of the description: https://i. ...

phpcsscodeigniterbootstrap-5card

jQuery - accessing a different class within the object

Let me explain the scenario: I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance, <div><p> Physics </p></div> <div><p> Chem ...

javascriptjqueryhtmlcss

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate

The inline-block property can become unstable when dealing with a large number

When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle CSS #container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: ...

htmlcss

CSS // code that works on any device or platform

I have since the beginning been annoyed with the compatibility of CSS. Whats the best practice for coding css, that works with the most common platforms... ( IE7+, Firefox, Safari, Chrome AND iPad / iPhone, Blacberry, Android) Are there any list to be fo ...

csscross-browsercross-platformplatform