SVG dynamic

by mattscotty

HTML

<div class="dynamicSVG" style="--src:url('http://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg')"><img /></div>
<span>< Hover Me</span>

CSS

body{
  color:green;
  font-size:50px;
}

.dynamicSVG {
    /*
        Allows us to colour SVGs using mask, the colour will follow the text colour
        NOTE: doesn't work well with SVG's with lots of colors as you lose the contrast
    */
    height: 1em;
    min-width: 1em;
    display: inline-block;
    -webkit-mask: var(--src) no-repeat 50% 50%;
    mask: var(--src) no-repeat 50% 50%;
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    vertical-align: middle;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dynamicSVG > img {
    /*
        Here I use an child img element inside the i.dynamicSVG.
        It uses the style SRC variable to remove the need to set the URL twice in HTML, a nice CSS hack.
        We do this to load in the image and ensure the dynamic SVG is the correct size and dimensions...
        Which it wouldn't have been as we're using background + mask for the dynamic icon
        It does mean the image will be called twice, but due to caching it shouldn't be an issue and isnt visible to the user
    */
    content: var(--src);
    height: 100%;
    visibility: hidden;
    /*Ensure the max height isn't overridden*/
    max-height: 100% !important;
    vertical-align:top;
}

.dynamicSVG:hover{
  transform:scale(1.2);
}