What's the best way to update the fill color of an SVG dynamically?

Question

What's the best way to update the fill color of an SVG dynamically?

Is it possible to change the color of an SVG image dynamically without using inline SVG tags? I want to create a code that allows users to specify the source for the SVG tag and a hexadecimal color value, enabling them to customize any SVG image with their preferred colors.

The idea is to have a component where users can input the SVG source and color, and the code will automatically adjust the fill colors of the SVG based on these parameters. Any ideas on how to achieve this would be greatly appreciated. Thank you!

Here is an example of how the user interaction might look:

import Frame from './Frame.svg';
...
<Icon src={Frame} color='purple' />

This is my suggested UI component code:

import React from 'react';
import styled from 'styled-components';

const Icon = ({ src, color }) => {
  const StyledSVGIcon = styled(src)`
    width: 67px;
    height: 72px; 
    fill: ${color};
  `;
  return <StyledSVGIcon />
};

Sample content of Frame.svg file:

<svg width="73" height="71" viewBox="0 0 73 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
...
</g>
<defs>
<clipPath id="clip0">
<rect width="73" height="71" fill="white"/>
</clipPath>
</defs>
</svg>

javascript html css reactjs svg

Answer 1

Answer №1

Here is a demonstration of how to apply a color to an SVG element:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [selectedColor, setSelectedColor] = useState("blue");

  return (
    <div>
      <h1>Greetings from Stack Overflow!</h1>
      <StyledSVG 
        color={selectedColor} 
        src={'https://example.com/svg_image'}
        />
    </div>
  );
}

const StyledSVG = styled.svg`
  width: 500px;
  height: 500px;
  background-color: ${(props) => props.color};
  background-image: url(${(props) => props.src});
`;

The default color is blue, but you can customize it with RGB or hex values using sliders for the styled <svg />.

CodeSandbox: https://codesandbox.io/s/stack-63910588-pass-color-to-svg-birthday-card-ievg7?file=/src/App.js

The original poster mentioned they wanted to modify the children's color. You can achieve this by:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [chosenColor, setChosenColor] = useState("purple");

  return (
    <Container>
      <StyledSVG color={chosenColor} width="73" height="71" viewBox="0 0 73 71">
        <Frame />
      </StyledSVG>
    </Container>
  );
}

const Frame = () => {

  // This logic could be moved to a separate file.

  return (
  <>
  <g clip-path="url(#clip0)">
  <path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.334…
  </g>
  <defs>
  <clipPath id="clip0">
  <rect width="73" height="71" fill="white"/>
  </clipPath>
  </defs>
  </>
  );
  
};

const Container = styled.div`
  height: 500px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

`;

const StyledSVG = styled.svg`
  & path {
    fill: ${props => props.color};
  }
`;

Answer 2

Here is a demonstration of how to apply a color to an SVG element:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [selectedColor, setSelectedColor] = useState("blue");

  return (
    <div>
      <h1>Greetings from Stack Overflow!</h1>
      <StyledSVG 
        color={selectedColor} 
        src={'https://example.com/svg_image'}
        />
    </div>
  );
}

const StyledSVG = styled.svg`
  width: 500px;
  height: 500px;
  background-color: ${(props) => props.color};
  background-image: url(${(props) => props.src});
`;

The default color is blue, but you can customize it with RGB or hex values using sliders for the styled <svg />.

CodeSandbox: https://codesandbox.io/s/stack-63910588-pass-color-to-svg-birthday-card-ievg7?file=/src/App.js

The original poster mentioned they wanted to modify the children's color. You can achieve this by:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [chosenColor, setChosenColor] = useState("purple");

  return (
    <Container>
      <StyledSVG color={chosenColor} width="73" height="71" viewBox="0 0 73 71">
        <Frame />
      </StyledSVG>
    </Container>
  );
}

const Frame = () => {

  // This logic could be moved to a separate file.

  return (
  <>
  <g clip-path="url(#clip0)">
  <path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.334…
  </g>
  <defs>
  <clipPath id="clip0">
  <rect width="73" height="71" fill="white"/>
  </clipPath>
  </defs>
  </>
  );
  
};

const Container = styled.div`
  height: 500px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

`;

const StyledSVG = styled.svg`
  & path {
    fill: ${props => props.color};
  }
`;

What's the best way to update the fill color of an SVG dynamically?

Answer №1

Similar questions

How to create a stunning Bootstrap Jumbotron with a blurred background that doesn't affect the

What is the best way to incorporate this code snippet into an object's value?

Using PHP/JavaScript to activate a button once the timer reaches 00:00

TypeScript version 3.7 has implemented a new feature where it will now display errors for each individual invalid prop instead of grouping them together as it

Making a list of members from an array of objects

Accessing and showcasing MySQL information using hidden forms

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

How to retrieve the value of an element within a facebox div with jquery

What is the process for generating an array of arrays in a React component?

Passing the AngularJS ng-model from a template to a directive's controller

Incorporate child routes within a React component

Experience real-time updates for CSS gradients

Creating an animated full-width SVG with a background image

Using Database Data in a Material UI Select Component

Sorry, but you can only use one 'in' filter in your query

Is it possible to consolidate React and React-DOM into a unified library instead of having them separate?

ReactJS - Troubleshooting the unresponsive modal issue on initial click

Is it possible to modify the number format of an input field while in Antd's table-row-edit mode?