1

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.

3

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.