Export as > SVG (Styling: Inline) showing blank when put in HTML?

[Inventsable]

Hi guys, I've recently begun to branch into HTML and CSS so I've been eager to reach a point of using custom SVG's. I can get SVGs from Illustrator to correctly display as an <img> for HTML or background-image for CSS, but I'd like to easily change the fill with CSS and add pseudo-states, and in looking online I see it recommended to use Inline HTML to accomplish this.

I have a simple vector of an eye icon I'm using to test, exporting as SVG with Styling: Inline, and the code it produces is this:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.99 14.26">
  <title>EyeInline</title>
  <path d="M38,25h0a15.4,15.4,0,0,1-26,0h0a15.4,15.4,0,0,1,26,0ZM25,20.33A4.67,4.67,0,1,0,29.67,25,4.67,4.67,0,0,0,25,20.33Zm0,2.23A2.44,2.44,0,1,0,27.44,25,2.44,2.44,0,0,0,25,22.56Z" transform="translate(-12.01 -17.87)" style="fill: #231f20"/>
</svg>

But when I place this into HTML (as I see other examples doing) then it's completely blank and nothing shows up. I tried all the export options I know of: Save As > SVG, then Export As to SVG with all three styling options (Internal, Inline, Presentation).

What am I doing wrong and how can I do this inline? I haven't started learning Java yet, I really want to be able to use my own custom SVGs and drawings for web graphics without being limited to <img>, background-image or manually changing the color of the SVG's fill inside a separate .svg file.

[Monika Gause · Accepted solution]

You'd better ask this in a forum aimed at web developers. And then post a link to the HTML page and not just a code snippet.