Tweet
Tweet

Slide 1

Slide 1 text

SVG Basic

Slide 2

Slide 2 text

͜ͷεϥΠυʹ… ؚ·Εͳ͍ • ਂ͍಺༰ • ϑΟϧλʔͷ࢖͍ํ • SMILΛ࢖ͬͨΞχϝʔγϣ ϯ ؚ·ΕΔ • ֓ཁ • جૅ

Slide 3

Slide 3 text

Goal SVGͷಛੑΛ೺Ѳ͢Δ͜ͱͰɺ
 ੍࡞ͷࡐྉͱͯ͠ѻ͑ΔΑ͏ʹ͢Δɻ

Slide 4

Slide 4 text

SVG ϕΫλʔܗࣜͷάϥϑΟοΫΛ දݱ͢ΔϚʔΫΞοϓݴޠɻ

Slide 5

Slide 5 text

2001/09/04
 svg1.0 w3cקࠂ 2003/01/14
 svg1.1 w3cקࠂ 2011/08/16
 svg1.1 second edition
 w3cקࠂ IE9 ͰSVG͕αϙʔτ͞Εͨ͜ͱʹΑΓɺ
 ΄ͱΜͲͷϞμϯϒϥ΢βͰ࢖༻Մೳʹ

Slide 6

Slide 6 text

http:/ /caniuse.com/#search=svg ※εΫϦʔϯγϣοτ͸2016೥5݄9೔ʹࡱӨ

Slide 7

Slide 7 text

http:/ /caniuse.com/#search=svg ※εΫϦʔϯγϣοτ͸2016೥5݄9೔ʹࡱӨ

Slide 8

Slide 8 text

http:/ /caniuse.com/#feat=svg-smil ※εΫϦʔϯγϣοτ͸2016೥5݄9೔ʹࡱӨ

Slide 9

Slide 9 text

http:/ /caniuse.com/#feat=svg-html5 ※εΫϦʔϯγϣοτ͸2016೥5݄9೔ʹࡱӨ

Slide 10

Slide 10 text

ಛ௃

Slide 11

Slide 11 text

੍໿ ࣸਅͳͲͷෳࡶͳը૾ͷඳըʹ͸ෆ޲͖
 ※ϕΫλʔը૾ܗࣜͷ੍໿ ਤܗͷ3࣍ݩมܗ͸Ͱ͖ͳ͍

Slide 12

Slide 12 text

ར఺ ղ૾౓ඇґଘͷඳը͕Ͱ͖Δ
 ※ϕΫλʔը૾ܗࣜͷར఺ ௿ϨΠϠʔͷϑΟϧλʔ͕͔͋ͭ͑Δ ίʔυͷઃܭ͕Ͱ͖Δ όʔδϣϯ؅ཧ͕༰қʹͰ͖Δ

Slide 13

Slide 13 text

Ͳ͏࢖͏ʁ
 Ͳ͏࢖ΘΕͯΔʁ

Slide 14

Slide 14 text

• ͪΐͬͱͨ͠૷০ • Πϥετ

Slide 15

Slide 15 text

খ த େ ˕ ̋ ˚ ޲͖ෆ޲͖

Slide 16

Slide 16 text

࢖͍ํ

Slide 17

Slide 17 text

HTML΁ͷૠೖ • objectλάΛ༻͍Δ • imgλά΍CSSΛ༻͍Δ • (X)HTMLʹ௚઀ຒΊࠐΉ

Slide 18

Slide 18 text

ඳը • ϕΫλʔܗࣜͷάϥϑΟοΫΛදݱ͢Δݴޠɻ

Slide 19

Slide 19 text

• ΞΠίϯྨ • ΤϞʔςΟίϯ • ؾ෼?Λ఻͍͑ͨΞΠίϯ
 ex) ͍͍Ͷʂ • ঢ়ଶมԽΛͱ΋ͳ͏ΞΠίϯ
 ex) ϋϯόʔΨʔϝχϡʔ

Slide 20

Slide 20 text

มܗ • ϕΫλʔܗࣜͷάϥϑΟοΫΛදݱ͢Δݴޠɻ

Slide 21

Slide 21 text

Ξχϝʔγϣϯ • http://smashfreakz.com/2016/03/javascript-libraries-svg-animation/

Slide 22

Slide 22 text

ϑΟϧλʔ

Slide 23

Slide 23 text

؅ཧ

Slide 24

Slide 24 text

࠷ۙ • ΞΠίϯ • ΞΫηγϏϦςΟ • ϥΠϒϥϦ

Slide 25

Slide 25 text

ࢀߟ • τϨϯυ௥͏ͳΒ • http://ssvvgg.net/ • جૅΛݻΊΔͳΒ • http://ascii.jp/elem/000/000/996/996503/ • http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html • http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_01.htm • https://triple-underscore.github.io/SVG11/