About positioning and alignment of svg elements

Question

I am a beginner with SVG and CSS and my ultimate goal is to have one svg node containing another svg node on the left 40% width and one text node on the right occupying the remaining 60%, both vertically centered, in the rough form of,

<svg>
<svg viewBox="...">...</svg>
<text>...</text>
</svg>

and the expected presentation is like

------------------
|  &&            |
|&&&&&& Some text|
|  &&            |
|<-40%-><--60%-->|
------------------

Also, I hope to achieve this without JavaScript as far as possible.

However, I am encountering the following problems,

1. Why specifying width in the CSS class instead of directly in the svg node does not work? fiddle - CSS fiddle - SVG

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties. ref

2. Why float: right; does not make the image align to the right of the parent? fiddle - still left

3. How to make the svg element automatically shrink to its actual size (viewBox)? It defaults to 100% and can only be specified to some actual value with the method described in question (1). I want it to be automatically adapted to the actual contents i.e. keeping to the aspect ratio.

Thank in advance!

Answer 1

First, to answer your questions:

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties. ref

That's true, but not all browsers have completely implemented all these yet.

Why float: right; does not make the image align to the right of the parent?

float only applies to HTML elements. The nested <svg> element is in an SVG document, not an HTML document.

How to make the svg element automatically shrink to its actual size (viewBox)?

Give it a width and height equal to the viewBox.

<svg class="image" width="40" height="80" viewBox="0 0 40 80">

---

You probably don't want to be trying to do layout within an <svg> element. If you want automatic layout, then that is what HTML is for.

.outer {
  display: flex;
  background-color: green;
}

.outer svg {
  flex: 0 0 40px;
}

<div class="outer">
  <svg viewBox="0 0 40 80">
    <rect x="0" y="0" width="40" height="80"/>
  </svg>
  <div>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

If you do actually want to layout things in an SVG, then there is no need to use nested <svg> elements. But remember, there is no automatic layout in SVG. You have to specify where each object is positioned yourself.

.outer {
  background-color: green;
}

<svg class="outer" width="100%" height="80px">
  <rect x="0" y="0" width="40" height="80"/>
  
  <text x="40" y="1em">
    <tspan>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</tspan>
    <tspan x="40" dy="1em">et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</tspan>
    <tspan x="40" dy="1em">aliquip ex ea commodo consequat.</tspan>
  </text>
</svg>

Answer 2

I've done some experiment:

In the first case, I specify a width attribute to the inner <svg>, it works.

In the second case I do not, so the <svg> should take the width from CSS and it does not happen.

As you can see, width and height work perfectly for the .outer SVG.

Conclusion: when you use nested SVGs, the inner one is treated differently, just like g or rect or any other element of SVG DOM.

See a demonstration in the snippet:

.outer {
  width: 100px;
  height: 100px;
  background-color: green;
}

.inner {
  width: 50px;
  height: 50px;
  background-color: red;
}

rect {
  fill: blue;
}

<svg class="outer">
  <svg class="inner" width="50">
    <rect x="20" y="20" width="80" height="80"/>
    </svg>   
</svg>

<svg class="outer">
  <svg class="inner">
    <rect x="20" y="20" width="80" height="80"/>
    </svg>   
</svg>