Put 2 svg side by side

Question

I am able to use 2 svg on one screen in d3.js. The Code looks like this and it works great:

<svg width="880" height="800" id="svg1"></svg>  
<svg width="880" height="800" id="svg2"></svg>

var svg1 = d3.select("#svg1");

var svg2 = d3.select("#svg2");

My only problem is, that svg2 appears under svg1. But my goal is to put them side by side. Do you guys know how to solve that problem? I tried to manipulate the x position of svg2 with this code:

<svg cx="880" cy"100" width="880" height="800" id="svg2"></svg>

but this was not the right solution. Thanks guys!!

There are many ways to move them side-by-side, but to make your SVG "responsive" you'll need to replace the width and height attributes with a viewbox. — evolutionxbox, May 19 '17 at 15:07
So how to define the viewbox to place svg2 to the right side of svg1? ` — Derick Kolln, May 19 '17 at 15:22
You can find plenty of tutorials online on how to put two elements side-by-side using CSS. — evolutionxbox, May 19 '17 at 15:26
By default SVGs will be side by side, you don't have to define viewBox or anything, but only if there is enough room for them. Check my answer here: http://stackoverflow.com/a/39178944/5768908. You probably don't have 1760px in your window width. — Gerardo Furtado, May 19 '17 at 15:37
by default svg is a block element. Make them inline block to show side by side — Persijn, May 19 '17 at 15:43
I don't understand why the comment above has 2 "upvotes"... SVG is inline by default: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display Again, this is very clear in my linked answer. — Gerardo Furtado, May 19 '17 at 16:08
@Gerardo: yeah, it is the size of the window width. So this means there is no chance to place them side by side because of the limited window size? — Derick Kolln, May 19 '17 at 16:27
You would need to specifically make the parent container wide enough to hold them both side by side. [See my answer to this question](http://stackoverflow.com/questions/44071252/how-to-create-2-svgs-on-one-page). — Paul LeBeau, May 19 '17 at 17:52

score 2 · Accepted Answer · edited May 23 '17 at 11:33

2

In HTML, the svg> element has the display inline by default, meaning that you don't need to do anything to show them side by side.

This is a small demo to proof it:

var svg = d3.select("body")
  .selectAll("feynman")
  .data([0,1])
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100)
  .style("background-color", function(d){ 
    return d? "blue" : "orange";
  });

<script src="https://d3js.org/d3.v4.min.js"></script>

The issue in you case is the width: as each SVG has 880px wide, you'll need a window with at least 1780px to see them side by side.

An alternative is putting both SVGs in a <div> with a width greater than 1760px (as LeBeau explains in his answer here), which will create a scroll bar at the bottom:

<div style="width:1770px">
  <svg width="880" height="160" id="svg1" style="background-color:blue"></svg>
  <svg width="880" height="160" id="svg2" style="background-color:orange">></svg>
</div>

You can also play with overflow and overflow-x.

edited May 23 '17 at 11:33

Community

1
1

answered May 20 '17 at 01:09

Gerardo Furtado

100,839
9
121
171

1

This is very interesting as I can find no specification explicitly stating this. I was pretty sure SVGs were to be considered block elements by default, but, trying to proof you wrong, I wasn't able to find any reference backing either of both, say, *assumptions*. Are you aware of such a reference or do you know how the default is implicitly derived? – altocumulus May 20 '17 at 09:16
1

I've read several times (unfortunately I don't remember the sites now) that SVGs are *inline* by default, so now I know this *by heart*. In the MDN link I shared in my comment to the question, *inline* is in bold, and I assume that this is the way they use to specify the default value. LeBeau in [his answer](http://stackoverflow.com/a/44076073/5768908) says the same thing. – Gerardo Furtado May 20 '17 at 09:19
1

Also, According to Amelia Bellamy-Royds, who wrote a book on SVG, SVGs are inline by default: http://stackoverflow.com/a/33746702/5768908 Anyway, we can simply check this by running the snippet: they behave as inline (or inline-block), but **not** as block. – Gerardo Furtado May 20 '17 at 09:21
1

This is where things get tricky! The MDN reference cites the SVG spec, whereas the positioning clearly needs to be part of the HTML spec as this is embedded content rendered in an HTML document. I can clearly see it in the dev tools computed to be inline, I am just curious where this comes from... – altocumulus May 20 '17 at 09:30
1

Indeed, you are very right. I tried to find any information regarding **HTML**, but I failed. Maybe LeBeau or Robert Longson know a doc explicitly stating this. Curiously, it was interesting seeing that you (whose knowledge on D3 I highly admire) though it was *block* by default: that explains why [that comment in the question](http://stackoverflow.com/questions/44073386/put-2-svg-side-by-side/44080919?noredirect=1#comment75172222_44073386) has got 3 votes. So, apparently, there is this common concept that SVGs are block by default. – Gerardo Furtado May 20 '17 at 09:34
1

Thank you! I have also left a comment on Amelia's post asking for insights. Let's wait and see... – altocumulus May 20 '17 at 09:39
1

Great. Is she still active? I'm seeing that her last answer is from 7 months ago... Anyway, I'll follow that post to see her reply. – Gerardo Furtado May 20 '17 at 09:42
2

SVGs in HTML are inline by default, consistent with `img` and `object` and so on. I don't know that it's specified anywhere (it's kind of lost in-between of the HTML, CSS, and SVG specs). But `inline` is the initial value for `display` for *any* element that doesn't have another value specified. For [CSS scaling](https://www.w3.org/TR/css3-images/#sizing), SVG should be treated as an "object" which may have intrinisic size and/or aspect ratio. That also means that `display: inline` behaves like `inline-block`. – AmeliaBR May 20 '17 at 21:47
2

I think the reason why many people assume SVGs are display: block by default is that, if you give an SVG a `viewBox` but no width/height, all modern browsers will stretch it to the full container width. So even if it is still technically an inline object, it looks as if it is block, because it takes up a full line in the layout. – AmeliaBR May 20 '17 at 21:49
Many thanks to @AmeliaBR for the CSS hint! Maybe [this](https://developer.mozilla.org/en-US/docs/Web/CSS/display) is as close as one can get to a formal specification: *"In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline."* – altocumulus May 21 '17 at 20:46

Put 2 svg side by side

1 Answers1

Linked