В основном я хочу, чтобы мой SVG Lo go подходил для созданного мной контейнера div. Но когда я пытаюсь изменить размер с помощью width:100%; и height:100%, чтобы он мог полностью отображаться в размере контейнера div, просто исчезаю.
SVG Lo go должен быть в синем контейнере.
*{
box-sizing: border-box;
margin:0;
padding:0;
}
.navbar-container{
background-color: red;
width:100%;
height:40px;
}
.navbar-title{
margin:auto;
width:40%;
height:100%;
background-color: blue;
display:flex;
justify-content:center;
}
.navbar-title svg{
width:100%;
height:100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Devil Indumentaria</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar-container">
<div class="navbar-title">
<svg viewBox="0 0 144 40" src="./img/devil2.svg">
</svg>
</div>
<div class="navbar-links">
<ul>
<li><img src="./img/hom.svg">Home</li>
<li><img src="./img/mae.svg">Contact</li>
</ul>
</div>
</div>
</body>
</html>