CSS Stroke-Width Customizing SVG Borders

Introduction

The stroke-width CSS property sets the width of a stroke applied to SVG shapes. It’s useful for customizing your SVG graphics by adjusting the thickness of their borders. If you use the stroke-width property, it will override any existing stroke-width attribute on the SVG element.

This property can be applied to any SVG shape or text-content element. It’s also inherited, so you can apply it to parent elements like <g>, and it will affect all child elements. If you set the value to zero, no stroke will be drawn.

Specification

The stroke-width property is defined in the CSS Fill and Stroke Module Level 3. This module standardizes how to control the fill and stroke properties of SVG elements, ensuring consistency across different browsers and platforms.

For more information, check out the [CSS Fill and Stroke Module Level 3 specification]WebsiteUrl.

Description

The stroke-width CSS property defines the thickness of the stroke applied to SVG shapes. When you use the stroke-width property, it overrides any existing stroke-width attributes on the SVG elements. This makes it a versatile tool for controlling the stroke width at a broader level, like applying it to parent elements such as <g>, affecting all child elements.

The stroke-width property can accept various values, including length units like pixels (px) and percentages. Setting the value to zero removes the stroke from the SVG element.

Syntax

The syntax for the stroke-width CSS property is straightforward. Here’s how you can define it:

/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;

/* Global values */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;

Explanation of Syntax

• Length Units: Use length units like pixels (px), ems (em), or other CSS length units. For example, stroke-width: 2px; sets the stroke width to 2 pixels.
• Percentages: Use percentages to define the stroke width. The percentage value is based on the normalized diagonal of the current SVG viewport. For example, stroke-width: 10%; sets the stroke width to 10% of the viewport’s diagonal measure.
• Global Values:
  • inherit: Inherits the stroke width from the parent element.
  • initial: Sets the stroke width to its initial value (1px).
  • revert: Reverts the stroke width to the value defined by the user agent’s default stylesheet.
  • revert-layer: Reverts the stroke width to the value defined by the stylesheet of the nearest ancestor layer.
  • unset: Resets the stroke width to its natural value, which is the same as the initial value (1px).

Values

The stroke-width CSS property can accept various values to define the width of the stroke applied to SVG shapes. These values include length units, percentages, and global values.

Length Units

• Pixel Units (px): These are straightforward to use. For example, stroke-width: 2px; sets the stroke width to 2 pixels.
• Font-based Lengths (em, rem): These units are calculated relative to the element’s SVG value for the text size. For example, stroke-width: 1em; sets the stroke width to the size of the element’s font.

Percentages

Percentage values refer to the normalized diagonal of the current SVG viewport. The formula to calculate this is:

[ \text{Normalized Diagonal} = \sqrt{\left(\frac{\text{width}}2\right)^2 + \left(\frac{\text{height}}2\right)^2} ]

For example, stroke-width: 10%; sets the stroke width to 10% of the viewport’s diagonal measure.

Number (Non-standard)

A number without a unit is interpreted as a number of SVG units. The size of these units is defined by the current unit space. For example, stroke-width: 2; sets the stroke width to 2 SVG units.

Global Values

• inherit: Inherits the stroke width from the parent element.
• initial: Sets the stroke width to its initial value (1px).
• revert: Reverts the stroke width to the value defined by the user agent’s default stylesheet.
• revert-layer: Reverts the stroke width to the value defined by the stylesheet of the nearest ancestor layer.
• unset: Resets the stroke width to its natural value, which is the same as the initial value (1px).

Formal Definition

The stroke-width CSS property is formally defined with specific attributes that determine its behavior and application in SVG elements.

Initial Value

The initial value of the stroke-width property is 1px. This means that if no specific stroke width is defined, the default width of the stroke will be 1 pixel.

Applies To

The stroke-width property applies to the following SVG elements:

• [<circle>]WebsiteUrl
• [<ellipse>]WebsiteUrl
• [<line>]WebsiteUrl
• [<path>]WebsiteUrl
• [<polygon>]WebsiteUrl
• [<polyline>]WebsiteUrl
• [<rect>]WebsiteUrl

These elements are part of the SVG namespace and can have their stroke widths controlled using the stroke-width property.

Inherited

Yes, the stroke-width property is inherited. This means that if you set the stroke width on a parent element, such as a <g> element, it will be applied to all child elements unless overridden by a more specific selector.

Percentages

Percentage values for the stroke-width property refer to the normalized diagonal measure of the current SVG viewport. If a viewBox attribute is specified, the percentage is based on the diagonal measure of the viewBox. If no viewBox is specified, the percentage is based on the diagonal measure of the viewport itself.

Computed Value

The computed value of the stroke-width property is an absolute length or percentage. Numbers are converted to absolute lengths first. This ensures that the stroke width is accurately rendered based on the specified value.

Animation Type

The stroke-width property can be animated by its computed value type. This means you can create smooth transitions and animations for the stroke width using CSS animations or transitions.

Formal Syntax

The formal syntax for the stroke-width property is defined as follows:

stroke-width = <length-percentage> | <number>

<length-percentage> = <length> | <percentage>

• <length-percentage>: This can be either a length unit (e.g., px, em) or a percentage.
• <number>: This is a non-standard value that represents a number of SVG units.

Examples

Various Stroke Widths

This example demonstrates different value syntaxes for the stroke-width property. We’ll create several SVG paths with varying stroke widths to illustrate the effects.

Practical Example: Styling a Logo

Let’s apply the stroke-width property to style a simple logo. This example demonstrates how to use stroke width to make the logo more visually appealing.

HTML

First, we create a simple logo using an SVG path.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path id="logo" d="M50,10 L90,90 L10,90 Z" stroke="black" fill="none"/>
</svg>

CSS

We will apply different stroke widths to see the effect on the logo.

#logo {
  stroke-width: 2px;
}

Results

This example shows how adjusting the stroke width can significantly impact the appearance of your graphics. By using the stroke-width property, you can enhance the visual appeal of your logo, making it more distinct and eye-catching.

HTML

First, we set up five multi-segment paths, all of which use a black stroke with a width of one and no fill. Each path creates a series of mountain symbols, going from left (a shallow corner angle) to right (an extreme corner angle).

<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path d="M1,5 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3"/>
    <path d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3"/>
    <path d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3"/>
    <path d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3"/>
    <path d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3"/>
  </g>
</svg>

CSS

To the first four paths, we apply stroke width values as pairs to show how bare number values and pixel values are functionally equivalent. For the first two paths, the values are .25 and .25px. For the second two paths, the values are 1 and 1px.

For the fifth and last path, a value of 5% is applied, setting a stroke width that is five percent as wide as the SVG viewport’s diagonal measure.

path:nth-child(1) {
  stroke-width: 0.25;
}
path:nth-child(2) {
  stroke-width: 0.25px;
}
path:nth-child(3) {
  stroke-width: 1;
}
path:nth-child(4) {
  stroke-width: 1px;
}
path:nth-child(5) {
  stroke-width: 5%;
}

Results

This example illustrates how you can use the stroke-width property to achieve different visual effects. By adjusting the stroke width, you can control the thickness of the lines in your SVG graphics, making them stand out or blend in as needed.

Browser Compatibility

The stroke-width CSS property is well-supported across modern web browsers, ensuring your SVG graphics look consistent across different platforms and devices.

Browser Compatibility

• Google Chrome: Fully supports stroke-width.
• Mozilla Firefox: Fully supports stroke-width.
• Safari: Fully supports stroke-width.
• Microsoft Edge: Fully supports stroke-width.
• Opera: Fully supports stroke-width.
• Internet Explorer 9 and above: Fully supports stroke-width.

Compatibility Table

Tips for Ensuring Browser Compatibility

• Test Across Browsers: Always test your SVG graphics in different browsers to ensure they look consistent.
• Use Polyfills: For older browsers, use polyfills to provide backward compatibility.
• Fallback Styles: Implement fallback styles to keep your graphics looking good even if stroke-width isn’t supported.

See Also

For more control over your SVG graphics, check out these related CSS properties:

• [stroke]WebsiteUrl: Defines the stroke color.
• [stroke-dasharray]WebsiteUrl: Creates dashed or dotted lines.
• [stroke-dashoffset]WebsiteUrl: Specifies where to start the dash pattern.
• [stroke-linecap]WebsiteUrl: Defines the shape at the end of open subpaths.
• [stroke-linejoin]WebsiteUrl: Specifies the shape at path corners.
• [stroke-miterlimit]WebsiteUrl: Sets the maximum miter length ratio.
• [stroke-opacity]WebsiteUrl: Controls the stroke opacity.
• [fill]WebsiteUrl: Defines the color inside SVG shapes.
• SVG [stroke-width]WebsiteUrl attribute: Sets the stroke width directly within SVG elements.

These properties help you create more complex and visually appealing graphics. Combining them with stroke-width enhances the visual impact of your designs. For more details, check out the respective documentation links.