Why doesn't an HTML anchor tag wrap a scalable SVG <object>?
object, svg, viewbox
Solution
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.”
Problem
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?