Rephrasing/Adding new content to "Adding Vector Graphics to the Web"

MDN
#1

Hi, all. :smiley: I’m currently undergoing through the ‘Learn Web Development’ series. I wanted to point out something that could be update or rephrased under ‘HTML-- Structuring the Web’, ‘Multimedia and Embedding: Adding Vector Graphics to the Web’.

I read under the subhead “How to Include SVG inside your code: Pro” here:

  • 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.)

I want to highlight the word ‘only’ in the text above wrong, at least that’s what I think after I discovered another way to do a pseudocode :hover on the svg tag. I nest it in a div tag and was able to achieve a :hover effect. However, I only target the width/height (Other svg attribute is probably a no-go). I’m not sure if that could contribute to the document. Let me know if that’s correct, or an option svg now can do. Or is it just modern browser support that I’m able to style the width/height.

#2

From what you describe, what you are doing is still putting it inline — you are putting the SVG code directly inside your HTML code, rather than putting it in a separate .svg and then embedding it via an <iframe>, <img>, etc.

This is really what I’m talking about. If I have misunderstood you, please give me more details. Showing me your code sample would probably help.

thanks!

1 Like
#3

Ah, yes I was using SVG via <img> element. I have misinterpreted what inlining SVG is. I thought it was also associated with the <img> tag. :sweat: I was further reading into and trying stuff out, and it does appear that I cannot stylize the SVG element by other means, such as, wrapping it with a <div> tag and targeting the div tag and changing its width/height values.

My code did look like this:
HTML

<div class="container">
  <img src="Firefox_Logo,_2017.svg" alt="">
</div>

CSS

  .container:hover {
    width: 500px;
    height: 500px;
  }

Thanks for your response! :smiley: