Skip to Content

How do I change the color of SVG on click?

By: Author Color With Leo

Scalable Vector Graphics (SVG) are an important tool for web developers. Using SVG allows you to include vector images in your web pages that are lightweight, high quality, and interactive. One common task when working with SVG is changing the color of the image on user clicks or other events. This can create engaging effects and experiences for users.

SVG Basics

Before looking at how to change SVG color on click, let’s review some SVG basics. SVG images are defined using XML markup. This allows you to write HTML-like tags to create shapes, text, and graphics. For example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

This code creates a 100×100 pixel SVG image containing a yellow circle with a green border.

Some key points about SVG syntax:

  • The <svg> tag defines a container for SVG content
  • Shapes like <circle> and <rect> are used to draw images
  • Attributes like cx, cy, r define the position and size of shapes
  • fill controls the interior color
  • stroke controls the outline color

By modifying attributes like fill, you can dynamically change the appearance of an SVG image.

Changing Fill Color on Click

Now let’s look at a simple example of how to change an SVG image’s fill color when it is clicked. We’ll start with a base SVG image:

<svg id="mySVG" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
</svg>

This draws a red circle with a black outline. To allow clicking, we need to add an onclick event handler:

<svg id="mySVG" width="100" height="100" onclick="changeColor()">
</svg>

The onclick handler calls a changeColor() JavaScript function when the SVG is clicked. Here is that function:

function changeColor() {
  document.getElementById("mySVG").style.fill = "blue"; 
}

This uses getElementById() to select the SVG, then sets the style.fill property to change the fill color to blue. The full code looks like:

<svg id="mySVG" width="100" height="100" onclick="changeColor()">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
</svg>

<script>
function changeColor() {
  document.getElementById("mySVG").style.fill = "blue";
}  
</script>

Now when you click the SVG, the circle color will change from red to blue. This provides a simple example of modifying SVG properties in response to user input.

Changing Multiple Properties

You can modify multiple properties in the changeColor() function to create more complex effects. For example:

function changeColor() {
  const svg = document.getElementById("mySVG");
  svg.style.fill = "blue";
  svg.style.stroke = "purple";
  svg.style.transition = "fill 0.5s ease-out";
}

This changes both the fill and stroke colors, and adds a CSS transition for a smooth color change animation. SVG properties like stroke-width and stroke-opacity can also be modified.

You can also call JavaScript functions to generate random colors each click:

function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

function changeColor() {
  const svg = document.getElementById("mySVG");
  const randomColor = getRandomColor();
  svg.style.fill = randomColor;
}

This generates a different color on each click for interesting effects.

Changing Color on Hover

A similar technique can be used to change SVG properties on mouse hover. The onmouseover and onmouseout events allow detecting when the user’s mouse enters or leaves an element.

For example:

<svg id="mySVG" width="100" height="100"
  onmouseover="changeColor('orange')"
  onmouseout="changeColor('black')">

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />

</svg>

<script>

  function changeColor(newColor) {
    document.getElementById("mySVG").style.fill = newColor;
  }

</script>

Here we pass the new color value to the changeColor() function. Now the circle will change to orange on hover, and back to black on hover out.

You can create some nice effects by changing both fill and stroke color on hover:

function changeColor(fill, stroke) {
  const svg = document.getElementById("mySVG");
  svg.style.fill = fill;
  svg.style.stroke = stroke; 
}

And the SVG:

<svg onmouseover="changeColor('orange', 'white')"
  onmouseout="changeColor('black', 'purple')"> 
</svg>

Now the circle will have both a fill and stroke color change on hover. This helps create an engaging interactive effect.

SVG Animation on Click

In addition to property changes, you can use SVG’s <animate> tag to run animations when clicked. For example:

<svg onclick="growCircle()">
  
  <circle cx="50" cy="50" r="40" fill="blue">

    <animate attributeName="r" from="40" to="50" dur="0.5s" fill="freeze" />

  </circle>

</svg>

<script>

  function growCircle() {
    const animation = document.getElementsByTagName("animate")[0]; 
    animation.beginElement();
  }

</script>

Clicking runs the <animate> tag which enlarges the circle radius. You can animate properties like x, y, width, height, rx (corner radius) etc. This allows creating engaging animations and transitions.

Reacting to SVG Events

So far we’ve used onclick and onmouseover handlers on the <svg> tag itself. You can also attach handlers directly to other SVG elements like <circle>, <rect>, <path> etc.

For example:

<svg>

  <circle cx="50" cy="50" r="40" fill="blue" 
    onclick="growCircle()"
    onmouseover="changeColor('orange')" 
    onmouseout="changeColor('black')">

  </circle>

</svg>

This allows different interactive effects on different elements. Each SVG sub-element can respond separately to hover and click events.

SVG also supports other events like onmousedown, onmouseup, onfocus etc. You can leverage these to create complex interactive behaviors.

Accessibility Considerations

When creating interactive SVGs, keep accessibility in mind so the content remains usable for all visitors:

  • Use ARIA roles like img and graphics-document so assistive tech understands your SVG
  • Add aria-label attributes to clarify what interactive elements represent
  • Don’t rely solely on color changes for conveying interactivity
  • Ensure color contrasts meet minimum accessibility standards
  • Allow interactions via both mouse and keyboard

With some careful planning, you can build interactive SVGs that work for all users.

Libraries for SVG Animation

Coding SVG interactions from scratch can be complex. There are several JavaScript libraries available to help:

Library Description
Snap.svg Full featured SVG library with animation capabilities.
Anime.js Lightweight JavaScript animation library with SVG support.
GreenSock Animation platform with a module dedicated to SVG.
Vivus Specialized library for animating SVG drawing.

These tools provide helper functions and syntax sugar that can accelerate development. They abstract away low level complexity and browser inconsistencies.

For example, Snap.svg makes it easy to animate SVG properties:

// Select SVG
const s = Snap('#mySVG');

// On click, animate circle radius 
s.click(function() {
  s.select('circle').animate({r: 50}, 500); 
})

Look into these libraries if you need to build complex SVG interactions in your projects.

Optimizing Complex SVG

Complex interactive SVGs with many elements can impact page performance. Here are some tips for optimization:

  • Group elements together into <g> containers to reduce overhead
  • Use <defs> and <symbol> to define reusable elements
  • Simplify geometries and paths where possible
  • Set vector-effect: non-scaling-stroke to avoid scaling stroked paths
  • Convert strokes to filled shapes where appropriate
  • Limit precision of coordinates to 2-3 decimal places
  • Remove any unused or redundant attributes
  • Split complex SVGs into multiple simpler SVGs

Running your SVG through an optimization tool like SVGOMG can also help reduce file size. With some optimization work, you can keep SVG interactivity smooth and lightweight.

Browser Support

Most modern browsers support SVG and JavaScript-based interactivity well. However, there are some exceptions:

  • Internet Explorer has limited support for SVG before IE9.
  • CSS and JavaScript animations may need browser prefixes or polyfills for full support.
  • Complex filter effects have mixed support across browsers.

Test your interactive SVGs thoroughly across browsers. Consider using a JavaScript library like Snap.svg for maximum compatibility.

For critical features, also provide a fallback experience for non-supporting browsers. For example, you could replace SVGs with static images and hide complex hover interactions.

Conclusion

SVG opens up endless possibilities for engaging, interactive vector graphics on the web. With some JavaScript code, you can react to user input by animating SVG properties and attributes.

Common techniques like changing fill color, running animations, and responding to hover provide dynamic effects without the need for complex libraries. For advanced use cases, JavaScript animation frameworks and SVG optimization tools can help overcome browser limitations.

By mastering SVG interactivity, you can create beautiful data visualizations, games, maps, diagrams, and more that respond to users in intuitive ways.