Fixed stroke width in SVG
svg, visualization
Solution
You can use the `vector-effect` property set to `non-scaling-stroke`, see the docs. Another way is to use `transform(ref)`.
That will work in browsers that support those parts from SVG Tiny 1.2, for example Opera 10. The fallback includes writing a small script to do the same, basically inverting the CTM and applying it on the elements that shouldn't scale.
If you want sharper lines you can also disable antialiasing (`shape-rendering=optimizeSpeed` or `shape-rendering=crispEdges`) and/or play with the positioning.
Problem
I would like to be able to set the stroke-width on an SVG element to be "pixel-aware", that is always be 1px wide regardless of the current scaling transformations applied. I am aware that this may well be impossible, since the whole point of SVG is to be pixel independent. Context follows: I have an SVG element with its viewBox and preserveAspectRatio attributes set. It looks something like this ``` <svg version="1.1" baseProfile="full" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" > </svg> ``` This means that when I scale that element, the actual shapes inside it scale accordingly (so far so good). As you can see, I have set up the viewBox so that the origin is in the center. I would like to draw an x- and a y-axis within that element, which I do thus: ``` <line x1="-1000" x2="1000" y1="0" y2="0" /> ``` Again, this works fine. Ideally, though, this axis would always be only 1px wide. I have no interest in the axes getting fatter when i scale the parent svg element. So am I screwed?