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

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠