CODEWITHSUNDEEP
csssvg
morpheus
morpheus

Reputation: 20382

Introduction of SVG in a span breaks the left to right positioning of child elements

I have this simple html

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

and it displays

Hello World

but if I introduce a SVG element like so

<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 positioned left to right and instead are stacked vertically.

Hello

♥

World

See this fiddle: https://jsfiddle.net/2Lot140g/2/

How can I preserve the left to right stacking of child elements?

Upvotes: 0

Views: 94

Answers (1)

Paulie_D
Paulie_D

Reputation: 115362

By default an SVG will expand as much as it can to fit the available screen space unless a definite size is given.

If you give the SVG a width or height....it will adopt that 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>

Upvotes: 2

Related Questions