Mastering Strokes: Eliminating Non-Scaling Issues In Your Designs

The non-scaling-stroke attribute in SVG is used to prevent the distortion of strokes when an SVG object is scaled or stretched. This attribute ensures that the stroke width remains constant, regardless of any transformations or zooming applied to the object. In other words, the lines of the object maintain their original width, even when the object is enlarged or distorted. This functionality is particularly useful when creating interactive SVG animations or when working with objects that need to be displayed at different sizes, such as logos.

Use the non-scaling-stroke attribute to maintain line width during zoom/scaling

When working with SVG images, there may be instances where you want to maintain the original width of lines during zoom or scaling. This is particularly useful in scenarios such as displaying a user's position and destination on a map. As the user zooms in, the map should enlarge while the line indicating the route remains at its original width.

To achieve this, you can utilise the "non-scaling-stroke" attribute in SVG. This attribute ensures that the stroke width remains constant, regardless of any transformations or zooming operations applied to the object. By incorporating "vector-effect="non-scaling-stroke" within your SVG code, you can prevent the distortion of strokes (making them thicker or thinner) when the object is scaled or stretched.

Here's an example of how you can implement this:

Svg

Example SVG code with "non-scaling-stroke" attribute

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>

In the code above, the first rectangle (rect) on the left employs the "non-scaling-stroke" attribute, while the rectangle on the right does not. As a result, when you zoom in or scale the image, the line width of the first rectangle will remain unchanged, providing a consistent visual representation.

Additionally, you can define the "non-scaling-stroke" attribute for drawing objects using the SVG_SET_STROKE_VECTOR_EFFECT method in the "4D SVG" theme. This allows you to maintain line width consistency across different scaling transformations.

Use the SVG_SET_STROKE_VECTOR_EFFECT method to define non-scaling-stroke

In some cases, it is preferable to maintain the original width of an object's lines, regardless of the transformation applied. For instance, when drawing a line on a map to indicate a user's position and destination, the line should remain the same thickness when the user zooms in.

The SVG_SET_STROKE_VECTOR_EFFECT method can be used to define non-scaling-stroke and ensure that the stroke width remains constant. This method is part of the SVG standard, where the "non-scaling-stroke" attribute indicates that the stroke width is independent of zoom or scaling transformations.

// 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 without the non-scaling-stroke attribute

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

In the above code, the first rectangle ($rect1) uses the SVG_SET_STROKE_VECTOR_EFFECT method with the "non-scaling-stroke" attribute. This ensures that the line width of the rectangle remains constant, regardless of any transformations or zooming. The second rectangle ($rect2) does not use this attribute, so its line width will change when the map is enlarged or zoomed in.

The SVG_SET_STROKE_VECTOR_EFFECT method is a powerful tool to maintain consistent line widths in SVG graphics, particularly when creating interactive or scalable graphics such as maps or diagrams.

Use the vector-effect property to specify the vector effect when drawing an object

The vector-effect property is used to specify the vector effect when drawing an object. Vector effects are applied before any other compositing operations, such as filters, masks, and clips. It is a presentation attribute that can be used as a CSS property.

The vector-effect property can be used with the following SVG elements:

• None
• Non-scaling-stroke
• Non-scaling-size
• Non-rotation
• Fixed-position

The non-scaling-stroke value is used to modify the way an object is stroked. Normally, stroking involves calculating the stroke outline of the shape's path in the current user coordinate system and filling that outline with the stroke paint (colour or gradient). When non-scaling-stroke is applied, the stroke width remains the same, regardless of any transformations of the element (including non-uniform scaling and shear transformations) and the zoom level.

For example, consider a map with a line showing a user's position and destination. When the user zooms in on the map, the map enlarges, but the line maintains its width. This can be achieved by applying the non-scaling-stroke attribute.

In this example, there are three paths: a normal path, a scaled path, and a path with the non-scaling-stroke attribute applied. The normal path will have a stroke width of 2px. The scaled path will also have a stroke width of 2px, but it will be scaled up by a factor of 4 in the x-direction, resulting in a thicker appearance. The path with the non-scaling-stroke attribute will be scaled up by the same factor, but the stroke width will remain at 2px, as specified.

Use the Scale Strokes and Effects setting in the Transform palette to scale the stroke and object

When using Adobe Illustrator, you can control whether the stroke size gets scaled or stays the same when you resize an object. This can be done via the Scale Tool or the Transform Panel.

Using the Scale Tool

Double-click the Scale Tool and, in the Pop-Up Window, ensure the following are checked:

• Scale Corners (if you applied round corners)
• Scale Strokes & Effects
• Transform Patterns (if you applied a pattern fill)

Using the Transform Panel

Go to Window > Transform to open the Transform panel. Here, you can check the Scale Strokes & Effects box at the bottom. With this checked, you can scale any object up or down and the stroke width will accommodate the proportions.

Changing Illustrator’s Preferences

You can also make a global change by going into Preferences. On a Mac, go to Illustrator > Preferences > General and check the box for Scale Strokes & Effects. On a Windows system, select Edit > Preferences > General to find the checkbox for Scale Strokes & Effects.

Define vector-effect=non-scaling-stroke to prevent stroke width changes during transformations

The vector-effect attribute defines the vector effect to use when drawing an object. When set to non-scaling-stroke, it modifies the way an object is stroked by making the stroke width independent of the transformations of the element (including non-uniform scaling and shear transformations) and zoom level. This means that the lines of an object will keep their original width, regardless of the applied transformation. For example, on a map showing a user's position and destination, the map can be enlarged while the line maintains its width.

In code, the non-scaling-stroke attribute is set as follows:

Here, the first path is the normal stroked path, the second path has been scaled, and the third path has the non-scaling-stroke attribute applied and has also been scaled. As can be seen, the non-scaling-stroke attribute prevents the stroke width from changing during transformations.

The vector-effect property can be used with the following SVG elements: none, non-scaling-stroke, non-scaling-size, non-rotation, and fixed-position.

Frequently asked questions