CODEWITHSUNDEEP
javascripthtmlcsssvg
Cryptic
Cryptic

Reputation: 47

Showing svg files over each others in html

Is it possible to add svg icons like files on top of another svg file, i'm using a simple object tag for my html code and i was wondering if i could add more svg files on top of the one that already shown 

<object id="topOBJ" data="worldHigh.svg" type="image/svg+xml" width="1000" height="1000">Your browser doesn't support this type of files</object>

Upvotes: 2

Views: 2325

Answers (2)

Rogier Spieker
Rogier Spieker

Reputation: 4187

As mentioned in the answer by Lau, if you insist on using <object>-elements you can overlay them using CSS positioning,

.combined {
  display: inline-block;
  position: relative;
}
.combined > :first-child ~ * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class=combined>
	<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" type="image/svg+xml"></object>
	<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" type="image/svg+xml"></object>
</div>

The CSS in the example ensures the wrapping element (<div class=comined>) takes up the dimensions of the first object and overlays all other elements.

There is a nicer alternative though, using SVG to combine the other SVGs

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="0 0 50 50">
	<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" />
	<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" />
</svg>

Upvotes: 0

Lau Avocados
Lau Avocados

Reputation: 126

You can use absolute positioning to put one on top of each other. Extra tip! absolute items are relative to the closest parent with position:relative so you can use that to avoid them from flying all over the page.

Upvotes: 3

Related Questions