CODEWITHSUNDEEP
htmlcsssvg
user3766657
user3766657

Reputation: 163

Why is this simple SVG icon scaling?

I have a jsFiddle demonstrating this: http://jsfiddle.net/L0a3xa7j/1/

I've made a simple SVG icon for a window restore. I wish it to be 13x11. Here's the page markup:

<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="i-restore" viewBox="0 0 13 11">
      <line  x1="2"  y1="0" x2="13" y2="0" stroke-width="1" stroke="white"/>
      <line  x1="13" y1="0" x2="13" y2="9" stroke-width="1" stroke="white"/>
      <rect x="0" y="2" width="11" height="9" stroke="white" fill="none" stroke-width="2"/>
    </symbol>
  </defs>
</svg>

<svg class="svg"><use xlink:href="#i-restore"/></svg>

And here's the CSS:

body{background:#000}

.svg
{
    color:#FFF; width:13px; height:11px;
}

I'm expecting a 1 pixel space between the rectangle and the 2 lines. The rectangle should be 2 pixels thick in stroke and the lines 1 pixel thick. I don't understand why the aspect ratio is not correct when the css pixel dimensions match that of the SVG's viewbox.

What's the correct way to fix this? Thanks for any help.

Upvotes: 4

Views: 128

Answers (2)

JNF
JNF

Reputation: 3730

You're giving the lines a stroke of 2.

Set stroke-width="1". fiddle(I enlarged the view)

EDIT

Try a square viewBox fiddle

viewBox="0 0 15 15"

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 124029

1/2 of a stroke occurs inside the boundary of the shape and 1/2 outside

<rect x="0" y="2" width="11" height="9" stroke="white" fill="none" stroke-width="2"/>

starts at -1, 1 and is 13 pixels wide and 11 pixels high. Your svg size isn't big enough to accommodate the size of its contents and the overflow is clipped.

That's why the spaces between things are not as you expect either.

Upvotes: 2

Related Questions