How do I use an svg file as a checkbox?

See more:

Javascript

CSS3

HTML5

SVG

I made an svg image in Adobe Illustrator (id="gray-x-button"), and I want to use the svg code as a custom shaped checkbox. Once the user clicks on the checkbox, I want the checkbox to change to a different svg image I made in Illustrator (id="red-x-button"). How would I do that using HTML, CSS, and Javascript? I'm very new to web development, so I've been having trouble even knowing where to begin. All I have right now is my svg code that I exported from Illustrator, which I will post below. I would prefer to use inline svg code so I can modify it with CSS later. Thanks!

What I have tried:

The following code is the custom shapes I made in Illustrator:

<pre lang="HTML">

<svg id="gray-x-button" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">s
    <defs>
        <style>.cls-1-g{fill:url(#linear-gradient);}.cls-2-g{opacity:0.25;}.cls-3-g{fill:#fff;}</style>
        <lineargradient id="linear-gradient" x1="187.42" y1="187.55" x2="317.1" y2="317.23" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#d1d1d1"/>
            <stop offset="0.62" stop-color="#acadaf"/>
            <stop offset="1" stop-color="#939598"/>
        </lineargradient>
    </defs>
    <path id="Cross-g" class="cls-1-g" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
    <g id="Depth-g" class="cls-2-g">
        <path class="cls-3-g" d="M305.08,180.13a4.2,4.2,0,0,1,3,1.25l-2-2a4.25,4.25,0,0,0-6,0l-47.81,47.8-47.81-47.8a4.25,4.25,0,0,0-6,0l-19.19,19.18a4.26,4.26,0,0,0,0,6l2,2a4.26,4.26,0,0,1,0-6l19.19-19.18a4.25,4.25,0,0,1,6,0l47.81,47.8,47.81-47.8A4.2,4.2,0,0,1,305.08,180.13Z" transform="translate(-176 -176.13)"/>
        <polygon class="cls-3-g" points="149.28 124.07 103.47 78.27 149.28 124.07 149.28 124.07"/>
        <path class="cls-3-g" d="M227.8,256.13l-2-2-46.64,46.64a4.16,4.16,0,0,0,0,5.88l18.72,18.72h0l-16.77-16.77a4.16,4.16,0,0,1,0-5.88Z" transform="translate(-176 -176.13)"/>
    </g>
</svg>

<svg id="red-x-button" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152.53" height="152.53" viewBox="0 0 152.53 152.53">
    <defs>
        <style>.cls-1-r{fill:#231f20;}.cls-2-r{fill:url(#radial-gradient);}</style>
        <radialgradient id="radial-gradient" cx="252.26" cy="252.39" r="74.26" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#f7941d"/>
            <stop offset="0.2" stop-color="#f4701f"/>
            <stop offset="0.43" stop-color="#f14c21"/>
            <stop offset="0.65" stop-color="#ef3123"/>
            <stop offset="0.85" stop-color="#ed2224"/>
            <stop offset="1" stop-color="#ed1c24"/>
        </radialgradient>
    </defs>
    <path id="Cross-r" class="cls-1-r" d="M280.3,252.39,326.69,206a6.26,6.26,0,0,0,0-8.86L307.51,178a6.28,6.28,0,0,0-8.86,0l-46.39,46.39L205.87,178a6.28,6.28,0,0,0-8.86,0l-19.18,19.18a6.28,6.28,0,0,0,0,8.86l46.39,46.39-46.39,46.39a6.28,6.28,0,0,0,0,8.86L197,326.82a6.26,6.26,0,0,0,8.86,0l46.39-46.39,46.39,46.39a6.26,6.26,0,0,0,8.86,0l19.18-19.18a6.26,6.26,0,0,0,0-8.86Z" transform="translate(-176 -176.13)"/>
    <path class="cls-2-r" d="M303.08,326.66a4.24,4.24,0,0,1-3-1.25L252.26,277.6l-47.81,47.81a4.25,4.25,0,0,1-6,0l-19.19-19.19a4.26,4.26,0,0,1,0-6l47.81-47.81-47.81-47.81a4.26,4.26,0,0,1,0-6l19.19-19.19a4.26,4.26,0,0,1,6,0l47.81,47.8,47.81-47.81a4.26,4.26,0,0,1,6,0l19.19,19.18a4.26,4.26,0,0,1,0,6l-47.81,47.81,47.81,47.81a4.25,4.25,0,0,1,0,6l-19.19,19.19A4.24,4.24,0,0,1,303.08,326.66Z" transform="translate(-176 -176.13)"/>
</svg>