stroke-width values

Hi everyone,

I'm having a hard time trying to automatically generate SVG objects that look the way I want. I'm translating them from another vector format, so I'm not all free about the values (e.g. the viewbox attributes, as well as width and height, are set and can't be changed). 
One thing I still have control over is the stroke-width, and that seems to be the one that doesn't work - and I can't really make any sense of the specification and what I'm seeing now. Here's a short example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="453.55pt" height="310.75pt" viewBox="1134 1418 15695 10754">
  <g  id="_x0000_s1053">

    <g  id="_x0000_s1059">
      <svg x="5682" y="5038" width="636" height="484" viewBox="0 0 21600 21600" preserveAspectRatio="none" fill="white" stroke="cyan" stroke-width="4.132231404958677%" opacity="1" overflow="visible">
        <path d="M 10800,0 L 0,10800 10800,21600 21600,10800 z "/>
      </svg>
    </g>
    <g  transform=" translate(12012 0) matrix(-1 0 0 1 0 0) rotate(90 6006 5921)" id="_x0000_s1073">
      <svg x="5606" y="5917" width="800" height="9" viewBox="0 0 21600 21600" preserveAspectRatio="none" fill="none" stroke="purple" stroke-width="10000px" opacity="1" overflow="visible">
        <path d="M 0,0 L 0,0 0,21600 21600,21600 M 0,0 "/>
      </svg>
    </g>
    <g  id="_x0000_s1104">
      <svg x="5224" y="6321" width="1569" height="485" viewBox="0 0 21600 21600" preserveAspectRatio="none" fill="white" stroke="red" stroke-width="4.123711340206185%" opacity="1" overflow="visible">
        <path d="M 0,0 L 0,21600 l 21600,0 L 21600,0 z "/>
      </svg>
    </g>
    <g id="line1">
      <line x1="0" x2="21600" y1="5038" y2="5038" stroke="green" stroke-width="10px"></line>
    </g>
    <g id="line3">
      <line x1="0" x2="21600" y1="5522" y2="5522" stroke="blue" stroke-width="10px"></line>
    </g>
    
    <g id="line2">
      <line x1="0" x2="21600" y1="6321" y2="6321" stroke="orange" stroke-width="10px"></line>
    </g>
    
    <g id="line4">
      <line x1="0" x2="21600" y1="5917" y2="5917" stroke="pink" stroke-width="10px"></line>
    </g>
  
  </g>
</svg>

There probably are a few "inelegances" in this code, but as I said most of it's automatically generated (I added the horizontal lines myself). What I'm really not coping with is, as I said, the stroke-width attributes. Maybe someone could explain to me why:
- the stroke-width of the purple line should be set to 10000px to be visible?
- setting the stroke-width of this same purple line to 100% also makes it visible, BUT
- the purple line exceeds its expected height (width before rotation) of 800 (depicted by the blue and orange horizontal lines)?

My other concern is about the other objects' stroke-width attributes: although it looks alright on the cyan diamond, it looks a bit irregular on the red rectangle, where the vertical sides are "bolder" than the horizontal ones. I take it it's because the viewBox is "square" whilst the actual object isn't, but how can I solve that? 

I guess all this can be summed up in one big question (although of course I'd like to understand how it works): how can I set my stroke-width attributes so that all lines/sides have a width of 1 (one) "screen-pixel"? I tried px, pt, mm, no unit (which I think is the same as px), ... to no avail. It'd be real great if someone could take some time to explain this!

Thanks in advance! 

David

Received on Wednesday, 20 August 2008 08:50:11 UTC