Why doesn't an HTML anchor tag wrap a scalable SVG <object>?

Question

I have created a scalable SVG object, using the preserveAspectRatio and viewBox attributes in the SVG file itself:

<svg
  …
  width="800"
  height="800"
  preserveAspectRatio="xMinYMin meet"
  viewBox="0 0 800 800"
  …

In the HTML, I reference the SVG file using the <object> tag and wrap it an <a> tag (I want to do this so that I can style it later):

<a>
  <object type="image/svg+xml" data="smiley.svg">
  </object>
</a>

I style the <object> tag with some CSS to make it 50% wide, and no wider than 100%:

object {
  max-width: 100%;
  width: 50%;
}

The problem is that the anchor tag doesn't wrap all around the object!

Any ideas anyone?

Answer 1

I think @CBroe has it: SVG can be interactive content, therefore it shouldn't be wrapped by anchor element:

w3.org/TR/html5/text-level-semantics.html#the-a-element: “Content model: Transparent, but there must be no interactive content descendant.”