Выбери кота

http://kaatula.github.io/svg-icons/samples/choose-cat.html

by Alexander Tymchuk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <div>Управляем показом опеределенных элементов при помощи трюка с CSS-переменной <code>currentColor</code> и установкой цвета элементов в <code>transparent</code></div>
        <ul class="list-unstyled">
            <li class="selected">
                <svg width="160px" height="160px">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#kotik"></use>
                </svg>
            </li>
            <li>
                <svg width="160px" height="160px">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#kotik"></use>
                </svg>
            </li>
            <li>
                <svg width="160px" height="160px">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#kotik"></use>
                </svg>
            </li>
        </ul><!--  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
  ↓
Ты нашёл котика!
Котик должен быть в ДОМе; обычно мы грузим его через AJAX, но это невозможно на JSFiddle -->
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="kotik" viewBox="0 0 400 400">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <ellipse class="face" ry="55" rx="55" cy="120.5" cx="154.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
        <ellipse class="ear" ry="21.5" rx="11" cy="58" cx="116.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
        <ellipse class="ear" ry="22.5" rx="5.5" cy="53" cx="189" stroke-width="1.5" stroke="#000" fill="#fff"/>
        <g class="whiskers">
            <line y2="90.5" x2="288.5" y1="115.5" x1="186.5" stroke-width="1.5" stroke="#000" fill="none"/>
            <line y2="134.5" x2="193.5" y1="139.5" x1="304.5" stroke-width="1.5" stroke="#000" fill="none"/>
            <line y2="146.5" x2="192.5" y1="167.5" x1="302.5" stroke-width="1.5" stroke="#000"...

CSS

.checkmark {
        visibility: visible;
    }
    
    .checkmark line {
        stroke: currentColor;
    }
    
    svg use {
        color: transparent;
    }
    
    li.selected use {
        color: darkred;
    }
    
    li {
        cursor: pointer;
    }

JavaScript

$(document).ready(function() {
        $("li").on("click", function(ev) {
            $(ev.currentTarget).toggleClass("selected");
        });
    })