iegik
8/30/2017 - 8:52 AM

Vector Graphics

SVG sprites, tools and more

test.html
content_copyfile_download
<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>
sprite.svg
content_copyfile_download
  • Rendered
  • Source
VECTOR_GRAPHICS.md
content_copyfile_download
  • Rendered
  • Source

Vector Graphics

Tools:

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: