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
900
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
3D空間を扱うUI表現とユーザビリティ
akinen
0
450
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
290
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
330
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
580
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
870
UIをもたらすコンテクストの考察
securecat
9
2.6k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.2k
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Happy Clients
brianwarren
92
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Making Projects Easy
brettharned
108
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Product Roadmaps are Hard
iamctodd
44
9.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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εϓϥΠτΛ͍͜ͳͦ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠