Re-coloring SVGs with CSS Custom Properties | SVG

CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design.

Using Custom Properties to Re-color SVGs

1. Define custom properties: Create custom properties in your CSS file using the — prefix.
2. Apply custom properties to SVG elements: Use the var() function to reference custom properties within your SVG elements.

Example:

CSS

:root {

  –primary-color: blue;

  –secondary-color: red;

}

svg {

  fill: var(–primary-color);

  stroke: var(–secondary-color);

}

Advantages of Using Custom Properties

• Centralized control: You can easily modify colors by changing the custom property values.
• Responsiveness: You can use media queries to change custom property values based on screen size, creating responsive designs.
• Theming: You can create different themes for your website by simply changing the custom property values.

Example with Media Queries:

CSS

:root {

  –primary-color: blue;

  –secondary-color: red;

}

@media only screen and (max-width: 600px) {

  :root {

    –primary-color: green;

    –secondary-color: yellow;

  }

}

Additional Techniques

• Using JavaScript: You can dynamically change custom property values using JavaScript to create interactive effects.
• Combining with CSS Variables: Combine custom properties with other CSS variables to create complex color schemes.
• Leveraging CSS preprocessors: Use preprocessors like Sass or Less to simplify the management of custom properties.

By using CSS custom properties, you can effectively re-color SVGs and create dynamic and responsive web designs. This approach provides greater flexibility and control over your styles, making it easier to manage and update your website’s appearance.