BenRichi_ BenRichi_ - 17 days ago 4
CSS Question

I am trying to place an SVG file into a div, but sizing the SVG isn't working correctly

Like the title says I am trying to load an SVG into a div, I have copied and pasted the code of the SVG into my HTML and then resized the div it is contained in. When I do this, the entire SVG changed to the size I have requested but there is "invisible padding" when I say this I mean the actual path isn't taking up the 250x250 px that I want.

enter image description here

Here is my HTML:

<header>

<div id="logo">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 804 804" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<clipPath id="_clip1">
<path id="Artboard4" d="M804,402c0,-221.87 -180.13,-402 -402,-402c-221.87,0 -402,180.13 -402,402c0,221.87 180.13,402 402,402c221.87,0 402,-180.13 402,-402Z"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g>
<path d="M381.924,101.027l-80.257,0c0,0 -80.386,-0.443 -80.256,80.257c0.129,80.7 0,120.385 0,120.385c0,0 0.414,80.104 80.256,80.257c79.843,0.152 -40.128,0 -40.128,0c0,0 -80.279,-0.283 -80.257,80.256c0.022,80.54 0,160.514 0,160.514c0,0 -0.382,80.211 80.257,80.256c80.639,0.046 120.385,0 120.385,0l0,-80.256l-80.257,0c0,0 -39.943,-0.666 -40.128,-40.129c-0.185,-39.463 0,-80.256 0,-80.256c0,0 0.089,-40.119 40.128,-40.129c40.04,-0.009 80.257,0 80.257,0l0,-160.513l-40.128,0c0,0 -40.318,-0.787 -40.129,-40.128c0.19,-39.341 0,-40.129 0,-40.129c0,0 0.398,-40.156 40.129,-40.128c39.73,0.028 40.128,0 40.128,0l0,-80.257Z" style="fill:#3c7abe;"/>
<path d="M422.052,101.027l80.257,0c0,0 79.98,0.947 80.257,80.257c0.276,79.311 0,120.385 0,120.385c0,0 -0.689,79.91 -80.257,80.257c-79.568,0.347 40.128,0 40.128,0c0,0 80.204,1.599 80.257,80.256c0.053,78.658 0,240.77 0,240.77l-80.257,0l0,-200.641c0,0 -0.753,-40.321 -40.128,-40.129c-39.375,0.193 -80.257,0 -80.257,0l0,-160.513l40.129,0c0,0 39.387,-0.713 40.128,-40.128c0.741,-39.415 0,-40.129 0,-40.129c0,0 -0.679,-39.958 -40.128,-40.128c-39.45,-0.17 -40.129,0 -40.129,0l0,-80.257Z" style="fill:#3c7abe;"/>
</g>
</g>
</svg>

</div>

</header>


Here is my CSS:

#header {
width: 100%;
border: solid black 1px;
length: 2000px;
}

#logo {
height: 250px;
width: 250px;
margin: 0px;
border: 0px;
padding: 0px;
border: solid blue 5px;
}

Answer

You can fix this in 2 steps:

  1. Remove width="100%" height="100%" from your <svg> element

Then, add the following styles to your stylesheet:

header svg {
position: relative;
top: -13%;
left: -13%;
width: 125%;
height: 125%;
}

See:

#header {
width: 100%;
border: solid black 1px;
length: 2000px;
}

#logo {
height: 250px;
width: 250px;
margin: 0px;
border: 0px;
padding: 0px;
border: solid blue 5px;
}

header svg {
position: relative;
top: -13%;
left: -13%;
width: 125%;
height: 125%;
}
<header>

  <div id="logo">
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg viewBox="0 0 804 804" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
      <clipPath id="_clip1">
        <path id="Artboard4" d="M804,402c0,-221.87 -180.13,-402 -402,-402c-221.87,0 -402,180.13 -402,402c0,221.87 180.13,402 402,402c221.87,0 402,-180.13 402,-402Z"/>
      </clipPath>
      <g clip-path="url(#_clip1)">
        <g>
          <path d="M381.924,101.027l-80.257,0c0,0 -80.386,-0.443 -80.256,80.257c0.129,80.7 0,120.385 0,120.385c0,0 0.414,80.104 80.256,80.257c79.843,0.152 -40.128,0 -40.128,0c0,0 -80.279,-0.283 -80.257,80.256c0.022,80.54 0,160.514 0,160.514c0,0 -0.382,80.211 80.257,80.256c80.639,0.046 120.385,0 120.385,0l0,-80.256l-80.257,0c0,0 -39.943,-0.666 -40.128,-40.129c-0.185,-39.463 0,-80.256 0,-80.256c0,0 0.089,-40.119 40.128,-40.129c40.04,-0.009 80.257,0 80.257,0l0,-160.513l-40.128,0c0,0 -40.318,-0.787 -40.129,-40.128c0.19,-39.341 0,-40.129 0,-40.129c0,0 0.398,-40.156 40.129,-40.128c39.73,0.028 40.128,0 40.128,0l0,-80.257Z" style="fill:#3c7abe;"/>
          <path d="M422.052,101.027l80.257,0c0,0 79.98,0.947 80.257,80.257c0.276,79.311 0,120.385 0,120.385c0,0 -0.689,79.91 -80.257,80.257c-79.568,0.347 40.128,0 40.128,0c0,0 80.204,1.599 80.257,80.256c0.053,78.658 0,240.77 0,240.77l-80.257,0l0,-200.641c0,0 -0.753,-40.321 -40.128,-40.129c-39.375,0.193 -80.257,0 -80.257,0l0,-160.513l40.129,0c0,0 39.387,-0.713 40.128,-40.128c0.741,-39.415 0,-40.129 0,-40.129c0,0 -0.679,-39.958 -40.128,-40.128c-39.45,-0.17 -40.129,0 -40.129,0l0,-80.257Z" style="fill:#3c7abe;"/>
        </g>
      </g>
    </svg>

  </div>

</header>

Comments