SVG “non-scaling-stroke” attribute support

Sometimes it’s preferable to have the lines of an object keep their original width, regardless of the applied transformation. For example, you draw a line on a map showing a user’s position and a destination. When the user zooms in on the map, you want to enlarge the map but have the line maintain its width.

In the SVG standard, the “non-scaling-stroke” attribute indicates that the stroke width does not depend on the zoom or scaling. In other words, an object’s lines aren’t affected by transformations and zooming.

Here’s an example of two rectangles with the same line thickness. The rectangle on the left uses the “non-scaling-stroke” attribute, whereas the rectangle on the right does not use this attribute:

Take a look at the SVG file:

<svg viewBox="0 0 90 45" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="40" height="40" fill="white" stroke="blue" stroke-width="1px" vector-effect="non-scaling-stroke"/>
<rect x="45" y="1" width="40" height="40" fill="white" stroke="green" stroke-width="1px" />
</svg>

We’ve also added new commands to the “4D SVG” theme. You can define the “non-scaling-stroke” attribute to drawing objects with the SVG_SET_STROKE_VECTOR_EFFECT method.

// Create view box
$svgRef:=SVG_New (90;45)

// First rectangle with the non-scaling-stroke attribute
$rect1:=SVG_New_rect ($svgRef;1;1;40;40;0;0;"blue";"white";1)
SVG_SET_STROKE_VECTOR_EFFECT ($rect1;"non-scaling-stroke")

// Second rectangle
$rect2:=SVG_New_rect ($svgRef;45;1;40;40;0;0;"green";"white";1)

// Save image on disk
File("/RESOURCES/Images/rectangle.svg").create()
SVG_SAVE_AS_TEXT ($svgRef; File("/RESOURCES/Images/rectangle.svg").platformPath)

// Clear reference
SVG_CLEAR ($svgRef)