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

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

Transcript

1. SVGεϓϥΠτΛ࢖͍͜ͳͦ͏ ελδΦɾΞϧΧφ ಙӬ ༏ࢠ
2. ࣗݾ঺հ ಙӬ༏ࢠ 2013೥4݄ະܦݧͰελδΦɾΞϧΧφʹδϣΠϯɻ σβΠϯ΍σΟϨΫγϣϯΛܦݧͯ͠ɺ 2016೥1݄͔ΒϚʔΫΞοϓΤϯδχΞɻ Ѫ༻ΤσΟλɿATOM
3. SVGͱ͸
4. SVGͷ֓ཁ Scalable Vector Graphicsͷ಄จࣈΛͱͬͨ΋ ͷͰɺXMLϕʔεͷը૾ϑΥʔϚοτɻ IE9Ҏ͕߱ରԠɻ
5. • imgλά • object, embed, iframeλά • CSS background, contentϓϩύςΟ • inline SVG SVGͷදࣔํ๏
6. • imgλά • ৭ͷมߋ͕Ͱ͖ͳ͍ɺΞχϝʔγϣϯ͕Ͱ͖ͳ͍ • object, embed, iframeλά • ϦϯΫʹͰ͖ͳ͍ • CSS background, contentϓϩύςΟ • αΠζͷมߋ͕೉͍͠ Կ͕ҧ͏ͷʁ
7. inline SVG ສೳʂʂʂ
8. SVGεϓϥΠτͱ͸
9. SVGεϓϥΠτͷ֓ཁ ෳ਺ͷSVGը૾Λ1ͭͷϑΝΠϧʹ֨ೲͯ͠ݸ ผʹݺͼग़ͯ͠දࣔͤ͞Δํ๏ɻCSSεϓϥ ΠτͷSVG൛ɻ
10. SVGεϓϥΠτͷϝϦοτ ɾΞΠίϯϑΥϯτɺCSSεϓϥΠτΑΓ͍ܰ ɾϝϯςφϒϧʂʂʂ
11. SVGεϓϥΠτΛ࢖͍͜ͳͦ͏
12. ཁૉ͝ͱʹ৭Λ੾Γସ͑Δ
13. PCͱSPͰ੾Γସ͑Δ
14. iOSͱAndroidͰ੾Γସ͑Δ
15. 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>
16. 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ΛৼΓ෼͚͓ͯ͘
17. 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> . . .
18. SVGεϓϥΠτΛ࢖͍͜ͳͦ͏
19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠