SVG sprites, tools and more

sprite.svg

test.html

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" fill="currentColor">
    <defs>
        <style>
            g { display: none }
            g:target { display: inline }
        </style>
        <symbol id="s-heart" viewBox="0 0 100 87">
            <path d="M100,35c0-13-11-25-25-25s-25,12-25,18c0-5-11-18-25-18s-25,11-25,25c0,20,36,49,50,62,14-14,50-43,50-62z"/>
        </symbol>
    </defs>
    <g id="icon-heart">
        <use xlink:href="#s-heart" />
    </g>
</svg>

<svg class="icon icon-heart icon-heart--red">
    <use xlink:href="#s-heart" />
</svg>

<svg class="icon icon-heart icon-heart--red icon--hue">
    <use xlink:href="#s-heart" />
</svg>

<svg class="icon icon-heart icon-heart--blue">
    <use xlink:href="sprite.svg#icon-heart" />
</svg>

<i class="icon icon-heart icon-heart--green"></i>

<i class="icon icon-heart icon-heart--yellow"></i>

<style>
    .icon-heart--red {
        color: red;
    }
    .icon-heart--blue {
        color: blue;
    }
    .icon {
        display: inline-flex;
        content: "";
    }
    .icon-heart {
        width: 100px;
        height: 110px;
    }
    .icon-heart--green {
        -webkit-mask: url('sprite.svg#icon-heart') no-repeat 50% 50%;
        mask: url('sprite.svg#icon-heart') no-repeat 50% 50%;
        background-color: green;
    }

    /* Not work */
    .icon-heart--yellow {
        -webkit-mask: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="sprite.svg#icon-heart"/></svg>') no-repeat 50% 50%;
        mask: url('data:image/svg+xml;charset=utf8,<svg><use xlink:href="sprite.svg#icon-heart"/></svg>') no-repeat 50% 50%;
        background-color: yellow;
    }
</style>

VECTOR_GRAPHICS.md

Vector Graphics

Tools:

• https://figma.com
• https://inkscape.org/

SVG sprites

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" fill="currentColor">
    <defs>
        <style>
            g { display: none }
            g:target { display: inline }
        </style>
        <symbol id="s-heart" viewBox="0 0 100 87">
            <path d="M100,35c0-13-11-25-25-25s-25,12-25,18c0-5-11-18-25-18s-25,11-25,25c0,20,36,49,50,62,14-14,50-43,50-62z"/>
        </symbol>
    </defs>
    <g id="icon-heart">
        <use xlink:href="#s-heart" />
    </g>
</svg>

• Use <symbol> tag with viewBox, to enshure we do not need add viewBox in <use> tag

• Define symbols in <defs>, so you can reuse paths in groups

• Add few styles to show/hide active image group:

<style>
    g { display: none }
    g:target { display: inline }
</style>

• You can include icon inline with '' tag:

<svg class="icon icon-heart icon-heart--red">
    <use xlink:href="#s-heart" />
</svg>

• You can set background in css:

.icon {
    background-color: red;
    -webkit-mask:  url(sprite.svg#icon-heart) no-repeat 50% 50%;
    mask: url(sprite.svg#icon-heart) no-repeat 50% 50%;
}

• Also, add some filters:

.icon--hue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

• Add fill="currentColor", stroke="currentColor" where you want to use css color property and do not add where you want use css fill or stroke property:

<g>
  <g fill="currentColor"></g> <!-- uses color css property for fill color -->
  <g stroke="currentColor"></g> <!-- uses color css property for stroke color -->
  <g></g> <!-- uses fill css property for fill color and stroke css property for stroke color -->
</g>

• More colors!

.icon--colored {
  --primary-color: #0099CC;
  --secondary-color: #FFDF34;
  --tertiary-color: #333;
}

responsiveness

• Add preserveAspectRatio="xMidYMid meet" attribute, remove width, height, leave viewBox

svg {
  height: XXX;
  width: auto;
  min-width: auto;
  max-width: 100%;
}

---

Thanks to:

• https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
• https://css-tricks.com/probably-dont-base64-svg/
• https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
• https://ux.shopify.com/responsive-multicolor-svg-icons-b9068594b97b