Почему между моим <img>и <div>есть серая "полоска"

Question

Между <img>, отображающим SVG, и <div> есть серая линия.

Здесь скриншот и часть кода.

.svg{
	width: 100%;
	height: auto; 
	display: block;
}

.title-container{
	// center the title into the container
	display: flex; 
	width: 100%;
	justify-content: center;
	background-color: $white;
	padding-top: 10px;
}

<img src="assets/oblique.svg" class="svg"/>
<div class="title-container">
	<a href="/" >Example</a>
</div>

То, что я уже пробовал

Я уже пытался установить поля, отступы и границы на 0px, это не работает .
Я уже пытался установить для поля, отступа или границы -1px, но это создает переполнение.

Answer 1

@ Ko sh решение работает отлично, большое ему спасибо.

Я нашел решение использовать svg в качестве border-image

Вот код:

.title-container{
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: $white;
    background-clip:padding-box;
    padding-top: 10px;
    border-top: solid 100px;
    border-image: 
    url('http://fitnesslab20.local/assets/oblique.svg') 100 round;
}

<div class="title-container">
    <a href="/" >Example</a>
</div>

Answer 2

Похоже, вы пытаетесь сделать перекос на своем div.
Вам может понравиться другой подход без SVG.
Использование border-image:

body {
  background: #15100e
}

.title-container {
  display: flex;
  width: 100%;
  justify-content: center;
  background-color: white;
  background-clip:padding-box;
  padding-top: 10px;
  border-top: solid 50px;
  border-image: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #fff 50%) 100% 0 0 0 / 50px 0 0 0
}

<div class="title-container">
  <a href="/">Example</a>
</div>