Images cannot be restyled with CSS pseudoclasses like :focus

[Amer-Adel]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

What specific section or headline is this issue about?

The quick way: img element

What information was incorrect, unhelpful, or incomplete?

You cannot restyle the image with CSS pseudoclasses (like :focus). It works: https://codepen.io/11AMER/pen/dywgOVq

What did you expect to see?

Just delete it, And the other related point in the next section: Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md * Last commit: https://github.com/mdn/content/commit/6a4698795582a297543a9fc71b9b57f8d458b060 * Document last modified: 2023-10-03T21:58:45.000Z

[bsmth]

Thanks a lot for raising this one, the section contains 'pros and cons' and covers a common use, so I'm not sure it meets criteria for removal. We could add a sentence linking to https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web#how_to_include_svg_code_inside_your_html as a recommendation instead, what do you think?

[zfox23]

@Amer-Adel - I think @bsmth has answered this for now, given that the content in question is subjective. If you still feel as though this is worthy of further discussion, please feel free to add a new comment. Thank you for your contribution :)