Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVGスプライトを使いこなそう
Search
Yuko
November 10, 2016
Design
1
920
SVGスプライトを使いこなそう
2016年11月10日(木)株式会社スタジオ・アルカナ社内勉強会のLTで使ったスライドです。
Yuko
November 10, 2016
Tweet
Share
More Decks by Yuko
See All by Yuko
div要素の正しい使い方
yukosnoopy
20
13k
ARCANA Meetup #24 CSS Review
yukosnoopy
2
2.8k
Other Decks in Design
See All in Design
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
120
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
350
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.2k
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
AI動画生成ガチャ紹介
piyo7
1
110
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2k
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
440
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
360
線で考える画面構成
natsuume
1
870
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Site-Speed That Sticks
csswizardry
10
650
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Statistics for Hackers
jakevdp
799
220k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Faster Mobile Websites
deanohume
307
31k
Producing Creativity
orderedlist
PRO
346
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Transcript
SVGεϓϥΠτΛ͍͜ͳͦ͏ ελδΦɾΞϧΧφ ಙӬ ༏ࢠ
ࣗݾհ ಙӬ༏ࢠ 20134݄ະܦݧͰελδΦɾΞϧΧφʹδϣΠϯɻ σβΠϯσΟϨΫγϣϯΛܦݧͯ͠ɺ 20161݄͔ΒϚʔΫΞοϓΤϯδχΞɻ Ѫ༻ΤσΟλɿATOM
SVGͱ
SVGͷ֓ཁ Scalable Vector Graphicsͷ಄จࣈΛͱͬͨ ͷͰɺXMLϕʔεͷը૾ϑΥʔϚοτɻ IE9Ҏ͕߱ରԠɻ
• imgλά • object, embed, iframeλά • CSS background, contentϓϩύςΟ
• inline SVG SVGͷදࣔํ๏
• imgλά • ৭ͷมߋ͕Ͱ͖ͳ͍ɺΞχϝʔγϣϯ͕Ͱ͖ͳ͍ • object, embed, iframeλά • ϦϯΫʹͰ͖ͳ͍
• CSS background, contentϓϩύςΟ • αΠζͷมߋ͕͍͠ Կ͕ҧ͏ͷʁ
inline SVG ສೳʂʂʂ
SVGεϓϥΠτͱ
SVGεϓϥΠτͷ֓ཁ ෳͷSVGը૾Λ1ͭͷϑΝΠϧʹ֨ೲͯ͠ݸ ผʹݺͼग़ͯ͠දࣔͤ͞Δํ๏ɻCSSεϓϥ ΠτͷSVG൛ɻ
SVGεϓϥΠτͷϝϦοτ ɾΞΠίϯϑΥϯτɺCSSεϓϥΠτΑΓ͍ܰ ɾϝϯςφϒϧʂʂʂ
SVGεϓϥΠτΛ͍͜ͳͦ͏
ཁૉ͝ͱʹ৭ΛΓସ͑Δ
PCͱSPͰΓସ͑Δ
iOSͱAndroidͰΓସ͑Δ
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>
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ΛৼΓ͚͓ͯ͘
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> . . .
SVGεϓϥΠτΛ͍͜ͳͦ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠