Why doesn't an HTML anchor tag wrap a scalable SVG

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!

Anchor tag not wrapping scalable SVG object

Any ideas anyone?

http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element: _“Content model: Transparent, but there must be no [interactive content](http://www.w3.org/TR/html5/dom.html#interactive-content-0) descendant.”_ — CBroe, Mar 24 '14 at 16:29
Eek, I can see the words but they don't make sense! Why, in simple english, would an ` — Jake Rayson, Mar 25 '14 at 15:26
Because an object can contain _interactive content_ (even SVG can be can interactive content itself). — CBroe, Mar 25 '14 at 16:09

score 2 · Answer 1 · answered Mar 24 '14 at 16:30

2

Adding display: block to anchor seems to fix it for me.

answered Mar 24 '14 at 16:30

Igor Pantović

9,107
2
30
43

1

If I style the anchor tag as `display: block`, it stretches the anchor tag to full width of the page, not 50% (ie around the object) :( – Jake Rayson Mar 24 '14 at 18:57
1

So make it floating or inline-block – Igor Pantović Mar 24 '14 at 19:00
I tried `float: left` and `display: inline-block` and they had the same effect. – Jake Rayson Mar 25 '14 at 15:25

score 2 · Answer 2 · answered Apr 05 '17 at 00:32

I actually found a fully working solution at teamtreehouse.

It's a combination of inline-block and pseudo-elements.

Thomas Quayle made a pen of the example solution (replicated below).

a.svg {
 position: relative;
 display: inline-block;
 width: 25%;
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}
object {
  width: 100%;
}

<h1>SVG Link Demo</h1>
<blockquote>Replicated from <a href="http://codepen.io/thomasquayle/pen/KwxwoO">Thomas Quayle's codepen</a> example</blockquote>

<a href="http://google.com" class="svg">
  <object data="http://openclipart.org/people/cjcreativedesign/PuppyLongEars.svg" type="image/svg+xml" class="mailicon">
  </object>
</a>
<a href="http://google.com" class="svg">
  <object data="http://openclipart.org/people/cjcreativedesign/PuppyLongEars.svg" type="image/svg+xml" class="mailicon">
  </object>
</a>

<p>How cool is that?</p>

score 1 · Accepted Answer · answered May 13 '14 at 10:14

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.”

Why doesn't an HTML anchor tag wrap a scalable SVG

3 Answers3

Linked