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

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

2ea2cad018d4e65da75be775961826fa?s=47 Yuko
November 10, 2016

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

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

2ea2cad018d4e65da75be775961826fa?s=128

Yuko

November 10, 2016
Tweet

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