Why is my SVG element not appearing? (even when Inspecting my webpage)

Question

So I tried to include an SVG element to my drop-menu, and I included the SVG attribute. However, it doesn't seem to be considered by any browser; even when inspecting the page, I cannot find the SVG attribute anywhere. Below is a sample of the code (notice I'm using CSS's utility framework Tailwind).

<select class="font-semi bold text-sm appearance-none bg-gray-200 
        inline-block p-5 px-5 py-2 rounded-2xl ">
  <option value="Categor" disabled selected>Category</option>
  <option value="personal">Personal</option>
  <option value="buisness">Buisness</option>
  <option value="You">You</option>
  <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22" height="22" viewBox="0 0 22 22">
            <g fill="none" fill-rule="evenodd">
                <path stroke="#000" stroke-opacity=".012" stroke-width=".5"
                      d="M21 1v20.16H.84V1z">
                </path>
                <path fill="#222"
                      d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 
                      1.184-5.04-5.04 5.04-5.04z">
                </path>
            </g>
        </svg>
</select>

I tried changing the place of the SVG element by placing it outside of the select element but still into the span element. This time, the SVG element was visible. However -and naturally- it was outside of the select element, rather on the extreme right (Even tho after inspecting the span element, it clearly contains the "category" space. I thought It could be a browser problem, so I tried on other ones (I'm using Chrome) and on the Tailwind playground, and nothing changes. Does anyone have a solution?

Answer 1

You are putting svg inside a select tag.

A select tag only accepts two children:

• option
• optgroup

All other elements are ignored.

<!--this works-->
<select>
  <optgroup label="opt group" />
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Here the two elements render inside.

Let's take a look at your code:

            <span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22"
                    height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>    
                </select> 

The svg is inside the select.

Move it out!

<span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22"
                    height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>

For making the < on the right:

svg {
    position: absolute;
    right:0;
}

It works when the select is on the top:

svg {
    position: absolute;
    right: 0;
}

<span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22"
                    height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>

Look what happens if you have stuff above! It works:

svg {
  position: absolute;
  right: 0;
}

<div><strong>this is bold</strong> iqjr 98qc0 v0q89ure qoicqje oqircjoe iaewc r</div>
<span>
                <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22"
                    height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>

This also works:

table {
  width: 100%;
}
#triangle {
  text-align:right;
}

<div><strong>this is bold</strong> ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc</div>
<table>
<tr><td><select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
                    <option value="Categor" disabled selected>Category</option>
                    <option value="personal">Personal</option>
                    <option value="buisness">Buisness</option>
                    <option value="You">You </option>
                   
                </select>
                
               </td>
               <td id="triangle">
               <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22"
                    height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>
               </td></tr></table>

But don't use a table tag. They carry semantic meaning!

Tables are supposed to carry data:

col1	col2
data	more data
data	more data
data	more data

But what if it didn't carry data?

Stack Overflow	Questions
Home	Why is my SVG element not appearing? (even when Inspecting my webpage)
Users	Why is my SVG element not appearing? (even when Inspecting my webpage)

This is bad for screen readers.

So use display:table; instead.

.faketable {
  display:table;
}
.faketable>div {
  display:table-row;
}
.faketable>div>div {
  display:table-cell;
  padding:7px;
}

<div class="faketable">
<div>
<div>Cell One (aruc b)</div>
<div>Cell Two (ierjc eijac)</div>
</div>
<div>
<div>Cell Three (qrc a)</div>
<div>Cell Four (caf vfjj)</div>
</div>
</div>

So the second method should look more like this:

.faketable {
  width: 100%;
}

#triangle {
  text-align: right;
}

.faketable {
  display: table;
}

.faketable>div {
  display: table-row;
}

.faketable>div>div {
  display: table-cell;
  padding: 7px;
}

<div><strong>this is bold</strong> ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc</div>
<div class="faketable">
  <div>
    <div>
      <select class="font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl ">
        <option value="Categor" disabled selected>Category</option>
        <option value="personal">Personal</option>
        <option value="buisness">Buisness</option>
        <option value="You">You </option>

      </select>

    </div>
    <div id="triangle">
      <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22" height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg>
    </div>
  </div>
</div>

And if you want an image inside a select tag, you could use a custom dropdown:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = document.getElementById('content');
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

function hide(element) {
  var x = document.getElementsByClassName("options");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "white";
  }
  document.getElementById('content').style.display = 'none';
  element.style.backgroundColor = "#00ffff"
}

.options:hover {
  background-color: #00dddd !important;
}

#buttons,
.options {
  cursor: pointer;
}

.options {
  border: 1px solid black;
  background-color: white;
}

#content {
  position: fixed;
  top: 1em;
}

svg {
  position: absolute;
  right: 0;
}

<table>
  <tr>
    <td><button style="width: 100%;" id="buttons" class="collapsible">Click Me</button> <svg class="transform -rotate-90 absolute pointer-events-none inline flex" style="right: 12px;" width="22" height="22" viewBox="0 0 22 22">
                     <g fill="none" fill-rule="evenodd">
                       <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
                       </path>
                       <path fill="#222"
                             d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
                   </g>
               </svg> </td>
  </tr>
  <tr>
    <td id="content" style="display:none;" onblur="this.style.display='none';">
      <ul style="list-style:none;">
        <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 1</li>
        <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 2</li>
        <li onclick="hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;" class="options">option 3</li>
      </ul>
    </td>
  </tr>
</table>