Slide 1
Slide 1 text
is on your side
SVGɺͦΕ͋ͳͨͷຯํ
匟歊湫埠
SVG
Slide 2
Slide 2 text
Prologue
·ͣͪ͜Β
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
দాथ
CCO, Designer
Slide 5
Slide 5 text
SVG in various places.
͍ΖΜͳͱ͜ΖʹSVG
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
Slide 8
Slide 8 text
https://www.fontself.com/
Slide 9
Slide 9 text
https://auwaa.ch/
Slide 10
Slide 10 text
Features
SVGͷಛΛ͓͞Β͍
Slide 11
Slide 11 text
XMLจॻͰ͋Δ
จࣈใΛแ
ը૾ͷதΛΞΫηγϒϧʹͰ͖Δ
Duck’s eye
͕ͯ͢ཁૉʢDOMʣ
CSSWeb Fontsద༻Ͱ͖Δ
࠶ར༻ੑ
SVG Sprites͜ͷํ๏
Slide 12
Slide 12 text
Standalone SVG
HTML
CSS
SVG
֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ
HTML
inline SVG
HTMLͷதʹɺSVGίʔυΛॻ͘
HTMLʹؚΊΔ͜ͱ͕Ͱ͖Δ
Slide 13
Slide 13 text
viewBoxʢ࠲ඪܥʣͷ֓೦
width / height
࣮ੇͷαΠζࢦఆ
preserveAspectRatio
ΞεϖΫτൺอ࣋ํ๏ͷࢦఆ
viewBox
ඳըྖҬͷ࠲ඪܥΛఆٛ
Slide 14
Slide 14 text
filter, mask, pattern…ɹඇഁյͳޮՌ
Slide 15
Slide 15 text
Ξχϝʔγϣϯ࣮ํ๏͕๛
JavaScript
ͳΜͰͰ͖Δ
var tl = new TimelineMax();
tl.fromTo('#obj', 3,
{y: '0'},
{y: ’10',
repeat: -1,
yoyo: true},
'-=2')
SMIL
ཁૉ͚ͩͰΞχϝʔγϣϯ
CSS Animations
CSSͷΞχϝʔγϣϯ͑Δ
@keyframes stroke-anime {
0% {
stroke-dashoffset: 800;
fill: transparent;
}
100% {
stroke-dashoffset: 0;
fill: rgba(#fff, .7);
}
}
Slide 16
Slide 16 text
ίετύϑΥʔϚϯε
ٱੑ
σβΠϯ
ಠࣗੑ
Custom Fields
3
6
3
4
σʔλͱ૬ੑྑ͠
ίετύϑΥʔϚϯε
ٱੑ
σβΠϯ
ಠࣗੑ
ਓؾ
ࡏݿ
Slide 17
Slide 17 text
CMSʢMovable Typeʣʹͨ͠ͱ͜ΖͰ
Slide 18
Slide 18 text
ࠓճ
σβΠφʔ͚ʹSVGΞχϝʔγϣϯΛ͝հ
Slide 19
Slide 19 text
Animation with JavaScript
JSʹΑΔSVGΞχϝʔγϣϯ
Slide 20
Slide 20 text
SMIL CSS Animations JavaScript
ཁૉ͚ͩͰΞχϝʔγϣϯ CSSͷΞχϝʔγϣϯ͑Δ ͳΜͰͰ͖Δ
ͳͥɺJSͰΞχϝʔγϣϯʁ
@keyframes stroke-anime {
0% {
stroke-dashoffset: 800;
fill: transparent;
}
100% {
stroke-dashoffset: 0;
fill: rgba(#fff, .7);
}
}
var tl = new TimelineMax();
tl.fromTo('#obj', 3,
{y: '0'},
{y: ’10',
repeat: -1,
yoyo: true},
'-=2')
Slide 21
Slide 21 text
SMIL CSS Animations JavaScript
ཁૉ͚ͩͰΞχϝʔγϣϯ
SVGʹ͑Δ
CSSͷϓϩύςΟݶΒΕ͍ͯΔ
ͳΜͰͰ͖Δ
ͳͥɺJSͰΞχϝʔγϣϯʁ
IEͰ transform ͕ޮ͔ͳ͍
CSSͷΞχϝʔγϣϯ͑Δ
var tl = new TimelineMax();
tl.fromTo('#obj', 3,
{y: '0'},
{y: ’10',
repeat: -1,
yoyo: true},
'-=2')
Slide 22
Slide 22 text
TweenMax SVG.js Snap.svg Two.js D3.js
ͲͷϥΠϒϥϦΛ͏ʁ
Slide 23
Slide 23 text
TweenMax SVG.js Snap.svg Two.js D3.js
ͱʹ͔͘ಈ͔͍ͨ͠ͳΒ
Slide 24
Slide 24 text
Ͳ͏͍ͬͨͱ͖ʹɹɹɹTweenMaxʁ
DOMΞχϝʔγϣϯઐ༻ϥΠϒϥϦ
λΠϜϥΠϯػೳ͕ڧྗ
requestAnimationFrame Ͱಈ࡞͕ͳΊΒ͔
ඇΤϯδχΞͰͦΕͬΆ͘ಈ͔ͤΔ
Slide 25
Slide 25 text
λΠϜϥΠϯͰಈ͔ͯ͠Έ·͠ΐ͏
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
طଘͷSVGฤूʹɹɹɹBOXY SVG
https://boxy-svg.com/
Slide 30
Slide 30 text
New Tab
੩ࢭըͷSVGϑΝΠϧΛอଘ
Slide 31
Slide 31 text
λΠϜϥΠϯͷΠϯελϯεΛ༻ҙ
var tl = new TimelineMax();
Slide 32
Slide 32 text
ࢁΛϙϤϯͱಈ͔͢
tl
.fromTo('#mountain', 1,
{scaleY: '0',
transformOrigin: '50% 100%'},
{scaleY: '1',
ease: Bounce.easeOut},
'-=0')
Slide 33
Slide 33 text
͍ͭͮͯɺଠཅͱؾٿΛಈ͔͢
tl
.fromTo('#mountain', 1, {…}, '-=0')
.fromTo('#sun', 1,
{scale: '0'},
{scale: '1'},
'-=0.5')
.fromTo('#ballon', 2,
{y: '-300'},
{y: '0'},
'-=0.5')
Slide 34
Slide 34 text
.fromTo('#sun', 1,
{x: 10, scale: 0},
{x: 60, scale: 1},
'-=0.5')
ಈ͔͢ཁૉ duration
ಈ͖࢝Ίͷঢ়ଶ
ಈ͖ऴΘΓͷঢ়ଶ
λΠϜϥΠϯʹ͓͚Δ։࢝λΠϛϯάʢલͷཁૉ͕ಈ͖ऴΘΔ0.5ඵલʣ
Slide 35
Slide 35 text
ಈ͔͍ͨ͠ॱʹੵΜͰ͍͚ͩ͘
var tl = new TimelineMax();
.fromTo()
.fromTo()
.staggerFromTo()
.staggerFromTo()
.staggerFromTo()
Slide 36
Slide 36 text
ෳͷཁૉΛ·ͱΊͯಈ͔͢
.staggerFromTo('[id^="build"]', 1,
{scale: 0,
transformOrigin: '50% 100%'},
{cycle: {scale: [1, .9, 1.1]},
ease: Bounce.easeOut},
'0.2',
'-=0.2')
0.2ඵ͓͖ʹ
Slide 37
Slide 37 text
͞ΒʹෳͷཁૉΛ·ͱΊͯಈ͔͢
.staggerFromTo('[id^="tree"]', 1,
{y: '-400', scaleY: 0.5,
transformOrigin: '50% 0%'},
{y: '0', scaleY: 1,
ease: Bounce.easeOut},
'0.2',
'-=0.2')
0.2ඵ͓͖ʹ
Slide 38
Slide 38 text
.from()
.to()
.fromTo()
.set()
.staggerFrom()
.staggerTo()
.staggerFromTo()
͜Ε͚֮ͩ͑ͱ͚ಈ͔ͤΔ
Slide 39
Slide 39 text
ͱʹ͔͘
λΠϜϥΠϯػೳ͕ࡉ͔͍ௐʹޮ͘
Slide 40
Slide 40 text
λΠϜϥΠϯΛؔԽͯ͠ɺΠϕϯτϦεφΛόΠϯυ
function timeline() {
var tl = new TimelineMax();
tl.fromTo('#obj1', 3, ... '+=0')
.staggerFromTo('.class1', 3, ...)
return tl;
}
$('#obj1').on('click', function(){
timeline.play();
})
Slide 41
Slide 41 text
ෳͷλΠϜϥΠϯΛɺ৽ͨͳλΠϜϥΠϯʹ߹ମ
function timeline1() {
var tl = new TimelineMax();
tl.fromTo('#obj1', 3, ... '+=0')
.staggerFromTo('.class1', 3, ...)
return tl;
} var masterTl = new TimelineMax();
master
.add(timeline1(), 'scene1')
.add(timeline2(), 'scene2');
masterTl.play()
function timeline2() {
var tl = new TimelineMax();
tl.staggerFromTo('.class2', 3, ...)
.fromTo('#obj2', 3, ... '+=0')
return tl;
}
Slide 42
Slide 42 text
εϐʔυޙ͔ΒௐՄೳ
masterTl.timeScale(3).play();
్த͔Βಈ͔ͨ͠Γ
masterTl.seek("myLabel").play();
Slide 43
Slide 43 text
TweenMaxΛ͓͚ͬͯ
ޙ͔ΒͰඍௐ͕༰қ
Slide 44
Slide 44 text
https://spiritapp.io/
Slide 45
Slide 45 text
Unique
SVGͳΒͰͳ͜ͱ
Slide 46
Slide 46 text
SVG
Ұຕֆ ͷʮதʯΛಈ͔ͤΔ
Slide 47
Slide 47 text
New Tab
Slide 48
Slide 48 text
SVG
ň ଐੑ ʯň CSS ʯͰਤܗ͕࡞ΒΕ͍ͯΔ
Slide 49
Slide 49 text
Slide 50
Slide 50 text
ଐੑͷಈ͔ͤΔʢviewBoxʣ
Slide 51
Slide 51 text
ଐੑͷಈ͔ͤΔʢfilterʣ
Slide 52
Slide 52 text
࠷৽ͷCSS͑ΔʢCSS Variables ͳͲʣ
#duck-1 {
--primaryColor: #0099CC;
}
#duck-1 {
--primaryColor: #E52A39;
}
Slide 53
Slide 53 text
Conclusion
·ͱΊ
Slide 54
Slide 54 text
SVGɺ͢Β͖͔͠ͳث༻ශ
େ͖ͬͯ͘ খͬͯ͘͞ ಈ͔ͯ͠ ੩ࢭըͰ
Slide 55
Slide 55 text
SVGɺ͢Β͖͔͠ͳث༻ශ
େ͖ͬͯ͘ খͬͯ͘͞ ಈ͔ͯ͠ ੩ࢭըͰ
Scalable
Slide 56
Slide 56 text
What is SVG ?
Slide 57
Slide 57 text
Super Very Good
Slide 58
Slide 58 text
is on your side
SVGɺͦΕ͋ͳͨͷຯํ
SVG
Thank you