Take the 2-minute tour ×

I want to have a rectangle that takes all the place in a SVG file. It should also have a border (3px stroke width). The size of the graphic should be easy changeable (by changing attributes "width" and "height" of the "svg" node). I came up with following construction:

<svg width="150" height="35" >
      style="fill:#ffffff; fill-opacity:1; stroke:#000000; stroke-width:3;"
      height="100%" />

But it produces following image with dirty border:

enter image description here

I need something like this:

enter image description here

Is it possible at all? As mentioned before it must work for any size of the graphic.

Thanks in advance!

share|improve this question

2 Answers 2

up vote 2 down vote accepted

Alas, no, at least not with purely declarative SVG. The stroke on a shape is painted on both sides of the geometric line that defines that shape (in your case, there's 1.5 on either side). Because of that, it will get clipped for a shape that fills the whole viewbox.

In which context are you using this? You should be able to script it: get the size of the viewbow, on rect set x and y to stroke-width/2, width to width - stroke-width and height to height - stroke-width. If in a dynamic context you will need to detect resizes, but that's often possible.

share|improve this answer
Thank you. Ideally that SVG must be compatible with any client. I didn't want to use the scripting. –  Andrej Dec 5 '11 at 14:45

You need to place the ractangle at half pixel coordinates like x="0.5" y="0.5", then the borders won't be blurry. Also add vector-effect:non-scaling-stroke to the rectangle's CSS to be sure that the border is always 3px wide regardless of zoom level.

share|improve this answer
In this case width and height cannot stay "100%" because right and bottom parts will not fit in at all... –  Andrej Dec 5 '11 at 14:38

Your Answer


