What is wrong with this SVG file?

Question

Can somebody tell me how to fix this margins of my ::before element? Any margin: -2px doesn't work, any paddings... when I resize page, margins are still visible, once at top of img, once on sides... SVG file doesn't have this blue lines on its sides.

.container {
  background-color: #f7f7f7;
  height: 1000px;
  padding: 20px;
}

.media {
  position: relative;
  max-height: 408px;
  height: 155px;
  width: 200px;
  margin: 0 auto;
}

.media img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.media::before{
  content: "";
  background-image: url(https://svgshare.com/i/HRx.svg);
  position: absolute;
  background-position: center center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-size: cover;
  background-repeat: no-repeat;
}

SVG

Paul LeBeau · Accepted Answer

Adjust your viewBox size so it is slightly smaller than the grey square. At the moment rounding and pixel alignment, together with anti-aliasing bleed-through, means the blue JPEG underneath is slightly visible on the edges. By shrinking the viewBox, we are effectively making the grey square a fraction bigger, hiding the bleed-through.

Set `viewBox="1 1 510 511" (shrink viewBox by 1 unit on each side)
(Optional) Remove the width="512" height="513" attributes.

Result:

.container {
  background-color: #f7f7f7;
  height: 1000px;
  padding: 20px;
}

.media {
  position: relative;
  max-height: 408px;
  height: 155px;
  width: 200px;
  margin: 0 auto;
}

.media img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.media::before{
  content: "";
  background-image: url(https://svgshare.com/i/HPM.svg);
  position: absolute;
  background-position: center center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-size: cover;
  background-repeat: no-repeat;
}

What is wrong with this SVG file?

Answers (1)

Related Questions