Skip to content

Instantly share code, notes, and snippets.

@una

una/sprite.svg

Last active January 14, 2016 15:48
Show Gist options
  • Save una/7795fae1f8f2af919144 to your computer and use it in GitHub Desktop.
Save una/7795fae1f8f2af919144 to your computer and use it in GitHub Desktop.
Download ZIP
Why isn't SVG <use> working
Display the source blob
Display the rendered blob
Raw
sprite.svg
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><svg viewBox="0 0 32 32" id="common--add"><path d="M17 9h-2v6H9v2h6v6h2v-6h6v-2h-6z"/><path d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg><svg viewBox="0 0 15 14" id="common--arrows"><title>Triangle 1 + Rectangle 914 + Triangle 1 Copy + Rectangle 914 Copy</title><g fill="#868F99" fill-rule="evenodd"><path d="M3.75.848L7.5 5.18H0m2.5 0H5v8.668H2.5zM10.893 13.848l-3.75-4.333h7.5m-2.5 0h-2.5V.848h2.5z"/></g></svg><svg viewBox="0 0 32 32" id="common--cancel"><path d="M20.293 10.293L16 14.586l-4.293-4.293-1.414 1.414L14.586 16l-4.293 4.293 1.414 1.414L16 17.414l4.293 4.293 1.414-1.414L17.414 16l4.293-4.293z"/><path d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg><svg viewBox="0 0 32 32" id="common--configure"><path d="M12.858 7C12.412 5.278 10.86 4 9 4S5.588 5.278 5.142 7H1v2h4.142C5.588 10.722 7.14 12 9 12s3.412-1.278 3.858-3H31V7H12.858zM9 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM23 12a3.99 3.99 0 0 0-3.858 3H1v2h18.142c.446 1.722 1.997 3 3.858 3s3.412-1.278 3.858-3H31v-2h-4.142A3.99 3.99 0 0 0 23 12zm0 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM9 20a3.99 3.99 0 0 0-3.858 3H1v2h4.142C5.588 26.722 7.14 28 9 28s3.412-1.278 3.858-3H31v-2H12.858A3.99 3.99 0 0 0 9 20zm0 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg><svg viewBox="0 0 56 56" id="common--create"><title>Shape</title><path d="M32 0h-8v24H0v8h24v24h8V32h24v-8H32V0z" fill="#000" fill-rule="evenodd"/></svg><svg viewBox="0 0 32 32" id="common--delete"><path d="M12 2h8v2h-8zM6 5v5h1v20h18V10h1V5H6zm17 23H9V12h14v16z"/><path d="M11 14h1v12h-1zM14 14h1v12h-1zM17 14h1v12h-1zM20 14h1v12h-1z"/></svg><svg viewBox="0 0 32 32" id="common--deploy"><path d="M30.707 8.293L24 1.586l-6.707 6.707 1.414 1.414L23 5.414V19c0 5.514-4.486 10-10 10S3 24.514 3 19c0-2.67 1.04-5.182 2.93-7.07l-1.415-1.415A11.92 11.92 0 0 0 1 19c0 6.617 5.383 12 12 12s12-5.383 12-12V5.414l4.293 4.293 1.414-1.414z"/><circle cx="13" cy="19" r="3"/></svg><svg viewBox="0 0 32 32" id="common--download"><path d="M24.708 13.707l-1.414-1.415L17 18.587V2h-2v16.585l-6.292-6.293-1.414 1.415L16 22.414z"/><path d="M29 19v8H3v-8H1v12h30V19z"/></svg><svg viewBox="0 0 32 32" id="common--edit"><path d="M22 4l3-3 6 6-3 3zM5 21l6 6 15-15-6-6L5 21zm6 3.17L7.828 21 20 8.83 23.172 12 11 24.17zM1 31l5-2-3-3z"/></svg><svg viewBox="0 0 15 15" id="common--grid"><title>Group</title><path d="M0 0h7v7H0zm0 8h7v7H0zm8-8h7v7H8zm0 8h7v7H8z" fill="#858E98" fill-rule="evenodd"/></svg><svg viewBox="0 0 32 32" id="common--group"><path d="M8 23c2.762 0 5-2.238 5-5s-2.238-5-5-5-5 2.238-5 5 2.238 5 5 5zm0-8c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zM19 18c0 2.762 2.238 5 5 5s5-2.238 5-5-2.238-5-5-5-5 2.238-5 5zm5-3c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zM21 7c0-2.762-2.238-5-5-5s-5 2.238-5 5 2.238 5 5 5 5-2.238 5-5zm-5 3c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM12 25H4a2 2 0 0 0-2 2v3h12v-3a2 2 0 0 0-2-2zM28 25h-8a2 2 0 0 0-2 2v3h12v-3a2 2 0 0 0-2-2z"/></svg><svg viewBox="0 0 32 32" id="common--healthy"><path d="M14 18.586l-3.293-3.293-1.414 1.414L14 21.414l8.707-8.707-1.414-1.414z"/><path d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg><svg viewBox="0 0 32 32" id="common--help"><path d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm7 14a7.02 7.02 0 0 1-7 7 7.022 7.022 0 0 1-7-7 7.025 7.025 0 0 1 7-7 7.022 7.022 0 0 1 7 7zm-3.714-7.286C18.282 8.26 17.172 8 16 8s-2.282.26-3.286.714L9.766 5.766C11.586 4.653 13.716 4 16 4s4.414.653 6.234 1.766l-2.948 2.948zM8.714 19.286l-2.948 2.948C4.653 20.414 4 18.284 4 16s.653-4.415 1.766-6.234l2.948 2.948C8.26 13.718 8 14.828 8 16s.26 2.282.714 3.286zm4 4C13.718 23.74 14.828 24 16 24s2.282-.26 3.286-.714l2.948 2.948C20.414 27.347 18.284 28 16 28s-4.414-.653-6.234-1.766l2.948-2.948zm10.572-10.572l2.948-2.948C27.347 11.586 28 13.716 28 16s-.653 4.415-1.766 6.234l-2.948-2.948C23.74 18.282 24 17.172 24 16s-.26-2.282-.714-3.286z"/></svg><svg viewBox="0 0 32 32" id="common--link"><path d="M28.95 3.05C27.683 1.784 25.933 1 24 1s-3.683.784-4.95 2.05l-3 3A6.982 6.982 0 0 0 14 11c0 1.206.286 2.36.808 3.364l-.443.443A7.316 7.316 0 0 0 11 14a6.982 6.982 0 0 0-4.95 2.05l-3 3C1.784 20.317 1 22.067 1 24s.784 3.683 2.05 4.95S6.067 31 8 31s3.683-.784 4.95-2.05l3-3A6.982 6.982 0 0 0 18 21c0-1.206-.286-2.36-.808-3.364l.443-.443c1.006.52 2.16.807 3.365.807a6.982 6.982 0 0 0 4.95-2.05l3-3C30.216 11.683 31 9.933 31 8s-.784-3.683-2.05-4.95zM16 21a4.97 4.97 0 0 1-1.464 3.536l-3 3C10.59 28.48 9.336 29 8 29s-2.59-.52-3.536-1.464C3.52 26.59 3 25.336 3 24s.52-2.59 1.464-3.536l3-3A4.97 4.97 0 0 1 11 16c.642 0 1.264.122 1.84.332l-4.254 4.254 2.828 2.828 4.254-4.254c.21.576.332 1.198.332 1.84zm11.536-9.464l-3 3A4.97 4.97 0 0 1 21 16a5.376 5.376 0 0 1-1.84-.332l4.254-4.254-2.828-2.828-4.254 4.254A5.376 5.376 0 0 1 16 11c0-1.335.52-2.59 1.464-3.536l3-3C21.41 3.52 22.664 3 24 3s2.59.52 3.536 1.464C28.48 5.41 29 6.664 29 8s-.52 2.59-1.464 3.536z"/></svg><svg viewBox="0 0 32 32" id="common--monitor"><path d="M1 4v24h30V4H1zm28 22H3V10h26v16z"/><path d="M16 24c4.484 0 7.9-2.417 10-6-2.1-3.583-5.516-6-10-6s-7.9 2.417-10 6c2.1 3.583 5.516 6 10 6zm0-11c3.627 0 6.74 1.77 8.826 5-2.086 3.23-5.2 5-8.826 5s-6.74-1.77-8.826-5c2.086-3.23 5.2-5 8.826-5z"/><path d="M16 21.5c1.934 0 3.5-1.566 3.5-3.5s-1.566-3.5-3.5-3.5a3.5 3.5 0 0 0 0 7zm0-4.667c.646 0 1.166.522 1.166 1.167a1.165 1.165 0 0 1-2.332 0c0-.645.52-1.167 1.166-1.167z"/></svg><svg viewBox="0 0 62 54" id="common--previous"><title>Shape</title><path d="M32.486 5.658L26.828 0 0 26.83l26.828 26.828L32.486 48 15.314 30.83h46.343v-8H15.314L32.486 5.657z" fill="#000" fill-rule="evenodd"/></svg><svg viewBox="0 0 32 32" id="common--purchase"><path d="M1 6v20h30V6H1zm28 2v2H3V8h26zM3 24V13h26v11H3z"/><path d="M5 21h4v1H5zM10 21h4v1h-4z"/></svg><svg viewBox="0 0 32 32" id="common--restart"><path d="M17 29c-5.514 0-10-4.486-10-10S11.486 9 17 9h6.586l-4.293 4.293 1.414 1.414L27.414 8l-6.707-6.707-1.414 1.414L23.586 7H17C10.383 7 5 12.383 5 19s5.383 12 12 12a11.92 11.92 0 0 0 8.485-3.515L24.07 26.07A9.934 9.934 0 0 1 17 29z"/></svg><svg viewBox="0 0 32 32" id="common--running"><path d="M11 11a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/><path d="M30.12 6.88A2.995 2.995 0 0 0 28 6H11C8.24 6 5.74 7.12 3.93 8.93 2.12 10.737 1 13.237 1 16s1.12 5.262 2.93 7.07A9.968 9.968 0 0 0 11 26a9.992 9.992 0 0 0 7.07-2.93.018.018 0 0 0 .005-.004C21.085 20.068 30.12 11.12 30.12 11.12c.545-.54.88-1.29.88-2.12s-.335-1.58-.88-2.12zM16.66 21.65A7.973 7.973 0 0 1 11 24a7.948 7.948 0 0 1-5.657-2.343C3.833 20.147 3 18.137 3 16s.832-4.146 2.343-5.657A7.948 7.948 0 0 1 11 8c2.05 0 4.097.783 5.657 2.343 3.117 3.118 3.118 8.19.004 11.31zm4.222-4.19c.444-3.023-.485-6.207-2.81-8.534A10.09 10.09 0 0 0 16.98 8h8.2a2.99 2.99 0 0 0 .697 3.12c.245.247.527.43.823.572a9370.67 9370.67 0 0 0-5.82 5.77zM28 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg><svg viewBox="0 0 32 32" id="common--search"><path d="M12 1C5.926 1 1 5.926 1 12s4.926 11 11 11 11-4.926 11-11S18.074 1 12 1zm0 20c-4.962 0-9-4.038-9-9s4.038-9 9-9 9 4.038 9 9-4.038 9-9 9zM21 24l3-3 7 7-3 3z"/><circle cx="21" cy="21" r="1"/></svg><svg viewBox="0 0 24 24" id="common--search-sm"><path fill="#868F99" d="M9 3c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 9 1zm6 17l3-3 5 5-3 3z"/></svg><svg viewBox="0 0 32 32" id="common--settings"><path d="M20.433 12c0-.45-.045-.89-.114-1.322L23 8.333l-2.277-3.738-3.197 1.044A8.407 8.407 0 0 0 14.91 4.09L14.2 1H9.8l-.71 3.092A8.42 8.42 0 0 0 6.475 5.64L3.277 4.595 1 8.333l2.68 2.346c-.068.43-.113.87-.113 1.32s.045.89.113 1.32L1 15.668l2.278 3.738 3.196-1.044a8.393 8.393 0 0 0 2.618 1.548L9.8 23h4.4l.708-3.092a8.388 8.388 0 0 0 2.617-1.547l3.196 1.045L23 15.667l-2.68-2.345c.068-.432.113-.87.113-1.322zM12 15a3 3 0 0 1 0-6 3 3 0 0 1 0 6z"/></svg><svg viewBox="0 0 32 32" id="common--start"><path d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/><path d="M11 22l12-6-12-6z"/></svg><svg viewBox="0 0 32 32" id="common--stop"><path d="M16 2C8.27 2 2 8.27 2 16s6.27 14 14 14 14-6.27 14-14S23.73 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/><path d="M11 11h10v10H11z"/></svg><svg viewBox="0 0 32 32" id="common--tile-view"><path d="M19 3h10v10H19z"/><path d="M17 3H3v26h26V15H17V3zm-2 24H5V17h10v10zm12-10v10H17V17h10zM5 15V5h10v10H5z"/></svg><svg viewBox="0 0 7.3 11.8" id="old--arrow-left"><path d="M7.3 1.5L2.9 5.9l4.4 4.4-1.5 1.5L0 5.9 5.8 0z"/></svg><svg viewBox="0 0 7.3 11.8" id="old--arrow-right"><path d="M0 1.5l4.4 4.4L0 10.3l1.5 1.5 5.8-5.9L1.5 0z"/></svg><svg viewBox="0 0 7.5 3.8" id="old--caret"><path fill="#94A3AB" d="M0 0h7.5L3.8 3.8z"/></svg><svg viewBox="0 0 960 560" id="old--runtime-rb"><path fill="#8CC63F" d="M155.4 375.6h88.7v85.6h-88.7v-85.6zM301.8 171.7H378v52.9h1.6c15.6-35.8 52.9-62.3 91.9-62.3 6.2 0 12.5 1.6 17.1 3.1v74.7c-7.8-1.6-18.7-3.1-28-3.1-59.2 0-77.8 42-77.8 93.4v130.8h-79.4V171.7h-1.6zM525.9 61.1h79.4v146.3h1.6c20.2-29.6 56-43.6 91.9-43.6 57.6 0 119.9 46.7 119.9 152.6S756.4 469 698.8 469c-42 0-77.8-12.5-95-45.1h-1.6v37.4h-76.3V61.1zM670.7 223c-46.7 0-68.5 43.6-68.5 93.4 0 48.3 20.2 91.9 68.5 91.9 46.7 0 68.5-43.6 68.5-91.9 0-49.8-21.8-93.4-68.5-93.4z"/></svg><svg viewBox="0 0 18 18" id="service--add-filled"><title>plus-round</title><g fill="none" fill-rule="evenodd"><path d="M9.02.52a8.5 8.5 0 1 0 .002 17.002 8.5 8.5 0 0 0 0-17" fill="#5596E6"/><path d="M8.414 4.728v3.686H4.728v1.214h3.686v3.686h1.214V9.628h3.686V8.414H9.628V4.728H8.414z" fill="#FFF"/></g></svg><svg viewBox="0 0 15 13" id="service--back"><title>back</title><path d="M3.435 5.556H14.41V7.14H3.434l4.338 4.21-1.138 1.12-5.49-5.33H.93v-.205l-.358-.347.243-.24-.243-.24.358-.347v-.204h.21L6.635.226l1.138 1.12-4.337 4.21z" fill="#5596E6" fill-rule="evenodd"/></svg><svg viewBox="0 0 8 12" id="service--chevron"><title>Imported Layers Copy</title><path d="M.286 1.265L4.846 6l-4.56 4.735L1.504 12l5.782-6-5.782-6L.286 1.265z" fill="#94A3AB" fill-rule="evenodd"/></svg><svg viewBox="0 0 8 5" id="service--down-arrow"><title>arrow-small copy</title><path d="M7.5.5h-7l3.5 4 3.5-4z" fill="#94A3AB" fill-rule="evenodd"/></svg><svg viewBox="0 0 25 20" id="service--logsLink"><title>Imported Layers Copy 2</title><g fill="#5294E9" fill-rule="evenodd"><path d="M0 19.706h24.632V0H0v19.706zm1.642-14.78H22.99v13.137H1.642V4.926z"/><path d="M14.54 14.54l5.166-5.168v3.765h1.642V6.57h-6.57v1.64h3.767l-5.167 5.168 1.16 1.16"/></g></svg><svg id="service--status-complete" viewBox="0 0 16 16"><style>.st0{fill:#ff5050}.st1{fill:#efc100}.st2{fill:#8cd211}.st3{fill:#6d7777}.bist4{fill:#5596e6}.st5{fill:#be9b00}.st6{fill:#94a3ab}.st7{fill:#5aa700}.st8{fill:#FFF}</style><path class="bist4" d="M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-2C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path class="bist4" d="M6.9 9.3L5 7.4l-.8.8 2.7 2.7 4.9-5-.8-.8z"/></svg><svg viewBox="0 0 18 18" id="service--status-error"><title>status-error</title><g fill="none" fill-rule="evenodd"><path d="M9 0a9 9 0 1 0 0 18A9 9 0 0 0 9 0" fill="#FB3740"/><path d="M11.76 5.33L9 8.09 6.24 5.33l-.91.91L8.09 9l-2.76 2.76.91.91L9 9.91l2.76 2.76.91-.91L9.91 9l2.76-2.76-.91-.91z" fill="#FFF"/></g></svg><svg id="service--status-initializing" viewBox="0 0 16 16"><style>.bkst0{fill:#ff5050}.st1{fill:#efc100}.st2{fill:#8cd211}.st3{fill:#6d7777}.st4{fill:#5596e6}.st5{fill:#be9b00}.st6{fill:#94a3ab}.st7{fill:#5aa700}.st8{fill:#FFF}</style><path class="bkst0" d="M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-2C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><path class="bkst0" d="M7 5.5h2v5H7z"/></svg><svg id="service--status-paused" viewBox="0 0 16 16"><style>.st0{fill:#ff5050}.st1{fill:#efc100}.st2{fill:#8cd211}.blst3{fill:#6d7777}.st4{fill:#5596e6}.st5{fill:#be9b00}.st6{fill:#94a3ab}.st7{fill:#5aa700}.st8{fill:#FFF}</style><path class="blst3" d="M5.5 5.5h2v5h-2zM8.5 5.5h2v5h-2z"/><g><path class="blst3" d="M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-2C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/></g></svg><svg viewBox="0 0 18 18" id="service--status-pending"><title>status-pending</title><g fill="none" fill-rule="evenodd"><path d="M9 0a9 9 0 1 0 0 18A9 9 0 0 0 9 0" fill="#EFC100"/><path d="M8.357 13.5h1.688v-9H8.357v9z" fill="#FFF"/></g></svg><svg id="service--status-running" viewBox="0 0 16 16"><style>.st0{fill:#ff5050}.st1{fill:#efc100}.st2{fill:#8cd211}.st3{fill:#6d7777}.st4{fill:#5596e6}.st5{fill:#be9b00}.st6{fill:#94a3ab}.bnst7{fill:#5aa700}.st8{fill:#FFF}</style><path class="bnst7" d="M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-2C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z"/><circle class="bnst7" cx="4.8" cy="8.3" r="1.1"/><circle class="bnst7" cx="8" cy="8.3" r="1.1"/><circle class="bnst7" cx="11.2" cy="8.3" r="1.1"/></svg><svg id="service--status-scheduled" viewBox="0 0 16 16"><style>.st0{fill:#ff5050}.st1{fill:#efc100}.st2{fill:#8cd211}.st3{fill:#6d7777}.st4{fill:#5596e6}.bost5{fill:#be9b00}.st6{fill:#94a3ab}.st7{fill:#5aa700}.st8{fill:#FFF}</style><path class="bost5" d="M8.4 9.2c-.1.2-.3.3-.5.4-.2.2-.4.3-.6.4-.4.3-.7.6-.9 1-.3.4-.4.8-.4 1.3h4v-.9H7.1c0-.1.1-.3.2-.4.1-.1.2-.2.4-.3.1-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.2.3-.3.5-.4.2-.1.3-.3.4-.4.1-.2.2-.3.3-.5.1-.3.1-.5.1-.7 0-.2 0-.4-.1-.6 0-.2-.1-.4-.3-.6-.1-.2-.3-.4-.6-.5-.2-.1-.5-.1-.9-.1-.3 0-.6.1-.9.2-.2 0-.4.2-.6.4-.2.2-.3.4-.4.7-.1.3-.1.6-.1.9h1c0-.2 0-.4.1-.6 0-.2.1-.3.2-.5l.3-.3c.1-.1.3-.1.5-.1s.4 0 .5.1l.3.3c-.1.1 0 .2 0 .4v.3c0 .2 0 .4-.1.6-.1.2-.3.4-.5.5z"/><path class="bost5" d="M1 1v14h14V1H1zm12.2 12.2l-10.4.1V5.4l10.5-.1v7.9z"/></svg><svg viewBox="0 0 18 18" id="service--status-success"><title>status-success</title><g fill="none" fill-rule="evenodd"><path d="M9 0a9 9 0 1 0 0 18A9 9 0 0 0 9 0z" fill="#00B4A0"/><path d="M7.714 10.662L5.597 8.545l-.91.91 3.027 3.026 5.598-5.597-.91-.91-4.688 4.69" fill="#FFF"/></g></svg><svg viewBox="0 0 43 45" id="taxonomy--app-services"><title>Fill 1 + Fill 2 + Fill 3</title><g fill="#5AAAFA" fill-rule="evenodd"><path d="M21.22 26.57c-.424 0-.842-.112-1.21-.322L1.44 15.624A2.37 2.37 0 0 1 .23 13.55c-.002-.864.448-1.64 1.203-2.075L19.866.862A2.48 2.48 0 0 1 22.29.858l18.572 10.624a2.37 2.37 0 0 1 1.21 2.072 2.37 2.37 0 0 1-1.204 2.077L22.436 26.245a2.44 2.44 0 0 1-1.216.325zM21.082 1.73c-.214 0-.424.057-.61.164L2.04 12.51a1.19 1.19 0 0 0-.604 1.04c0 .433.228.82.607 1.038l18.57 10.624a1.225 1.225 0 0 0 1.217-.002l18.43-10.613c.38-.218.605-.607.605-1.04 0-.435-.227-.823-.606-1.04L21.687 1.895a1.223 1.223 0 0 0-.606-.162z"/><path d="M21.22 35.742c-.42 0-.836-.107-1.21-.32L1.5 24.834a2.366 2.366 0 0 1-1.208-2.096 2.368 2.368 0 0 1 1.244-2.076l1.22-.672a.605.605 0 0 1 .822.232.595.595 0 0 1-.235.814l-1.22.67c-.388.214-.62.603-.624 1.042-.005.438.22.83.605 1.05l18.51 10.588c.373.213.84.213 1.215-.002l18.376-10.58c.382-.22.608-.614.604-1.052a1.185 1.185 0 0 0-.625-1.038l-1.233-.678a.596.596 0 0 1-.235-.813.606.606 0 0 1 .82-.233l1.234.677a2.368 2.368 0 0 1 1.247 2.072 2.367 2.367 0 0 1-1.204 2.097L22.436 35.42a2.436 2.436 0 0 1-1.216.322"/><path d="M21.22 45.016c-.42 0-.836-.107-1.21-.32L1.44 34.073A2.37 2.37 0 0 1 .23 32c-.002-.866.448-1.642 1.203-2.077l1.314-.756a.605.605 0 0 1 .825.217c.168.285.07.65-.22.817l-1.312.757a1.188 1.188 0 0 0-.604 1.04c0 .434.228.823.607 1.04l18.57 10.623c.375.214.84.214 1.216-.002l18.43-10.613c.38-.218.605-.607.605-1.04 0-.435-.227-.823-.606-1.04l-1.317-.752a.595.595 0 0 1-.22-.817.607.607 0 0 1 .823-.22l1.316.753a2.368 2.368 0 0 1 1.21 2.073c0 .865-.45 1.64-1.204 2.076L22.436 44.69a2.43 2.43 0 0 1-1.217.324"/></g></svg><svg viewBox="0 0 31 46" id="taxonomy--cognitive"><title>Imported Layers</title><path d="M15.466 1C7.476 1 1 7.18 1 14.803c0 3.787 2.004 7.423 4.81 10.187 3.32 3.272 4.108 5.538 4.108 8.114v2.063h11.097v-2.063c0-2.576.79-4.842 4.11-8.114 2.803-2.764 4.807-6.4 4.807-10.187C29.932 7.18 23.456 1 15.466 1m-5.123 37.632h10.293m-10.293 3.086h10.293m-8.528 3.087h6.763" stroke-linecap="round" stroke="#5AAAFA" stroke-width="1.3" fill="none" fill-rule="evenodd"/></svg><svg viewBox="0 0 46 44" id="taxonomy--compute"><title>Imported Layers</title><g fill="#5AAAFA" fill-rule="evenodd"><path d="M41.545 6.033c0-.697-.597-1.262-1.335-1.262-.736 0-1.334.566-1.334 1.263 0 .696.598 1.26 1.334 1.26.738 0 1.335-.564 1.335-1.26M41.545 37.503c0-.696-.597-1.26-1.335-1.26-.736 0-1.334.564-1.334 1.26 0 .696.598 1.26 1.334 1.26.738 0 1.335-.564 1.335-1.26M41.545 21.768c0-.697-.597-1.262-1.335-1.262-.736 0-1.334.565-1.334 1.262 0 .696.598 1.26 1.334 1.26.738 0 1.335-.564 1.335-1.26"/><path d="M45.343 43.312H.997c-.334 0-.605-.256-.605-.572V32.265c0-.316.27-.57.605-.57h44.346c.334 0 .605.254.605.57V42.74c0 .316-.27.572-.605.572zM1.603 42.17h43.134v-9.333H1.602v9.332zM45.343 27.577H.997c-.334 0-.605-.256-.605-.572V16.53c0-.316.27-.572.605-.572h44.346c.334 0 .605.256.605.572v10.475c0 .316-.27.572-.605.572zm-43.74-1.143h43.134v-9.332H1.602v9.332zM45.343 11.842H.997c-.334 0-.605-.256-.605-.572V.795c0-.315.27-.57.605-.57h44.346c.334 0 .605.255.605.57V11.27c0 .316-.27.572-.605.572zM1.603 10.7h43.134V1.366H1.602V10.7z"/></g></svg><svg viewBox="0 0 45 42" id="taxonomy--data"><title>Imported Layers</title><g fill="#5AAAFA" fill-rule="evenodd"><path d="M44 11.505H1.153c-.324 0-.585-.248-.585-.552 0-.305.26-.553.584-.553H44c.322 0 .584.248.584.553 0 .304-.262.552-.585.552"/><path d="M44 41.868H1.154c-.323 0-.585-.247-.585-.552V.83c0-.304.262-.55.585-.55H44c.322 0 .584.246.584.55v40.486c0 .305-.262.552-.585.552zM1.74 40.764h41.675V1.384H1.74v39.38z"/><path d="M28.75 31.747c-.098 0-.198-.023-.29-.073L10.418 21.91l-8.82 9.646a.61.61 0 0 1-.824.057.532.532 0 0 1-.06-.78l9.134-9.988a.61.61 0 0 1 .732-.118l18.002 9.74 14.942-19.835a.606.606 0 0 1 .814-.13.533.533 0 0 1 .138.77L29.228 31.516a.597.597 0 0 1-.477.232"/></g></svg><svg viewBox="0 0 45 43" id="taxonomy--devops"><title>Imported Layers</title><g fill="#5AAAFA" fill-rule="evenodd"><path d="M44.303 42.152H33.476c-.328 0-.592-.25-.592-.56V21.135c0-.31.264-.56.592-.56h10.827c.327 0 .592.25.592.56v20.46c0 .308-.265.558-.593.558zm-10.235-1.12h9.642v-19.34h-9.642v19.34zM19.763 11.463a.62.62 0 0 1-.296-.075.554.554 0 0 1-.296-.484V.674c0-.2.114-.385.297-.485.183-.1.41-.1.592 0l9.375 5.113c.183.1.296.285.296.485s-.112.385-.295.485l-9.376 5.115a.62.62 0 0 1-.297.075zm.592-9.82v8.292l7.6-4.147-7.6-4.145z"/><path d="M6.41 27.345c-.327 0-.592-.25-.592-.56V5.79c0-.31.265-.56.592-.56h13.353c.327 0 .592.25.592.56 0 .308-.265.558-.592.558H7.003v20.437c0 .31-.265.56-.593.56M6.41 42.153c-3.31 0-6.004-2.545-6.004-5.674 0-3.13 2.694-5.676 6.005-5.676 3.312 0 6.005 2.546 6.005 5.675 0 3.128-2.693 5.673-6.004 5.673zm0-10.23c-2.657 0-4.82 2.044-4.82 4.556 0 2.51 2.163 4.554 4.82 4.554 2.658 0 4.82-2.043 4.82-4.555 0-2.513-2.162-4.557-4.82-4.557z"/><path d="M28.63 37.038H11.824c-.327 0-.592-.25-.592-.56 0-.31.265-.56.592-.56H28.63c.328 0 .593.25.593.56 0 .31-.265.56-.593.56zm10.26-15.345c-.327 0-.59-.25-.59-.56V6.35h-4.23c-.33 0-.594-.252-.594-.56 0-.31.265-.56.593-.56h4.82c.328 0 .593.25.593.56v15.343c0 .31-.265.56-.593.56z"/></g></svg><svg viewBox="0 0 46 46" id="taxonomy--home"><title>Imported Layers</title><defs><linearGradient x1="15.349%" y1="12.737%" x2="81.302%" y2="81.592%" id="bva"><stop stop-color="#5AAAFA" offset="0%"/><stop stop-color="#00B299" offset="100%"/></linearGradient></defs><path d="M789.52 307.965a.647.647 0 0 1-.645-.646v-15.556c0-.354.252-.79.56-.967l10.706-6.16c.308-.177.812-.177 1.12 0l10.706 6.16c.307.177.56.613.56.967v15.555c0 .354-.29.645-.646.645h-22.36zm32.89-10.26c0 11.987-9.718 21.705-21.705 21.705-11.987 0-21.705-9.718-21.705-21.705 0-11.987 9.718-21.705 21.705-21.705 11.987 0 21.705 9.718 21.705 21.705z" transform="translate(-778 -275)" stroke="url(#bva)" stroke-width="1.5" fill="none" fill-rule="evenodd"/></svg><svg viewBox="0 0 46 40" id="taxonomy--integration"><title>Imported Layers</title><path d="M11.96 39.23L1 20.117 11.96 1h21.92l10.96 19.116L33.88 39.23H11.96zm0 0L33.88 1 11.96 39.23zm0-38.23l21.695 38.23L11.96 1zM1 20.116h43.84H1z" stroke="#5AAAFA" stroke-width="1.3" fill="none" fill-rule="evenodd"/></svg><svg viewBox="0 0 47 47" id="taxonomy--iot"><title>Stroke 2</title><path d="M21.76 23.456c0 1.033.826 1.87 1.845 1.87 1.018 0 1.845-.837 1.845-1.87 0-1.032-.827-1.87-1.845-1.87-1.02 0-1.846.838-1.846 1.87zm3.075 7.434c-4.05.688-7.884-2.08-8.563-6.187-.68-4.104 2.052-7.99 6.102-8.68 4.05-.688 7.883 2.08 8.563 6.186.68 4.104-2.052 7.99-6.102 8.68zm-.616 7.433c-8.1.344-14.94-6.032-15.28-14.243-.34-8.21 5.95-15.145 14.05-15.49 8.1-.344 14.94 6.032 15.28 14.244.34 8.21-5.95 15.144-14.05 15.49zm21.383-14.867c0 12.315-9.85 22.3-21.998 22.3-12.15 0-22-9.985-22-22.3 0-12.316 9.85-22.298 22-22.298s21.998 9.982 21.998 22.298z" stroke-linecap="round" stroke="#5AAAFA" stroke-width="1.3" fill="none" fill-rule="evenodd"/></svg><svg viewBox="0 0 45 45" id="taxonomy--media-cdn"><title>Group</title><g fill="#5AAAFA" fill-rule="evenodd"><path d="M22.68 44.82C10.387 44.82.385 34.818.385 22.523S10.386.226 22.68.226c12.296 0 22.298 10.002 22.298 22.297S34.976 44.82 22.68 44.82zm0-43.41C11.04 1.41 1.57 10.882 1.57 22.523c0 11.64 9.472 21.113 21.113 21.113 11.643 0 21.114-9.472 21.114-21.113 0-11.64-9.47-21.113-21.113-21.113z"/><path d="M16.387 43.605l-.813-.862L26.59 32.35c.4-.376.488-.973.215-1.45L18.47 16.43a2.356 2.356 0 0 1 .437-2.91l5.76-5.385c.405-.378.494-.976.217-1.455l-3.208-5.557L22.702.53l3.208 5.557c.553.96.375 2.157-.434 2.913l-5.76 5.385a1.177 1.177 0 0 0-.22 1.454l8.334 14.47c.55.954.374 2.147-.427 2.903L16.387 43.605"/><path d="M12.335 41.617l-1.024-.594 3.832-6.625c.21-.365.21-.82 0-1.183l-2.08-3.606a2.358 2.358 0 0 1 .427-2.908l3.15-2.963c.4-.38.49-.977.214-1.453l-2.352-4.07a1.184 1.184 0 0 0-1.023-.592H7.756c-.84 0-1.625-.452-2.047-1.18l-2.47-4.25 1.024-.595 2.47 4.252c.21.363.603.59 1.023.59h5.722c.842 0 1.627.452 2.05 1.182l2.35 4.07c.55.955.375 2.15-.43 2.908l-3.15 2.962c-.4.377-.49.975-.214 1.453l2.082 3.606c.422.73.422 1.637 0 2.367l-3.833 6.627M44.14 26.03h-4.076c-.844 0-1.63-.453-2.05-1.185l-3.465-6.02a2.375 2.375 0 0 1 0-2.36l4.46-7.772 1.027.59-4.462 7.772c-.21.364-.21.815 0 1.178l3.465 6.02c.21.367.603.594 1.024.594h4.075v1.184"/></g></svg><svg viewBox="0 0 42 41" id="taxonomy--mobile"><title>Imported Layers</title><path d="M16.454 20.455c0 2.557 2.017 4.63 4.507 4.63 2.49 0 4.508-2.073 4.508-4.63s-2.018-4.63-4.507-4.63c-2.49 0-4.506 2.073-4.506 4.63zm15.452 0c0 2.557 2.018 4.63 4.507 4.63 2.49 0 4.507-2.073 4.507-4.63s-2.018-4.63-4.507-4.63c-2.49 0-4.507 2.073-4.507 4.63zM1 20.455c0 2.557 2.018 4.63 4.507 4.63 2.49 0 4.507-2.073 4.507-4.63s-2.018-4.63-4.507-4.63c-2.49 0-4.507 2.073-4.507 4.63zM16.454 5.63c0 2.558 2.017 4.632 4.507 4.632 2.49 0 4.508-2.074 4.508-4.63C25.468 3.073 23.45 1 20.96 1c-2.49 0-4.506 2.074-4.506 4.63zm15.452 0c0 2.558 2.018 4.632 4.507 4.632 2.49 0 4.507-2.074 4.507-4.63C40.92 3.073 38.902 1 36.413 1c-2.49 0-4.507 2.074-4.507 4.63zM1 5.63c0 2.558 2.018 4.632 4.507 4.632 2.49 0 4.507-2.074 4.507-4.63C10.014 3.073 7.996 1 5.507 1 3.017 1 1 3.074 1 5.63zm15.454 29.65c0 2.557 2.017 4.63 4.507 4.63 2.49 0 4.508-2.073 4.508-4.63 0-2.558-2.018-4.63-4.507-4.63-2.49 0-4.506 2.072-4.506 4.63zm15.452 0c0 2.557 2.018 4.63 4.507 4.63 2.49 0 4.507-2.073 4.507-4.63 0-2.558-2.018-4.63-4.507-4.63-2.49 0-4.507 2.072-4.507 4.63zM1 35.28c0 2.557 2.018 4.63 4.507 4.63 2.49 0 4.507-2.073 4.507-4.63 0-2.558-2.018-4.63-4.507-4.63C3.017 30.65 1 32.72 1 35.28z" stroke="#5AAAFA" stroke-width="1.3" fill="none" fill-rule="evenodd"/></svg><svg viewBox="0 0 47 47" id="taxonomy--network"><title>Stroke 1 + Stroke 3</title><g transform="translate(1 1)" stroke="#5AAAFA" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M17.97 4.705c0 2.57 2.06 4.656 4.6 4.656 2.543 0 4.602-2.084 4.602-4.655 0-2.57-2.06-4.655-4.6-4.655-2.543 0-4.603 2.085-4.603 4.655zM.236 40.58c0 2.57 2.06 4.654 4.603 4.654 2.54 0 4.6-2.085 4.6-4.655 0-2.572-2.06-4.656-4.6-4.656-2.542 0-4.603 2.084-4.603 4.655zm35.463 0c0 2.57 2.06 4.654 4.603 4.654 2.54 0 4.6-2.085 4.6-4.655 0-2.572-2.06-4.656-4.6-4.656-2.542 0-4.603 2.084-4.603 4.655z"/><path d="M22.57 9.36v13.282M4.84 35.924V22.642h35.463v13.282" stroke-linecap="round"/></g></svg><svg viewBox="0 0 45 45" id="taxonomy--private-apis"><title>Imported Layers</title><g fill="#BA8FF8" fill-rule="evenodd"><path d="M44.386 44.195H.976a.588.588 0 0 1-.592-.583c0-.323.265-.584.592-.584h43.41c.327 0 .592.26.592.584a.587.587 0 0 1-.592.583M42.612 33.5H2.75c-1.305 0-2.366-1.045-2.366-2.33V2.58C.384 1.297 1.444.25 2.75.25h39.862c1.304 0 2.366 1.046 2.366 2.33v28.59c0 1.285-1.062 2.33-2.366 2.33zM2.75 1.417c-.652 0-1.182.522-1.182 1.164v28.59c0 .642.53 1.163 1.182 1.163h39.862c.65 0 1.182-.52 1.182-1.164V2.58c0-.64-.53-1.163-1.182-1.163H2.75z"/><path d="M19.997 22.186c-.285.17-.683.262-1.157.262-.835 0-1.366-.45-1.366-1.496-.892 1.047-2.088 1.496-3.453 1.496-1.783 0-3.244-.767-3.244-2.71 0-2.19 1.65-2.675 3.32-2.974 1.765-.355 3.302-.205 3.302-1.42 0-1.404-1.177-1.61-2.182-1.61-1.366 0-2.372.412-2.448 1.834h-1.612c.095-2.394 1.954-3.235 4.155-3.235 1.765 0 3.682.392 3.682 2.655v4.974c0 .747 0 1.084.51 1.084.154 0 .324-.038.495-.094v1.234zM17.38 17.23c-1.253.917-4.896.02-4.896 2.394 0 1.048.91 1.422 1.897 1.422 2.126 0 3-1.29 3-2.188V17.23zM21.514 12.557h1.613v1.31h.038c.53-1.067 1.764-1.534 3.13-1.534 3.017 0 4.516 2.355 4.516 5.086 0 2.747-1.48 5.028-4.477 5.028-.986 0-2.466-.374-3.168-1.514h-.038v4.992h-1.613v-13.37zm4.553 1.178c-2.18 0-2.997 1.85-2.997 3.646 0 1.89.872 3.666 3.093 3.666 2.2 0 2.94-1.852 2.94-3.74 0-1.814-.948-3.57-3.036-3.57zM32.442 8.874h1.613v1.944h-1.613V8.874zm0 3.683h1.613v9.666h-1.613v-9.666z"/></g></svg><svg viewBox="0 0 32 45" id="taxonomy--security"><title>Imported Layers</title><g fill="#5AAAFA" fill-rule="evenodd"><path d="M15.96 44.87C7.304 44.87.263 38.14.263 29.865c0-8.272 7.04-15 15.695-15 8.653 0 15.693 6.728 15.693 15 0 8.273-7.04 15.003-15.694 15.003zm0-28.82c-7.972 0-14.457 6.197-14.457 13.816 0 7.62 6.485 13.818 14.456 13.818 7.97 0 14.454-6.198 14.454-13.818 0-7.62-6.484-13.817-14.455-13.817z"/><path d="M18.663 28.54c0-1.4-1.188-2.537-2.654-2.537-1.467 0-2.655 1.136-2.655 2.537 0 1.062.683 1.97 1.652 2.347v4.37c0 .53.448.96 1.002.96.553 0 1.002-.43 1.002-.96v-4.37c.968-.378 1.65-1.285 1.65-2.347M23.47 17.915a.606.606 0 0 1-.62-.592V8.227c0-3.633-3.092-6.588-6.892-6.588-3.8 0-6.892 2.954-6.892 6.587v9.096a.606.606 0 0 1-.62.592.606.606 0 0 1-.618-.592V8.227c0-4.285 3.647-7.772 8.13-7.772 4.484 0 8.13 3.487 8.13 7.772v9.096a.606.606 0 0 1-.618.592"/></g></svg><svg viewBox="0 0 47 44" id="taxonomy--storage"><title>Group</title><g transform="translate(1 1)" stroke="#5AAAFA" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M.212 10.778v4.18c0 2.755 9.98 4.988 22.292 4.988 12.31 0 22.29-2.233 22.29-4.987v-4.182"/><ellipse cx="22.504" cy="4.986" rx="22.291" ry="4.986"/><path d="M.212 21.87v4.18c0 2.754 9.98 4.986 22.292 4.986 12.31 0 22.29-2.232 22.29-4.987v-4.18M.212 32.96v4.18c0 2.754 9.98 4.986 22.292 4.986 12.31 0 22.29-2.232 22.29-4.986v-4.18"/></g></svg></defs></svg>
Raw
text.md

External <use> is not working (no image is appearing):

<svg viewBox="0 0 32 32">
  <use xlink:href="../../images/sprite.svg#service--back"></use>
</svg>

Yet, I check the path, and the path is working (yes, this is a different image):

<img src="../../images/arrow-left.svg" alt="">

The attached defs sprite is what is generated via the gulp task (using svg-sprite)

Am I missing something?

@SaraSoueidan
Copy link

The <defs><svg> should be replaced with a <symbol>, that's the first thing I noticed. Not sure if it will fix it but that's the first thing I noticed.

@SaraSoueidan
Copy link

Also, IE does not support these external SVGs in <use>, just a side note. Can you change the markup and let me know if it works then?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment