Learn Accessibility by Building a Quiz - Step 9

Tell us what’s happening:
Describe your issue in detail here.

I’m having issues with getting the SVG to show on any web browser (edge, chrome, Firefox) my O.S. is win10. I’m using VScode to follow along and build web pages as I go along with the course, I have the same issue in VScodes browser preview and Live Preview.

The SVG will show via built in preview on the FCC website but that’s within a different environment host by FCC, I want to be able to see the SVG locally.

Thank You!

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav></nav>
   </header>
   <main></main>
 </body>
</html>

/* file: styles.css */
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

#logo {
 width: max(100px, 18vw);

}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33

Challenge: Learn Accessibility by Building a Quiz - Step 9

Link to the challenge:

I think img tag is probably not what you need here.
Check this article

How to Use SVG Images in CSS and HTML – A Tutorial for Beginners.

1 Like

An img tag is used to display the svg in the course, but I resolved my issue. So simple, I didn’t link styles sheet. I can’t believe it, I only realized after noticing my CSS wasn’t showing.

Noob mistake

But thank you for replying!

1 Like