Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.
What You Need to Know
An SVG loaded through img behaves differently from inline SVG or an SVG in object. Choose based on whether you need scripting, styling inside the file, or a simple safe picture with alt text.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<img src="images/logo.svg" alt="Science club logo" width="120" height="120">
<p>SVG images stay sharp at different sizes.</p>Let’s Read the Code
- <img>: The img displays a picture; its alt is the text alternative.
- src: Src identifies a resource path for images, frames, or media.
- width: Width gives a preferred or intrinsic media width, depending on the element.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Remember the boundary. Embedded content may be a separate document, sometimes provided by another company. Give it a readable title or alternative, and check what permissions and information its request may expose.
Your Turn
Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.
Key Takeaways
- An SVG loaded through img behaves differently from inline SVG or an SVG in object.
- <img>: The img displays a picture; its alt is the text alternative.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.