title: Why doesn't an HTML anchor tag wrap a scalable SVG <object>?
body: <p>I have created a scalable SVG object, using the <code>preserveAspectRatio</code> and <code>viewBox</code> attributes in the SVG file itself:</p>
  
  <pre><code>&lt;svg
    …
    width="800"
    height="800"
    preserveAspectRatio="xMinYMin meet"
    viewBox="0 0 800 800"
    …
  </code></pre>
  
  <p>In the HTML, I reference the SVG file using the <code>&lt;object&gt;</code> tag and wrap it an <code>&lt;a&gt;</code> tag (I want to do this so that I can style it later):</p>
  
  <pre><code>&lt;a&gt;
    &lt;object type="image/svg+xml" data="smiley.svg"&gt;
    &lt;/object&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I style the <code>&lt;object&gt;</code> tag with some CSS to make it 50% wide, and no wider than 100%:</p>
  
  <pre><code>object {
    max-width: 100%;
    width: 50%;
  }
  </code></pre>
  
  <p>The problem is that the anchor tag doesn't wrap all around the object! </p>
  
  <p><img src="https://i.stack.imgur.com/8ArXC.png" alt="Anchor tag not wrapping scalable SVG object"></p>
  
  <p>Any ideas anyone?</p>