svg – change color to red

I have a svg file as below:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M 3.40625 2 L 2 3.40625 L 20.59375 22 L 22 20.59375 L 18.25 16.84375 C 20.928258 15.04564 22.694688 12.751437 22.8125 12.59375 C 23.0775 12.23875 23.0775 11.76125 22.8125 11.40625 C 22.6185 11.14525 17.956 5 12 5 C 10.388 5 8.8880996 5.4625332 7.53125 6.125 L 3.40625 2 z M 12 7 C 14.761 7 17 9.238 17 12 C 17 13.025672 16.685559 13.95693 16.15625 14.75 L 14.3125 12.90625 C 14.424482 12.622304 14.5 12.323996 14.5 12 C 14.5 10.62 13.381 9.5 12 9.5 C 11.676473 9.5 11.377667 9.5755179 11.09375 9.6875 L 9.25 7.84375 C 10.043431 7.3140311 10.97507 7 12 7 z M 4.90625 7.75 C 2.70625 9.425 1.2925 11.26525 1.1875 11.40625 C 0.9225 11.76125 0.9225 12.23875 1.1875 12.59375 C 1.3825 12.85475 6.044 19 12 19 C 13.228 19 14.411 18.7295 15.5 18.3125 L 13.8125 16.65625 C 13.2475 16.87825 12.644 17 12 17 C 9.239 17 7 14.762 7 12 C 7 11.356 7.12275 10.7525 7.34375 10.1875 L 4.90625 7.75 z M 9.53125 12.375 C 9.69125 13.462 10.538 14.30875 11.625 14.46875 L 9.53125 12.375 z"/>
</svg>

I wish to change the current color black to red, is it possible to just edit this svg file directly? I think it should be something like fill=red color but not found it.

Answer

Yes.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red">
    <path d="M 3.40625 2 L 2 3.40625 L 20.59375 22 L 22 20.59375 L 18.25 16.84375 C 20.928258 15.04564 22.694688 12.751437 22.8125 12.59375 C 23.0775 12.23875 23.0775 11.76125 22.8125 11.40625 C 22.6185 11.14525 17.956 5 12 5 C 10.388 5 8.8880996 5.4625332 7.53125 6.125 L 3.40625 2 z M 12 7 C 14.761 7 17 9.238 17 12 C 17 13.025672 16.685559 13.95693 16.15625 14.75 L 14.3125 12.90625 C 14.424482 12.622304 14.5 12.323996 14.5 12 C 14.5 10.62 13.381 9.5 12 9.5 C 11.676473 9.5 11.377667 9.5755179 11.09375 9.6875 L 9.25 7.84375 C 10.043431 7.3140311 10.97507 7 12 7 z M 4.90625 7.75 C 2.70625 9.425 1.2925 11.26525 1.1875 11.40625 C 0.9225 11.76125 0.9225 12.23875 1.1875 12.59375 C 1.3825 12.85475 6.044 19 12 19 C 13.228 19 14.411 18.7295 15.5 18.3125 L 13.8125 16.65625 C 13.2475 16.87825 12.644 17 12 17 C 9.239 17 7 14.762 7 12 C 7 11.356 7.12275 10.7525 7.34375 10.1875 L 4.90625 7.75 z M 9.53125 12.375 C 9.69125 13.462 10.538 14.30875 11.625 14.46875 L 9.53125 12.375 z"/>
</svg>

Or hex values….

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#aa0000">
    <path d="M 3.40625 2 L 2 3.40625 L 20.59375 22 L 22 20.59375 L 18.25 16.84375 C 20.928258 15.04564 22.694688 12.751437 22.8125 12.59375 C 23.0775 12.23875 23.0775 11.76125 22.8125 11.40625 C 22.6185 11.14525 17.956 5 12 5 C 10.388 5 8.8880996 5.4625332 7.53125 6.125 L 3.40625 2 z M 12 7 C 14.761 7 17 9.238 17 12 C 17 13.025672 16.685559 13.95693 16.15625 14.75 L 14.3125 12.90625 C 14.424482 12.622304 14.5 12.323996 14.5 12 C 14.5 10.62 13.381 9.5 12 9.5 C 11.676473 9.5 11.377667 9.5755179 11.09375 9.6875 L 9.25 7.84375 C 10.043431 7.3140311 10.97507 7 12 7 z M 4.90625 7.75 C 2.70625 9.425 1.2925 11.26525 1.1875 11.40625 C 0.9225 11.76125 0.9225 12.23875 1.1875 12.59375 C 1.3825 12.85475 6.044 19 12 19 C 13.228 19 14.411 18.7295 15.5 18.3125 L 13.8125 16.65625 C 13.2475 16.87825 12.644 17 12 17 C 9.239 17 7 14.762 7 12 C 7 11.356 7.12275 10.7525 7.34375 10.1875 L 4.90625 7.75 z M 9.53125 12.375 C 9.69125 13.462 10.538 14.30875 11.625 14.46875 L 9.53125 12.375 z"/>
</svg>

You could have merely tried it in the time it took to post the question :)

Attribution
Source : Link , Question Author : beetlej , Answer Author : Scott

Leave a Comment