--- tags: ironhack --- <style> .markdown-body img[src$=".png"] {background-color:transparent;} .alert-info.lecture, .alert-success.lecture, .alert-warning.lecture, .alert-danger.lecture { box-shadow:0 0 0 .5em rgba(64, 96, 85, 0.4); margin-top:20px;margin-bottom:20px; position:relative; ddisplay:none; } .alert-info.lecture:before, .alert-success.lecture:before, .alert-warning.lecture:before, .alert-danger.lecture:before { content:"👨‍🏫\A"; white-space:pre-line; display:block;margin-bottom:.5em; /*position:absolute; right:0; top:0; margin:3px;margin-right:7px;*/ } b { --color:yellow; font-weight:500; background:var(--color); box-shadow:0 0 0 .35em var(--color),0 0 0 .35em; } .skip { opacity:.4; } </style> ![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) # CSS | SVG sprite ## Definition `icons.svg` : ```html <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; width:0; height:0; visibility:hidden;"> <symbol id="hamburger" viewBox="0 0 500 500"> <!-- code SVG du hamburger --> </symbol> </svg> ``` Or drag-n-drop SVG files to https://svgsprit.es ![](https://i.imgur.com/xkZInLo.png) ## Usage ```html <svg role="img" class="icon"> <use xlink:href="icons.svg#hamburger" /> </svg> ``` ```css svg.icon { width:1em; height:1em; fill:currentColor; } ``` For IE11 and below, see: https://github.com/jonathantneal/svg4everybody ## Troubleshooting On `file://` you should have an error in console : ``` Unsafe attempt to load URL file:///Users/abernier/code/lab-yumyum/starter-code/icons.svg#hamburger from frame with URL file:///Users/abernier/code/lab-yumyum/starter-code/index.html. 'file:' URLs are treated as unique security origins ``` This is a security restriction. Workarounds are: - Include content of `icons.svg` directly to your `head`: ```html <head> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; width:0; height:0; visibility:hidden;"> <symbol id="hamburger" viewBox="0 0 500 500"> <!-- code SVG du hamburger --> </symbol> </svg> </head> ``` and change the `xlink:href` value: ```html <svg role="img" class="icon"> <use xlink:href="#hamburger" /> </svg> ``` - use HTTP server (for example, you could use: [Live Server VScode extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)