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
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
190
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
170
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
160
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
320
portfolio.pdf
onof003
0
200
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
Yumika Yamada Portfolio
yumii
0
2.1k
maki setoguchi
maki_setoguchi
0
510
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
810
アクセシビリティに取り組むメリット
magi1125
2
270
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
62
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Six Lessons from altMBA
skipperchong
29
4k
How to train your dragon (web standard)
notwaldorf
97
6.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Context Engineering - Making Every Token Count
addyosmani
8
300
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
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εϓϥΠτΛ͍͜ͳͦ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠