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
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
460
「UXとUIの違い」v2
shirasu3
0
220
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
560
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
550
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
160
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
420
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
390
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
610
7 Core Values of Round-L
wired888
0
1.5k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
26
1.8k
Fireside Chat
paigeccino
39
3.6k
Six Lessons from altMBA
skipperchong
28
4k
Gamification - CAS2011
davidbonilla
81
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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εϓϥΠτΛ͍͜ͳͦ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠