change colour of svg

Guri Bee

2 min read

·

22-10-2024

1

0

Share

Changing SVG Colors: A Comprehensive Guide

Scalable Vector Graphics (SVG) are versatile and powerful for web design, allowing you to create interactive and dynamic elements. One of the key advantages of SVG is the ability to easily modify its colors. This article will guide you through various techniques to change the color of your SVGs.

Methods to Change SVG Colors

1. Using CSS:

This is the most common and straightforward approach. You can target specific elements within your SVG using CSS selectors.

Example:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

<style>
  circle {
    fill: blue; 
  }
</style>

Explanation:

• The CSS selector circle targets all circle elements within the SVG.
• The fill property is used to change the fill color to blue.

2. Inline Styles:

You can directly embed CSS styles within the SVG element itself using the style attribute.

Example:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" style="fill: green" />
</svg>

Explanation:

• The style attribute within the circle element applies the fill property with a green color.

3. JavaScript:

JavaScript provides more dynamic control over SVG colors. You can use JavaScript to manipulate the fill property of SVG elements.

Example:

<svg viewBox="0 0 100 100">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>

<script>
  const myCircle = document.getElementById("myCircle");
  myCircle.style.fill = "purple";
</script>

Explanation:

• We first select the circle element using its ID.
• Then, using JavaScript, we set the fill property of the circle to purple.

4. Using SVG <style> tag:

You can define styles specifically for your SVG using the <style> tag within the SVG document.

Example:

<svg viewBox="0 0 100 100">
  <style>
    .myShape {
      fill: orange;
    }
  </style>
  <circle cx="50" cy="50" r="40" class="myShape" />
</svg>

Explanation:

• We define a CSS class myShape within the SVG's <style> tag.
• The circle element with the class myShape will inherit the orange fill color.

Additional Considerations

• Color Values: You can use various color formats like hexadecimal (e.g., #FF0000), RGB (e.g., rgb(255,0,0)), or color names (e.g., red).
• Opacity: The fill-opacity property can be used to adjust the transparency of the fill color.
• Animation: CSS animations or JavaScript can be used to change the color of SVGs over time, creating dynamic effects.

Practical Example: Changing Colors on Hover

Let's create a simple example where the color of an SVG shape changes on mouse hover.

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" id="myCircle" fill="blue" />
</svg>

<style>
  #myCircle:hover {
    fill: yellow; 
  }
</style>

Explanation:

• The CSS selector #myCircle:hover targets the circle element when the mouse hovers over it.
• When the mouse hovers over the circle, the fill property changes to yellow.

Conclusion

Changing colors in SVGs is a versatile technique that allows you to customize your graphics and enhance their interactivity. Whether you use CSS, JavaScript, or inline styles, you can achieve a wide range of color effects. Remember to experiment with different methods and attributes to create visually appealing and dynamic SVGs.

Note: The code examples in this article were inspired by and adapted from various resources on GitHub. This article provides a consolidated and beginner-friendly explanation of the methods, incorporating additional explanations and practical examples.