0

I have a simple inline SVG:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="circle" viewBox="0 0 512 512">
  <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
</symbol>
</svg>

<a href="#"><svg class="icon"><use xlink:href="#circle" /></svg></a>

and some styling:

<style>
    .icon{
      fill: black;
      height: 1.25em;
      width: 1.25em;
      display:inline-block;
    }

    a{
      background:red
    }
</style>

However in this example, the SVG dimensions are 19.38 x 19.38 (black circle), whereas the anchor is offset and 20 x 17.6 (red background):

enter image description here

Codepen.io example is here: https://codepen.io/alias51/pen/qBbBoNo.

This is the case whatever the wrapping element around the svg is (anchor, span, etc). What is going on?? How can I align the SVG and anchor so they are the same dimensions?

alias51
  • 8,178
  • 22
  • 94
  • 166
  • vertical-align: bottom; (or top, or other value .. try and see) – Temani Afif Jun 03 '20 at 14:02
  • thanks. I see you closed my question, however the link you provided doesn't answer it. Why are the dimensions different? – alias51 Jun 03 '20 at 14:04
  • did you read it fully? should be very clear – Temani Afif Jun 03 '20 at 14:07
  • 1. the svg element you are using has no width height or viewbox declared 2. I like to give the svg a viewBox and let the svg take the size of the paren Try this: `.icon{ display:block; fill: black;} a{ display:block; height: auto; width: 1.25em; background:red; } ` Do not forget the viewBox for the svg with the use element `` – enxaneta Jun 03 '20 at 14:12

0 Answers0