Bootstrap Nav Bar doesn't render SVG image

I used Bootstrap 5's navbar component code, I want to render a robot.svg image in the navbar. But how come the robot.svg file doesn't render in this code? I placed the robot.svg file in the views folder. This code is in the header.esj file in the partials folders.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-wide, initial-scale=1">
    <title>Home Page</title>
    <style>
        body { padding-top:30px; }
      </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        .jumbotron {
            margin-left: 50px!important;
        }
    </style>

</head>

<body class="container">
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        
            <a class="navbar-brand" href="#">
                <img src="../robot.svg" alt="" width="50" height="30" >
              </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="/">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/projects">Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contact">Contact</a>
            </li>
          </ul>
        </div>
      </nav>

    </header>

Solution

There are two ways to do that.

Method 1 The way that you have done already. Please make sure your path is correct.

Method 2 You can use SVG source code instead of img scr.

For an example.

Right click on your svg image and choose "Open with -> Notepad". (If there is no existing notepad you have to choose "Choose another app -> Notepad"
Then Copy all the code showing in notepad (except <?xml version="1.0" encoding="UTF-8" standalone="no"?> )
Then Paste the code instaed of <img> as below example.

Example - https://codepen.io/ran_nin_du/pen/abLMpGw

PS:- use css to change size of image and if you are using React, you can use separate component for that.

I hope this answer will help you.