Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVGスプライトを使いこなそう

Yuko
November 10, 2016

 SVGスプライトを使いこなそう

2016年11月10日(木)株式会社スタジオ・アルカナ社内勉強会のLTで使ったスライドです。

Yuko

November 10, 2016
Tweet

More Decks by Yuko

Other Decks in Design

Transcript

  1. • imgλά • ৭ͷมߋ͕Ͱ͖ͳ͍ɺΞχϝʔγϣϯ͕Ͱ͖ͳ͍ • object, embed, iframeλά • ϦϯΫʹͰ͖ͳ͍

    • CSS background, contentϓϩύςΟ • αΠζͷมߋ͕೉͍͠ Կ͕ҧ͏ͷʁ
  2. iOSͱAndroidͰ੾Γସ͑Δ <svg style="position: absolute; width: 0; height: 0; overflow: hidden;"

    version="1.1" xmlns="http:// www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol viewBox="0 0 32 32"> <title>໭Δ</title> <g id="icon-back-ios"> <path d="M16 32h2.53l-16-16 16-16h-2.53l-16 16z”/> </g> <g id="icon-back-android"> <path d="M26.688 14.688v2.625h-16.25l7.438 7.5-1.875 1.875-10.688-10.688 10.688-10.688 1.875 1.875-7.438 7.5h16.25z”/> </g> </symbol> </defs> </svg>
  3. iOSͱAndroidͰ੾Γସ͑Δ @mixin iOS { .pf-ios & { @content; } }

    @mixin android { .pf-android & { @content; } } .c-icon { &--ios { @include android { display: none; } } &--android { @include iOS { display: none; } } ˞+4ͰϢʔβʔΤʔδΣϯτͰDMBTTΛৼΓ෼͚͓ͯ͘
  4. iOSͱAndroidͰ੾Γସ͑Δ . . . <svg class="p-navbar__icon p-navbar__icon--back" viewbox="0 0 32

    32"> <use class="c-icon--ios" xlink:href="#icon-back-ios"></use> <use class="c-icon--android" xlink:href="#icon-back-android"></use> </svg> . . .