SVG icons – The new old kid on the block

View Github Repository Open presentation in a new window

herrweis

See all presentation from herrweis

SVG icons – The new old kid on the block

0 0

svgtalk

On Github herrweis / svgtalk

SVG icons

The new old kid on the block

All CSS. No JavaScript.

<img src="icon.svg">

.logo {
  background: url(icon.svg);
  background-size: 50px 50px;
}

<object type="image/svg+xml" data="icon.svg">
  Icon <!-- fallback image in CSS -->
</object>

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
</svg>

<symbol> to the rescue!

<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
    <symbol id="icon-map" viewBox="0 0 24 24" aria-labelledby="title-map">
        <title id="title-map">Map icon</title>
        <path d="M-466,419h-2v9h-13v2c0,0.5,0.5,1,1,1h11l4,4v-15C-465,419.5-465.5,419-466,419z"/>
        <path d="M-470,425v-9c0-0.5-0.5-1-1-1h-13c-0.5,0-1,0.5-1,1v14l4-4h10C-470.5,426-470,425.5-470,425z"/>
    </symbol>
</svg>

<svg class="icon white" role="img">
    <use xlink:href="#icon-map"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
    <symbol id="icon-chat" viewBox="-487 413 24 24" aria-labelledby="title-chat">
        <title id="title-chat">Chat</title>
        <path d="M-466,419h-2v9h-13v2c0,0.5,0.5,1,1,1h11l4,4v-15C-465,419.5-465.5,419-466,419z"/>
        <path d="M-470,425v-9c0-0.5-0.5-1-1-1h-13c-0.5,0-1,0.5-1,1v14l4-4h10C-470.5,426-470,425.5-470,425z"/>
    </symbol>
    <symbol id="icon-search" viewBox="0 0 24 24" aria-labelledby="title-search">
        <title id="title-search">Search</title>
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    </symbol>
    <symbol id="icon-map" viewBox="0 0 24 24" aria-labelledby="title-map">
        <title id="title-map">Map</title>
        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
    </symbol>
</svg>

<svg class="icon white" role="img">
    <use xlink:href="#icon-chat"/>
</svg>
<svg class="icon white" role="img">
    <use xlink:href="#icon-search"/>
</svg>
<svg class="icon white" role="img">
    <use xlink:href="#icon-map"/>
</svg>

CSS

(finally)

<svg class="icon colored" role="img">
    <use xlink:href="#icon-map"/>
</svg>

svg path {
  all: inherit;
}
svg.icon.colored {
  fill: #0492f5;
}

<svg class="icon outline" role="img">
    <use xlink:href="#icon-map"/>
</svg>

svg.icon.outline {
  fill: transparent;
  stroke: #fff;
}

svg.icon.outline {
  fill: transparent;
  stroke: #fff;
  transition: all 0.3s;
}
svg.icon.outline:hover {
  fill: #0492f5;
  stroke: transparent;
  transform: scale(1.5);
}

svg.icon.linedrawing {
  fill: rgba(255, 255, 255, 0.5);
  stroke: transparent;
}
svg.icon.linedrawing:hover {
  animation: dash 1s ease-out forwards;
  stroke: #fff;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
@keyframes dash {
  30% { fill: transparent; }
  50% { fill: transparent; }
  100% { fill: #00b095; stroke-dashoffset: 0; }
}

<use> with external resource

<svg class="icon white" role="img">
    <use xlink:href="icons.svg#icon-map"/>
</svg>

github.com/jonathantneal/svg4everybody

github.com/jkphl/svg-sprite

Thank you!

twitter.com/andi_weis

SVG icons The new old kid on the block