<svg style="display: none">
    <symbol id="robot" viewBox="0 0 340 536">
        <path d="M99.581 504.076c0 13.056-10.583 23.639-23.638 23.639-13.055 0-23.638-10.583-23.638-23.639 0-13.055 10.583-23.638 23.638-23.638 13.055 0 23.638 10.583 23.638 23.638m67.395-2.467c0 13.056-10.584 23.639-23.639 23.639-13.054 0-23.637-10.583-23.637-23.639 0-13.054 10.583-23.637 23.637-23.637 13.055 0 23.639 10.583 23.639 23.637m67.751 0c0 13.056-10.584 23.639-23.639 23.639-13.054 0-23.637-10.583-23.637-23.639 0-13.054 10.583-23.637 23.637-23.637 13.055 0 23.639 10.583 23.639 23.637" fill="#fff" />
        <path d="M153.643 501.609c0 5.692-4.614 10.306-10.306 10.306-5.691 0-10.304-4.614-10.304-10.306 0-5.691 4.613-10.304 10.304-10.304 5.692 0 10.306 4.613 10.306 10.304m69.045 0c0 5.692-4.614 10.306-10.306 10.306-5.691 0-10.304-4.614-10.304-10.306 0-5.691 4.613-10.304 10.304-10.304 5.692 0 10.306 4.613 10.306 10.304m-136.581-.001c0 5.692-4.614 10.306-10.305 10.306-5.692 0-10.305-4.614-10.305-10.306 0-5.691 4.613-10.304 10.305-10.304 5.691 0 10.305 4.613 10.305 10.304" fill="#D1312C" />
        <path d="M139.421 17.747h5.662v53.232h-5.662v-53.232z" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M160.375 79.12c0 9.265-7.893 16.776-17.627 16.776-9.734 0-17.626-7.511-17.626-16.776 0-9.266 7.892-16.777 17.626-16.777 9.734 0 17.627 7.511 17.627 16.777" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M127.798 292.562h33.317v7.918h-33.317v-7.918zm0-15.833h33.317v7.916h-33.317v-7.916z" fill="#fff" />
        <path d="M127.798 284.645h33.317v7.917h-33.317v-7.917z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M228.285 159.653v95.374l-174.328-1.51v-93.864c0-48.139 39.024-87.164 87.164-87.164 48.138 0 87.164 39.025 87.164 87.164m-74.848-147.569c0 6.567-5.324 11.892-11.893 11.892-6.566 0-11.892-5.325-11.892-11.892 0-6.568 5.326-11.893 11.892-11.893 6.569 0 11.893 5.325 11.893 11.893" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M18.891 253.823l-6.392-3.114 41.47-85.157 6.392 3.113-41.47 85.158" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M151.548 171.55c0 21.528-17.452 38.98-38.979 38.98-21.528 0-38.98-17.452-38.98-38.98 0-21.529 17.452-38.981 38.98-38.981 21.527 0 38.979 17.452 38.979 38.981" fill="#fff" />
        <path d="M112.569 135.069c-20.115 0-36.48 16.366-36.48 36.481 0 20.115 16.365 36.48 36.48 36.48s36.479-16.365 36.479-36.48-16.364-36.481-36.479-36.481zm0 77.961c-22.872 0-41.48-18.608-41.48-41.48 0-22.873 18.608-41.481 41.48-41.481 22.872 0 41.479 18.608 41.479 41.481 0 22.872-18.607 41.48-41.479 41.48z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M257.197 306.265h10.642v20.103h-10.642v-20.103zm-21.281 0h10.64v20.103h-10.64v-20.103zm63.847 0h10.641v20.103h-10.641v-20.103z" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M267.839 306.265h10.641v20.103h-10.641v-20.103zm-21.283 0h10.641v20.103h-10.641v-20.103zm63.848 0h10.642v20.103h-10.642v-20.103zm-21.281 0h10.64v20.103h-10.64v-20.103z" fill="#fff" />
        <path d="M278.48 306.265h10.643v20.103h-10.643v-20.103z" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M339.271 299.582l-.006 9.152-9.99-.006-.012 16.592 9.988.01-.011 9.153-19.342-.016.031-34.901 19.342.016" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M127.435 400.173h33.316v11.875h-33.316v-11.875z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M127.435 435.798h33.316v11.876h-33.316v-11.876zm0-47.501h33.316v11.876h-33.316v-11.876zm0 23.751h33.316v11.874h-33.316v-11.874z" fill="#fff" />
        <path d="M127.435 423.922h33.316v11.876h-33.316v-11.876z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M144.093 172.914c0 17.41-14.114 31.524-31.524 31.524-17.411 0-31.525-14.114-31.525-31.524 0-17.411 14.114-31.524 31.525-31.524 17.41 0 31.524 14.113 31.524 31.524" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M134.749 172.914c0 12.25-9.931 22.18-22.18 22.18-12.25 0-22.18-9.93-22.18-22.18s9.93-22.181 22.18-22.181c12.249 0 22.18 9.931 22.18 22.181" fill="#fff" />
        <path d="M124.96 172.914c0 6.844-5.548 12.392-12.391 12.392-6.844 0-12.392-5.548-12.392-12.392 0-6.844 5.548-12.392 12.392-12.392 6.843 0 12.391 5.548 12.391 12.392" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M211.089 182.191c0 14.951-12.121 27.071-27.072 27.071-14.949 0-27.07-12.12-27.07-27.071 0-14.951 12.121-27.071 27.07-27.071 14.951 0 27.072 12.12 27.072 27.071" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M203.064 182.191c0 10.52-8.527 19.047-19.047 19.047-10.519 0-19.047-8.527-19.047-19.047 0-10.52 8.528-19.047 19.047-19.047 10.52 0 19.047 8.527 19.047 19.047" fill="#fff" />
        <path d="M194.66 182.191c0 5.877-4.766 10.642-10.643 10.642-5.875 0-10.641-4.765-10.641-10.642s4.766-10.641 10.641-10.641c5.877 0 10.643 4.764 10.643 10.641" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M239.232 263.521c0 9.383-7.606 16.99-16.988 16.99h-161.397c-9.383 0-16.989-7.607-16.989-16.99 0-9.382 7.606-16.988 16.989-16.988h161.397c9.382 0 16.988 7.606 16.988 16.988" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M75.803 524.227c-11.162 0-20.245-9.083-20.245-20.248 0-11.163 9.083-20.245 20.245-20.245 11.163 0 20.244 9.082 20.244 20.245 0 11.165-9.081 20.248-20.244 20.248zm0-51.371c-17.16 0-31.123 13.961-31.123 31.123 0 17.163 13.963 31.126 31.123 31.126 17.161 0 31.122-13.963 31.122-31.126 0-17.162-13.961-31.123-31.122-31.123zm136.577 51.371c-11.164 0-20.246-9.083-20.246-20.248 0-11.163 9.082-20.245 20.246-20.245 11.164 0 20.246 9.082 20.246 20.245 0 11.165-9.082 20.248-20.246 20.248zm0-51.371c-17.162 0-31.121 13.961-31.121 31.123 0 17.163 13.959 31.126 31.121 31.126s31.125-13.963 31.125-31.126c0-17.162-13.963-31.123-31.125-31.123zm-68.289 51.351c-10.993-.196-19.88-9.188-19.88-20.228 0-11.039 8.887-20.029 19.88-20.228 10.994.199 19.881 9.189 19.881 20.228 0 11.04-8.887 20.032-19.881 20.228zm0-51.334c-16.991.203-30.756 14.069-30.756 31.106 0 17.038 13.765 30.905 30.756 31.107 16.992-.202 30.758-14.069 30.758-31.107 0-17.037-13.766-30.903-30.758-31.106z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M144.091 444.53c-61.46.65-110.895 25.947-110.895 57.079h221.794c0-31.132-49.436-56.429-110.899-57.079m-85.986-134.44l-18.546 7.758-4.107-9.816 18.546-7.76 4.107 9.818m8.214 19.633l-18.547 7.758-4.105-9.816 18.545-7.759 4.107 9.817m-24.642-58.901l-18.546 7.758-4.107-9.816 18.546-7.759 4.107 9.817" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M35.452 308.032l18.546-7.76-4.107-9.817-18.546 7.76 4.107 9.817m8.215 19.633l18.545-7.759-4.107-9.816-18.546 7.758 4.108 9.817m-28.75-68.718l4.107 9.817 18.546-7.759-4.107-9.817-18.546 7.759m12.321 29.451l18.547-7.759-4.108-9.817-18.546 7.758 4.107 9.818" fill="#fff" />
        <path d="M49.891 290.455l-18.546 7.76-4.107-9.817 18.547-7.759 4.106 9.816" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M32.594 231.795l-8.441 3.538 3.863 9.213-15.303 6.416-3.865-9.21-8.439 3.541 7.48 17.838 32.186-13.498-7.481-17.838" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M53.957 165.552h19.632v12.081h-19.632v-12.081z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M239.232 368.666c0 12.511-10.141 22.652-22.652 22.652h-146.483c-12.511 0-22.652-10.141-22.652-22.652v-55.498c0-12.511 10.141-22.652 22.652-22.652h146.483c12.511 0 22.652 10.141 22.652 22.652v55.498" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)"
              />
        <path d="M201.882 357.857c0 7.638-6.193 13.83-13.83 13.83h-89.427c-7.638 0-13.829-6.192-13.829-13.83v-33.88c0-7.639 6.191-13.83 13.829-13.83h89.427c7.637 0 13.83 6.191 13.83 13.83v33.88" fill="#fff" />
        <path d="M98.625 312.412c-6.376 0-11.564 5.188-11.564 11.565v33.88c0 6.376 5.188 11.564 11.564 11.564h89.427c6.377 0 11.565-5.188 11.565-11.564v-33.88c0-6.377-5.188-11.565-11.565-11.565h-89.427zm89.427 61.539h-89.427c-8.875 0-16.094-7.22-16.094-16.094v-33.88c0-8.875 7.219-16.095 16.094-16.095h89.427c8.875 0 16.094 7.22 16.094 16.095v33.88c0 8.874-7.219 16.094-16.094 16.094z" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M120.45 336.21c-2.351-.077-4.32 1.757-4.398 4.111-.083 2.348 1.757 4.316 4.103 4.4 2.352.077 4.321-1.762 4.403-4.112.08-2.347-1.761-4.32-4.108-4.399" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M119.921 351.675c-4.478-.155-8.24-2.915-9.909-6.77-.639-1.476-.98-3.106-.921-4.824.05-1.444.38-2.811.921-4.065 1.78-4.108 5.929-6.924 10.678-6.766 6.188.215 11.037 5.406 10.823 11.6-.213 6.191-5.402 11.036-11.592 10.825zm23.506-14.145l-2.994-.105c-.408-2.889-1.441-5.678-3.023-8.146l2.117-1.982c.43-.402.455-1.077.055-1.504l-3.452-3.692c-.193-.209-.461-.331-.74-.342-.286-.009-.559.094-.764.286l-2.078 1.942c-2.354-1.798-5.072-3.069-7.959-3.716l.092-2.678c.021-.589-.439-1.082-1.029-1.101l-5.048-.175c-.592-.021-1.084.441-1.102 1.028l-.087 2.591c-2.603.342-5.109 1.216-7.403 2.513-.304.173-.617.327-.913.513l-1.821-1.947c-.399-.428-1.072-.453-1.503-.051l-3.696 3.449c-.206.194-.328.461-.338.743-.009.28.095.557.288.762l1.761 1.888c-1.87 2.427-3.171 5.244-3.803 8.233l-2.552-.084c-.588-.019-1.081.439-1.101 1.024l-.172 5.054c-.021.586.441 1.077 1.027 1.096l2.55.089c.426 3.007 1.516 5.884 3.197 8.423l-1.946 1.814c-.411.384-.435 1.093-.052 1.501l3.453 3.696c.4.431 1.072.454 1.503.049l1.987-1.853c.683.506 1.398.955 2.131 1.368 1.878 1.062 3.903 1.836 6.015 2.262l-.098 2.861c-.02.583.438 1.077 1.027 1.1l5.051.169c.584.021 1.079-.437 1.1-1.026l.1-2.945c2.95-.454 5.77-1.551 8.251-3.201l1.98 2.118c.193.207.458.325.741.336.283.011.556-.092.762-.285l3.693-3.451c.434-.401.451-1.072.055-1.505l-2.038-2.178c1.725-2.344 2.932-5.033 3.536-7.865l2.994.098c.588.023 1.078-.439 1.102-1.024l.172-5.053c.021-.585-.44-1.082-1.028-1.097z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M165.044 331.194c0 4.015-3.253 7.269-7.267 7.269s-7.268-3.254-7.268-7.269c0-4.013 3.254-7.267 7.268-7.267 4.014 0 7.267 3.254 7.267 7.267" fill="#D1312C" />
        <path d="M189.113 331.194c0 4.015-3.254 7.269-7.268 7.269-4.013 0-7.267-3.254-7.267-7.269 0-4.013 3.254-7.267 7.267-7.267 4.014 0 7.268 3.254 7.268 7.267" fill="orange" />
        <path d="M165.423 351.483c0 4.015-3.254 7.269-7.267 7.269-4.014 0-7.268-3.254-7.268-7.269 0-4.012 3.254-7.266 7.268-7.266 4.013 0 7.267 3.254 7.267 7.266" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M189.492 351.483c0 4.015-3.254 7.269-7.268 7.269-4.014 0-7.269-3.254-7.269-7.269 0-4.012 3.255-7.266 7.269-7.266s7.268 3.254 7.268 7.266" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M191.328 15.67c-11.174 0-36.114 17.541-48.469 17.541-12.357 0-29.419-18.673-41.006-18.673-13.71 0-24.823 11.113-24.823 24.822 0 13.71 11.113 24.824 24.823 24.824 11.122 0 29.501-17.395 40.117-17.395 10.617 0 37.824 18.527 49.358 18.527 13.711 0 24.822-11.113 24.822-24.823 0-13.709-11.111-24.823-24.822-24.823" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
    </symbol>
</svg>
<svg>
  <use xlink:href="#robot" id="robot-1" />
</svg>
<svg>
  <use xlink:href="#robot" id="robot-2" />
</svg>
<svg>
  <use xlink:href="#robot" id="robot-3" />
</svg>

<p>If you're viewing this demo in any browser that does not support CSS Variables, the three robots will look the same. In Safari, there is <a href="https://bugs.webkit.org/show_bug.cgi?id=147932">a bug</a> preventing it from falling back to the appropriate fill values. Let's hope that gets fixed asap.</p>

svg {
  margin: 1em;
  width: 240px; 
  height: 400px;
}
#robot-1 {
  --primary-color: #0099CC;
  --secondary-color: #FFDF34;
  --tertiary-color: #333;
}
#robot-2 {
  --primary-color: #E52A39;
  --secondary-color: #11EBD8;
  --tertiary-color: #000;
}
/*#robot-3 {
  --primary-color: ;
  --secondary-color: ;
  --tertiary-color: ;
}*/


p {
  text-align: center;
  width: 60%;
  margin: 3em auto;
  color: grey;
}