ハマるSVG＠CSS nite LP47

吳䒭⠓爡תר׹׃ 匟歊湫埠

Sublime Text 3 User 吳䒭⠓爡תר׹׃ 匟歊湫埠

8FCⵖ⡲罏ך׋׭ך  *MMVTUSBUPSكؙة٦ر٦ةך侄猰剅 ֮׻ײֹ 瓐加⽆㡦 ♲ꥡٓنꞿ谏㻂ㄤծ㹧愮翯✳ 匟歊湫埠

͸·Δʲቕ·Δɾర·Δɾṇ·Δʳ ᶃ ͽͬͨΓ߹ͬͯ͸͍Δɻ ᶄ ઒ɾ஑ͳͲʹམͪࠐΉɻʮਂΈʹʵɾΔʯʮߔʹʵɾΔʯʮՌ͸आۚͷ෵;ͪ ʹʵɾΓʗුӢ࢛໎ʯ ᶅ ܭུʹ͔͚ΒΕΔɻʮΘͳʹʵɾΔʯʮࢥ͏ͭ΅ʹʵɾΔʯ ᶆ ৚݅ʹͽͬͨΓ߹͏ɻద߹͢Δɻ͋ͯ͸·Δɻʮ໾ʹʵɾ͍ͬͯΔʯ
ᶇ ʢʮܕʹ͸·ΔʯͷܗͰʣߦಈɾදݱͳͲ͕ྨܕతͰ͋Δɻʮܕʹʵɾͬͨจষʯ ʮܕʹʵɾͬͨڭҭʯ ᶈ ઐ೦͢Δɻ·ͨɼເதʹͳͬͯ਎ಈ͖͕ͱΕͳ͘ͳΔɻݱ୅Ͱ΋ଏޠతʹ༻͍Δɻ ʮࠓύιίϯʹʵɾ͍ͬͯΔʯʮੈؒϊࣄχʵɾϧʗ೔෤ʯʮਮΒ͖͠உ͸ʵɾ Βͤʗුੈ૲ࢠɾҰ୅உʯʤʮ͸ΊΔʯʹର͢Δࣗಈࢺʥ େࣙྛୈࡾ൛ΑΓ

47(ח 㣄⚥ח׮ז׸לծ 縐ח׮כת׷

47(ח 㣄⚥ח׮ז׸לծ 縐ח׮ַַ׷

47(ךⵃ欽朐屣

،صً٦ءّٝ ؎ٝةؙٓءّٝ Animation & Interaction

https://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful

https://fleximize.com/mission/

ؽآُ،ٓ؎ئ٦ءّٝ Visualization

http://www.bbc.com/news/politics/eu_referendum/results https://nbremer.github.io/olympicfeathers/

http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/

ٗ؞ Logos

،؎؝ٝ Icons

https://github.com/blog/2112-delivering-octicons-with-svg

https://sarasoueidan.com/blog/icon-fonts-to-svg/

➙㔐כծ崢䩛ז⢪׻׸倯״׶׮  㖑㄂ז⢪׻׸倯דך縐ח岣湡׃ג׫ת׃׳ֲ

׉ך⵸חծ47(ך暴䗙

Standalone SVG )5.- $44 47( )5.- TWH TWH inline SVG
兛鸐ך歗⫷ؿ؋؎ٕה׃ג邌爙ׇׁ׷ )5.-ך⚥חծ47(؝٦س׾湫䱸剅ֻ 兛鸐ך歗⫷ה殯ז׷暴䗙

兛鸐ך歗⫷ה殯ז׷暴䗙 WJFX#PY XJEUI IFJHIU QSFTFSWF"TQFDU3BUJP 䲽歗걄㚖ך䏟垥禸׾㹀纏㹋㼄ך؟؎ؤ䭷㹀䭁簭儗ך،ألؙز嫰⥂䭯倯岀ך䭷㹀

47(ךعو׷ه؎ٝز 1 鼅 0

*&ה"OESPJE⟃♴ד عو׷ 01

JOMJOF47(ך㜥さ JNH銲稆ך㜥さ *& "OESPJEד47(ך嫰桦ֶַָ׃ְ  J04

ז׈ 47(ך넝ׁ٥䌴ָ䭷㹀ׁ׸גְזְ <svg viewBox="0 0 200 200"> … </svg>

ז׈ 47(ך넝ׁ٥䌴ָ䭷㹀ׁ׸גְזְ JOMJOF47(חכ IFJHIUBVUPָ⸬ַזְ QSFTFSWF"TQFDU3BUJPך 䮙⹛חغָؚ֮׷

鍑寸 TWH銲稆חծXJEUI IFJHIU׾QYד䭷㹀 <svg viewBox="0 0 200 200" ɹɹɹwidth="200px" height="200px">
… </svg> * CSSͰͷɺwidth,heightࢦఆͰ΋Մ

鍑寸 "Jךչٖأهٝءـպחثؑحؙ׃זְ

JOMJOF47(ך'MVJE⻉ד  عو׷ 02

*& 4BGBSJדJOMJOF47(ָ'MVJEחז׵זְ TDSFFOXJEUI

ז׈ *&דכծIFJHIUBVUPָ⸬ַזְ svg { height: auto; } QYח  㔿㹀ׁ׸׷ )5.-$BOWBTך➬圫הずׄ

ז׈ 4BGBSJծ$44ָIFJHIU㾩䚍׾馄ִ׵׸זְ svg { height: auto; } QYח  㔿㹀ׁ׸׷ )5.-$BOWBTך➬圫הずׄ
<svg width="200px" height="200px" viewBox="0 0 200 200" style="width: 300px; height: auto"> IFJHIU㾩䚍ָ ⮚⯓ׁ׸׷

鍑寸 QBEEJOHIBDL׃׋EJW銲稆ד㔲ֲ div.svg-container .svg-wrap > svg { display: block; position:
absolute; width: 100%; height: 100%; } .svg-container { position: relative; height:0; padding-top: calc(100%/200*200); } TWH

47(4QSJUFT 47(4UPSF דعو׷ 03

icons.svg index.html Send Mail 47(4QSJUFTָծ邌爙ׁ׸זְװ׋׵ꅾֻז׷ <svg> <use xlink:href="icon.svg#train"/> </svg>

*& &EHFծ㢩鿇47(ַ׵*%⿫撑דֹזְ icons.svg index.html Send Mail ז׈

J04⟃⵸ծ⿫撑׀החؙٔؒأز icons.svg index.html Send Mail ז׈

鍑寸 ،؎؝ٝ欽47(׾ծ)5.-חJOMJOFד㙵׭׷ index.html Send Mail <html> <body> <svg> <symbol id="icon1">…</symbol>
<symbol id="icon2">…</symbol> … </svg> <svg><use xlink:href="icon.svg#icon1"/ ></svg> </body>

J04⟃⵸ծ⿫撑ׅ׷״׶⵸ח㹀纏ָ זְה邌爙ׁ׸זְ ז׈ index.html CPEZךꟗׄةؚך湫⵸ח 47(،؎؝ٝ׾㹀纏׃ג׮ծ ⿫撑דֹזְ㉏겗

鍑寸 47(׾ծ)5.-ךCPEZ湫♴חJOMJOFד㙵׭׷

47( CBDLHSPVOEJNBHFד  عو׷ 04

*&דծCBDLHSPVOETJ[FDPWFSֶַָ׃ֻז׷

鍑寸 TWH銲稆ךQSFTFSWF"TQFDU3BUJP׾㢌刿 <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice"> …
</svg> * σϑΥϧτͰ͸ "xMidYMid meet"

鍑寸 TWH銲稆ךQSFTFSWF"TQFDU3BUJP׾㢌刿 preserveAspectRatio="xMidYMid slice" = background-size: cover; background-position: center center;

[JOEFYדعو׷ 05

JOMJOF47(ךTWH銲稆׾ծ[JOEFYדⵖ䖴דֹזְ 爳㕦礵莔ךꗺך㡮ծ长遤搀䌢ך갟ֹ֮׶կ尩繎⿽埠ך蔃ך葿ծ渿罏䗳邜ך椚׾֮׵כׅկֶ׀׸׷➂׮⛉׃ַ׵׆կ׋׌僰ך㢸ך㣄ך׀ ה׃կ׋ֹֽ罏׮鹴חכק׹ןטծמהפח괏ך⵸ך㞒חずׄկ黅ֻ ך殯劉׾הע׵ִלծ兛ך馠넝ծ恌ך桬蜭ծ咿ךワ⟻ծ㇪ך犡㿊ծ ֿ׸׵כ涺ծ傊⚺⯓涽ך佟ח׮䖞כ׆ծ嚂׃׫׾噰׭ծ镡׭׾׮䙼מ Ⰵ׸׆ծ㣓♴ך✉׸׿ֿה׾䝎׵׆׃גծ孖꟦ך䟴ס׷הֿ׹׾濼׵ ׂא׃ַלծ⛉׃ַ׵׆׃גծ❕ׄח׃罏ו׮ז׶կ z-index: 100;
z-index: 50;

47(ד⢪ִ׷$44فٗػذ؍כ寸ת׏גְ׷ ז׈ www.w3.org/TR/SVG/propidx.html

鍑寸 47(銲稆׾ծ)5.-ך銲稆ד㔲׏גⵖ䖴爳㕦礵莔ךꗺך㡮ծ长遤搀䌢ך갟ֹ֮׶կ尩繎⿽埠ך蔃ך葿ծ渿罏䗳邜ך椚׾֮׵כׅկֶ׀׸׷➂׮⛉׃ַ׵׆կ׋׌僰ך㢸ך㣄ך׀ ה׃կ׋ֹֽ罏׮鹴חכק׹ןטծמהפח괏ך⵸ך㞒חずׄկ黅ֻ ך殯劉׾הע׵ִלծ兛ך馠넝ծ恌ך桬蜭ծ咿ךワ⟻ծ㇪ך犡㿊ծ ֿ׸׵כ涺ծ傊⚺⯓涽ך佟ח׮䖞כ׆ծ嚂׃׫׾噰׭ծ镡׭׾׮䙼מ Ⰵ׸׆ծ㣓♴ך✉׸׿ֿה׾䝎׵׆׃גծ孖꟦ך䟴ס׷הֿ׹׾濼׵ ׂא׃ַלծ⛉׃ַ׵׆׃גծ❕ׄח׃罏ו׮ז׶կ z-index:
100; z-index: 50; EJW

47(ךذؗأزדعو׷ 06

$ISPNFדծ47(簭㼭儗חذؗأزָֻ׆׸׷

剑㼭ؿؓٝز؟؎ؤ鏣㹀ָ剣⸬׌ַ׵ ז׈

鍑寸 ذؗأز׾،ؐزٓ؎ٝ⻉ׅ׷ ׋׌׃ծ  ؿ؋؎ٕ؟؎ؤָ慧㟓ׅ׷ךדծ ؽحزوحف⻉ָكة٦ַ׮

㺘滠ׇׁ׋ػأךꥴ꟦ד عو׷ 07

נ׏׋׶ֻ׏אְגְ׷כ׆ךػأず㡦ծ ז׈ַꥴ꟦ָדֹג׃תֲ

鍑寸 눤岀ךMUFSד♧涪鍑寸 <filter id="polycleaner" color-interpolation-filters="sRGB"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5
1 1" /> </feComponentTransfer> </filter>

before after

http://codepen.io/grayghostvisuals/pen/JKmRwY

BVUPQSFYFSדعو׷ 08

47(דכ歗⫷זו׾$44DMJQQBUIדوأؙדֹ׷ = + JNBHF銲稆 DMJQ1BUI銲稆

4BGBSJדכծكٝت٦فٔؿ؍حؙأ➰ָֹ  ⢘鎸׃ג֮׷הوأָؙ⸬ַזְ ז׈ -webkit-clip-path: url(#clipping); clip-path: url(#clipping); -webkit-clip-path: url(#clipping); clip-path:
url(#clipping);

鍑寸 ˖ 搀椚ׇ׆ծ47(ךDMJQQBUI㾩䚍׾⢪ֲ ˖ BVUPQSFYFS׾麓⥋׃זְ <defs> <clipPath id="clip"> … </clipPath>
</defs> <image xlink:href="xxx.jpg" … clip-path="url(#clip)" />

3FBDUדعو׷ 09

3FBDUדכ⢪ִ׷47(ך銲稆חⵖꣲָ֮׷ ז׈ https://facebook.github.io/react/docs/tags-and-attributes.html

鍑寸如ך銲稆⟃㢩⢪׻זְ • circle • clipPath • defs • ellipse
• g • image • line • linearGradient • mask • path • pattern • polygon • polyline • radialGradient • rect • stop • svg • text • tspan

鍑寸 TZNCPM銲稆ծVTF銲稆כ⢪ִזְךדծ 3FBDUDSFBUF$MBTTד؝ٝه٦طٝز⻉ const IconUmbrella = React.createClass({ render() { return
( <svg className="umbrella" xmlns="http://www.w3.org/ 2000/svg" width="32" height="32" viewBox="0 0 32 32" aria- labelledby="title"><title id="title">Umbrella Icon</title><path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.82… z"/></svg> ) } }); https://css-tricks.com/creating-svg-icon-system-react/

鍑寸 3FBDUַ׵ծׅץגך47(銲稆ה㾩䚍ָ  אִַ׷״ֲחז׶ת׃׋ https://facebook.github.io/react/docs/tags-and-attributes.html

47(ךت؎ؒحزד  عو׷ 10

וֲ׃ג׮ծ47(ؿ؋؎ٕ؟؎ؤָ㣐ֹֻז׷

鍑寸 ˖ ،ٝؕ٦ه؎ٝزך侧׾幾׵ׅ ˖ ׉׸׊׸ך䏟垥׾侭侧⦼חさ׻ׇ׷

鍑寸 <rect x="80" y="40" fill="#FFCC00" width="30" height="30"/> <path fill="#FFCC00" d="M201.3,61.8c-3.3-18.1,7-36.8,..."/>
<polygon points="43.3,67.8 86.6,142.8 ..." fill="#FFCC00"/> QBUI銲稆ח㢌䳔׃ծ㾩䚍ך鎸鶢갫׾䲧ִծ H[JQ㖇簭׾遤ֲ

鍑寸 ؝٦سⰻחずׄ鎸鶢皘䨽ָ㢳ְקוծ  㖇簭⸬桦כぢ♳ׅ׷ <path fill="#FC0" d="M80 40h30v30H80z"/> <path fill="#FC0" d="M201.3
61.8c-3.3-18.1 7-36.8…"/> <path fill="#FC0" d="M43.3 67.8l43.3 75H0"/>

ְַָד׃׋ד׃׳ֲַ

չ47(ծ׭׿וְֻׁזպ ה䙼׻׸ת׃׋י

׉׿זהֹכծ 䩛㛙ְ⢪ְ倯ַ׵כׄ׭׷

˖ ⽃杝ך47(ؿ؋؎ٕ ˖ TWH銲稆חכծWJFX#PY XJEUI IFJHIU㾩䚍׾䭷㹀 ˖ )5.-ךJNH銲稆ד⢪ֲ

J04 ֿ׸ז׵ծוךـٓؐؠד׮קר㣐♱㣗

IUUQCJUMZMQTWHMJOL

吳䒭⠓爡תר׹׃ 匟歊湫埠 ֮׶ָהֲ׀ְׂת׃׋

ハマるSVG＠CSS nite LP47

ハマるSVG＠CSS nite LP47

More Decks by Naoki Matsuda

Other Decks in Technology

Featured

Transcript