svg content exceeds element

Question

The SVG Image is not displayed properly. I expect the "::before" to be 18x18px and the SVG to be displayed exactly the way it looks.

If you open the SVG in a new TAB it's exactly 18x18 px.

Why does it move outside the container in the example? Am I doing something wrong?

.row {
  background-color: red; 
}
.col-12 {
  background-color: green;
}
.bg-white {
  background-color: #fff;
}
.marketing {
    font-weight: 800;
}
.marketing .headline {
    margin: 1rem 0 1rem 10%;
}
.arrow::before {
    content: url('data:image/svg+xml;utf8,');
}

myf · Accepted Answer

First off, shape in your icon itself is shifted up in the viewBox, if you expected to see it centred within square, you might have been misled:

Then, as @enxaneta suggested in the comment, making it inline-box and setting dimensions should help, just make sure you use proper vertical-align.

.row {
  background-color: red; 
}
.col-12 {
  background-color: green;
}
.bg-white {
  background-color: #fff;
}
.marketing {
    font-weight: 800;
}
.marketing .headline {
    margin: 1rem 0 1rem 10%;
}
.arrow::before {
    content: url('data:image/svg+xml;utf8,');
    vertical-align: text-bottom;
    display: inline-block;
    height: 18px;
    outline: 1px solid red;
}

Simplified test-cases without align:

.original::before {
  content: url('data:image/svg+xml,');
}

.fixed::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  content: url('data:image/svg+xml,');
}
/* demonstrative: */
span::before { background-color: red; outline: 1px solid blue; }
span::after { content: ' ' attr(class); }
html { background: dimgrey; color: snow;  }

(I was misled about observation that presence of dimension in SVG affect it's align.)

svg content exceeds element

Answers (2)

Related Questions