Slide 1
Slide 1 text
͓ͬͯ͘ͱಘΛ͢Δʢ͔͠Εͳ͍ʣ
SVGͷجૅͱviewBox
冋榹泡嘻
Basics & viewBox
Slide 2
Slide 2 text
দ ా थ
CCO, Designer
Slide 3
Slide 3 text
SVG in various places
͜Μͳͱ͜ΖʹSVG
Slide 4
Slide 4 text
https://lottiefiles.com/featured
https://airbnb.io/lottie/
Slide 5
Slide 5 text
http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
Slide 6
Slide 6 text
https://vdata.nikkei.com/newsgraphics/presidential-election2020/kaihyo/
Slide 7
Slide 7 text
Color Fonts ʢEmojiʣ
SVG
COLR
CBDT
SBIX
Vector
Vector
Bitmap
Bitmap
Slide 8
Slide 8 text
https://webdesk.jsa.or.jp/books/W11M0090/index/?bunsyo_id=JIS+X+7197%3A2012
Slide 9
Slide 9 text
Features
SVGͷجຊతͳಛ
Slide 10
Slide 10 text
XMLจॻͰ͋Δ
จࣈใΛแ
ը૾ͷதΛΞΫηγϒϧʹͰ͖Δ
Duck’s eye
͕ͯ͢ཁૉʢDOMʣ
CSSWeb Fontsద༻Ͱ͖Δ
࠶ར༻ੑ
SVG Sprites͜ͷํ๏
Slide 11
Slide 11 text
Standalone SVG
HTML
CSS
SVG
֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ
HTML
inline SVG
HTMLͷதʹɺSVGίʔυΛॻ͘
HTMLʹSVGίʔυΛؚΊΔ͜ͱ͕Ͱ͖Δ
CSS
HTML
Slide 12
Slide 12 text
ΞΫηγϒϧʹͰ͖Δʢ͕ΜΕʣ
UJUMF
־ד
UJUMF
UJUMF
泘
UJUMF
UJUMF
ׂהף
UJUMF
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
SVG in WordPress
SVGͱWordPress
Slide 18
Slide 18 text
WordPressͷϝσΟΞͰ
SVGϑΝΠϧΛΞοϓϩʔυͰ͖ͳ͍
Slide 19
Slide 19 text
ͳΜͰʁ
Slide 20
Slide 20 text
͜ͷϑΝΠϧλΠϓηΩϡϦςΟ্ͷཧ༝͔Βɺ
ڐՄ͞Ε͍ͯ·ͤΜ
ʯ
ʮ
Slide 21
Slide 21 text
SVGXMLίʔυɻ
ѱҙͷ͋ΔJSΛ͍͘ΒͰຒΊࠐΊͯ͠·͏
Slide 22
Slide 22 text
window.alert("
!!!!!!!!
");
Slide 23
Slide 23 text
Slide 24
Slide 24 text
Slide 25
Slide 25 text
HTML
![]()
HTML
CSS
bacground
HTML5
inline SVG
top-level
document
embedded
document
static image
document
animated image
document
font document
Web Fonts mask, pattern …
resource document
https://svgwg.org/specs/integration/#referencing-modes
Slide 26
Slide 26 text
୭͕ΦϖϨʔλʔͱͳΓ͏Δ
WordPressͷ
͜ͷબਖ਼͍͠ʢͱࢥ͏ʣ
Slide 27
Slide 27 text
https://ja.wordpress.org/plugins/safe-svg/
Slide 28
Slide 28 text
ςϯϓϨʔτͰ
SVGΛͬͯΑΓྑ͍දݱΛ
Slide 29
Slide 29 text
https://xdtrail.com/
Slide 30
Slide 30 text
Protoyping Extension Design System Share
UI
Slide 31
Slide 31 text
$chart_point_data = [
'ui-design' => ['380 186', '380 122', '380 58' ],
'prototyping' => ['448 235', '508 216', '569 196'],
'share' => ['422 314', '460 367', '497 419'],
'design-system' => ['339 314', '301 367', '264 419'],
'extensibility' => ['313 235', '253 216', '192 196']
];
Slide 32
Slide 32 text
$chart_point_data = [
'ui-design' => ['380 186', '380 122', '380 58' ],
'prototyping' => ['448 235', '508 216', '569 196'],
'share' => ['422 314', '460 367', '497 419'],
'design-system' => ['339 314', '301 367', '264 419'],
'extensibility' => ['313 235', '253 216', '192 196']
];
Protoyping Extension Design System Share
UI
1
1
0
0
0
Slide 33
Slide 33 text
X: 380
Y: 122
Slide 34
Slide 34 text
1 1 0 0 0
Slide 35
Slide 35 text
SVG࠲ඪͰͰ͖͍ͯΔ
Slide 36
Slide 36 text
https://d3js.org/
Slide 37
Slide 37 text
About viewBox & viewport
SVGͷviewBoxͱϏϡʔϙʔτͱ
Slide 38
Slide 38 text
viewBoxͱ࠲ඪܥ
Slide 39
Slide 39 text
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
viewBox=
"0 0 200 200"
a b c d
(a, b) c
d
Slide 42
Slide 42 text
viewBox ଐੑͰ
SVGͷදࣔൣғ͓Αͼར༻࠲ඪܥΛఆٛ͢Δ
Slide 43
Slide 43 text
viewBox="100 0 100 100"
viewBox="0 0 200 200"
Slide 44
Slide 44 text
viewBox="0 0 200 200"
1
0,0 2 3 200
...............................
2
3
200
1
...............................
Slide 45
Slide 45 text
1
2 3 200
...............................
2
3
200
1
...............................
viewBox="0 0 200 200"
0,0
200,100
Slide 46
Slide 46 text
࠲ඪ 1 × 1 = ར༻୯Ґ
Slide 47
Slide 47 text
viewBoxʹΑΔ࠲ඪܥೖΕࢠʹͰ͖Δ
Slide 48
Slide 48 text
Ұํɺ
SVGͷϏϡʔϙʔτͱ
Slide 49
Slide 49 text
Slide 50
Slide 50 text
viewBox="0 0 200 200" viewBox="0 0 200 200"
width="200px" height="200px" width="100px" height="100px"
Slide 51
Slide 51 text
Ϗϡʔϙʔτ
εΫϦʔϯʹ͓͚ΔදࣔαΠζ
Slide 52
Slide 52 text
viewBox="0 0 200 200"
width="200px" height="200px"
viewBoxʹΑΔར༻࠲ඪܥͱ
Ϗϡʔϙʔτ࠲ඪܥ
͓ޓ͍ʹӨڹ͠߹Θͳ͍
Slide 53
Slide 53 text
viewBoxͱ
width, hightʢϏϡʔϙʔτʣͷ
Έ߹Θͤͷڍಈ
Slide 54
Slide 54 text
viewBoxɹ͋Γɹ/ɹwidth, hightʢϏϡʔϙʔτ)ɹ͋Γ
viewBox="0 0 200 200" width="100%" height="100%"
Slide 55
Slide 55 text
viewBoxɹͳ͠ɹ/ɹwidth, hightʢϏϡʔϙʔτ)ɹ͋Γ
viewBox="0 0 200 200" width="100%" height="100%"
Slide 56
Slide 56 text
viewBoxɹ͋Γ
width, hightʢϏϡʔϙʔτ)ɹ͋Γ
viewBoxɹͳ͠
width, hightʢϏϡʔϙʔτ)ɹ͋Γ or ͳ͠
viewBoxʹΑΓɺͦͷSVGઐ༻ͷ
ར༻࠲ඪܥ͕͋Δ
Ϗϡʔϙʔτ࠲ඪܥʢHTMLͷ࠲ඪܥʣ͕
ॳظ࠲ඪܥʹͳΔ
Slide 57
Slide 57 text
viewBoxɹ͋Γ
width.hightʢϏϡʔϙʔτ)ɹ͋Γ
viewBoxɹͳ͠
width.hightʢϏϡʔϙʔτ)ɹ͋Γ
1ར༻୯Ґ 1ར༻୯Ґ
ϏϡʔϙʔταΠζʹΑΓՄม HTMLͷ1px
=
=
Slide 58
Slide 58 text
viewBoxͷڍಈΛ͓ͬͯ͘ͱ
දݱͷ෯͕૿͑Δ
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
WP
ZoomUp
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
Slide 61
Slide 61 text
SVG࠲ඪͰͰ͖͍ͯΔ
Slide 62
Slide 62 text
Coordinate transformations
࠲ඪͷม
Slide 63
Slide 63 text
SVGΞχϝʔγϣϯ͍ͤͨ͞
Slide 64
Slide 64 text
࠲ඪܥͱtransform
Slide 65
Slide 65 text
Slide 66
Slide 66 text
ͦ͏͡Όͳͯ͘ɺ͜͏ͳΔ
Slide 67
Slide 67 text
Slide 68
Slide 68 text
transform ʹΑͬͯ
৽ͨͳར༻࠲ඪܥʹม͞ΕΔ
ཁૉࣗମ͕Ҡಈมܗ͍ͯ͠ΔͷͰͳ͘ɺ
࠲ඪܥͦͷͷ͕Ҡಈɾมܗ্ͨ͠Ͱཁૉ͕ඳը͞ΕΔ
Slide 69
Slide 69 text
transform="rotate(360)"
Slide 70
Slide 70 text
ͦ͏͡Όͳͯ͘ɺ͜͏ͳΔ
Slide 71
Slide 71 text
0,0
ճసɺཁૉج४Ͱͳ͘ɺ৽ͨͳ࠲ඪܥͷ 0,0 ج४
transform="rotate(360)"
Slide 72
Slide 72 text
transform ʹΑͬͯɺ৽ͨͳ࠲ඪܥ͝ͱҠಈɾมܗ͓ͯ͠Γɺ
ͦͷ 0,0 ͷ࠲ඪ͕ج४ͱͳΔ
0,0
Slide 73
Slide 73 text
SVGͷ֤ཁૉΛج४ʹಈ͔͢ʹ
Ͳ͏͢Ε͍͍ͷ͔ʁ
Slide 74
Slide 74 text
transform-origin
͍͍͑Μ͡Όͳ͍ͷʁ
Slide 75
Slide 75 text
rect { transform-origin: 50% 50%; }
Slide 76
Slide 76 text
ͦ͏͡Όͳͯ͘ɺ͜͏ͳΔ
Slide 77
Slide 77 text
rect { transform-origin: 50% 50%; }
50% 50%
Slide 78
Slide 78 text
100% 100%
0% 0%
transform-origin ɺར༻࠲ඪܥશମ͕ج४
50% 50%
Slide 79
Slide 79 text
ͳͷͰ
ճసͷج४ͱ͍ͨ͠࠲ඪΛઈରࢦఆ͢Δ
Slide 80
Slide 80 text
rect { transform-origin: 150px 150px; }
150,150
150
150
Slide 81
Slide 81 text
खΛৼΔΞχϝʔγϣϯʹ͍ͨ͠
ͷ͚ࠜΛ
ج४ʹ͍ͨ͠
Slide 82
Slide 82 text
#arm { transform-origin: 283px 196px; }
NG GOOD
0,0
283,196
Slide 83
Slide 83 text
#arm {
transform-origin: right bottom;
}
NG GOOD
#arm {
transform-origin: 283px 196px;
}
Slide 84
Slide 84 text
ͪͳΈʹ
Slide 85
Slide 85 text
#arm { transform-origin: 283px 196px; }
ňpxʯ͕͍͍ͭͯΔ͕ɺ
SVGͷ࠲ඪܥͷར༻୯Ґѻ͍
width: 50px; height: 50px; Ͱɺ
transform-origin: 283px 196px;
ϏϡʔϙʔτͷαΠζͱແؔ
Slide 86
Slide 86 text
͞Βʹ༨ஊ
Slide 87
Slide 87 text
transform="rotate(360, 150, 150)"
150 150
Slide 88
Slide 88 text
͍͍ͪͪ࠲ඪΛਤΔͷ໘…
Slide 89
Slide 89 text
େৎɻԶͨͪʹ
Slide 90
Slide 90 text
transform-box
ϓϩύςΟ͕͋Δ
Slide 91
Slide 91 text
rect { transform-origin: 150px 150px; }
Slide 92
Slide 92 text
rect {
transform-origin: 150px 150px;
transform: rotate(360deg)
}
Slide 93
Slide 93 text
rect {
transform-origin: 150px 150px;
transform: rotate(360deg)
}
rect {
transform-box: fill-box;
transform-origin: 50% 50%;
transform: rotate(360deg)
}
=
Slide 94
Slide 94 text
rect {
transform-origin: 150px 150px;
transform: rotate(360deg)
}
rect {
transform-box: fill-box;
transform-origin: 50% 50%;
transform: rotate(360deg)
}
=
Slide 95
Slide 95 text
transform-box: fill-box;
transform-origin: 50% 50%;
͜ͷࢦఆʹΑΓɺSVGͰಛఆཁૉͷਅΜதΛ
transformͷج४ʹͰ͖Δ
Slide 96
Slide 96 text
transform-box: view-box;
transform-box: fill-box;
SVGͷར༻࠲ඪܥΛtransformͷରͱ͢Δ
ࢦఆཁૉͷృΓൣғΛtransformରͱ͢Δ
Slide 97
Slide 97 text
rect {
transform-box: fill-box;
transform-origin: 50% 50%;
}
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
transform-box
Slide 100
Slide 100 text
͜ͷϓϩύςΟΛհ͍͕ͨͨ͠Ί͚ͩʹ
1͍͖࣌ؒͨͩ·ͨ͠
transform-box
Slide 101
Slide 101 text
͋Γ͕ͱ͏͍͟͝·ͨ͠
冋榹泡嘻
Basics & viewBox