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
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.6k
Les petites aventures de CSS, saison 2025
goetter
3
4k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
380
Social Anxiety
ksmith2024
0
220
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
260
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
130
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
250
freee + Product Design FY25Q4
freee
4
13k
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
270
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
290
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
190
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Bash Introduction
62gerente
614
210k
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εϓϥΠτΛ͍͜ͳͦ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠