Tweet
Tweet

Slide 1

Slide 1 text

SVG MANIAX Scalable Vector Graphics in AKITA দా௚थ 贃ך瑎8FC$SFBUPS.FFUVQ7PMչوٕثرغ؎أ㼎䘔պ

Slide 2

Slide 2 text

匟歊湫埠 $$0 8FC%FTJHOFS

Slide 3

Slide 3 text

47(⯋䎃

Slide 4

Slide 4 text

47(⯋䎃 ה鎉ְ竲ֽגծכװ䎃ֻ׵ְ穗麓

Slide 5

Slide 5 text

9~ 3.2~ 4~ 3~ 3.0~ 3.2~ ״ֲװֻ ⢪ִ׷橆㞮ך倯ָءؑ،ָرֻؕז׏׋ iOS

Slide 6

Slide 6 text

47(׾琎噰涸ח⢪ְ׋ְ ׀儗⚅חⰅ׏׋

Slide 7

Slide 7 text

47(ךֿ׸׌ֽכ椚鍑׃הֽ

Slide 8

Slide 8 text

WJFX#PY

Slide 9

Slide 9 text

Slide 10

Slide 10 text

width="200px" height="160px" viewBox="0 0 200 160" ج४఺ͷxy࠲ඪ viewBoxͷ෯ viewBoxͷߴ͞

Slide 11

Slide 11 text

WJFX#PYך⦼ 䏟垥禸 邌爙؟؎ؤ WJFX#PY XJEUI IFJHIU width="200px" height="160px" viewBox="0 0 200 160" ͒

Slide 12

Slide 12 text

width="100px" height="100px" viewBox="0 0 200 200" QY QY ⰼך湫䖇כ 䏟垥 47(ך䏟垥 ـٓؐؠךQY = WJFX#PYך⦼הXJEUI IFJHIUך⦼כⴽ暟ד֮׷ QY =

Slide 13

Slide 13 text

WJFX#PYך䭷㹀ָזְ㜥さ QY QY ⰼך湫䖇כ 䏟垥 ⴱ劍䏟垥禸 QY = = 47(ך䏟垥 鋵銲稆ך؟؎ؤ width="100px" height="100px" viewBox="0 0 200 200"

Slide 14

Slide 14 text

䏟垥ך؟؎ؤכծXJEUI IFJHIUח״׏ג㢌׻׷ խWJFX#PYח״׷ խ㢌䳔ׁ׸׋䏟垥 䏟垥ך⽃⡘ךֿה׾ 䏟垥禸㢌䳔 ⵃ欽⽃⡘

Slide 15

Slide 15 text

ֿ׸׵׾椚鍑׃גֶֻֿהָ 47(ך邌爙דعو׵זְ؝خ WJFX#PY XJEUI IFJHIU QSFTFSWF"TQFDU3BUJP ͱɺͱ͖Ͳ͖

Slide 16

Slide 16 text

*MMVTUSBUPSד47(׾⥂㶷儗ծٖأهٝءـպ׾ ثؑحؙׅ׷הծTWH銲稆חXJEUIהIFJHIU㾩䚍ָ 䭷㹀ׁ׸זְ 1PJOU

Slide 17

Slide 17 text

iOS 暴ח؝؎خה؝؎خךֶ⚅鑧ך׋׭ח䗳⥜דׅ

Slide 18

Slide 18 text

iOS width="200px" height="160px" viewBox="0 0 200 160" ˖ $44ד䭷㹀ׅ׸לծ㾩䚍ך⦼״׶׮⮚⯓ׁ׸׷ ˖ *&דכչIFJHIUBVUPպָ⸬ַזְ ˖ "OESPJEתדչQSFTFSWF"TQFDU3BUJPպ䭁簭嫰桦ךغָؚ֮׷ ˖ זךדծٖأهٝءـ'MVJEחׅ׷חכծJGSBNFךٖأهٝءـַהずׄ䩛岀׾ WJFX#PY䭷㹀֮׶կX IכչQYպ䭷㹀ׅ׷ָし

Slide 19

Slide 19 text

׍ז׫חծ47(ךٖٝتؚٔٝכ *&װ&EHFָ剑׮笺뜧

Slide 20

Slide 20 text

㙵׭鴥׫倯

Slide 21

Slide 21 text

㣐ֹֻⴓֽג 珏겲

Slide 22

Slide 22 text

Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode Secure Static Mode SVGͷ͢΂ͯͷػೳΛ දࣔ ɾ ॲཧϞʔυ Ξχϝʔγϣϯ ॲཧϞʔυ Ξχϝʔγϣϯ ॲཧϞʔυ ੩ࢭըදࣔϞʔυ * ࡟আ͞ΕΔ༧ఆ ੩ࢭըදࣔϞʔυ ֎෦Ϧιʔεࢀর εΫϦϓτͷ࣮ߦ ΠϯλϥΫγϣϯॲཧ ʢΠϕϯτ ɾ ϦϯΫʣ SMILΞχϝʔγϣϯ HTML HTML HTML5 inline SVG CSS background content HTML CSS background content

Slide 23

Slide 23 text

ֿ׸׵׾椚鍑ְ׋׌ְ׋♳ד˘

Slide 24

Slide 24 text

47(׾⢪ְ׋ֻז׷ 㣐طة

Slide 25

Slide 25 text

歗⫷ⰻחر٦ةה圓鸡׾ⰻ⺪דֹ׷ 1

Slide 26

Slide 26 text

խխ歗⫷խד֮׶ծխխ俑剅խד֮׷ 47(כ

Slide 27

Slide 27 text

9.-俑剅׌ַ׵ծׅץגך㔳䕎כչ銲稆պ 俑㶵ر٦ةذؗأزظ٦س׾ろ׭׵׸׷ 歗⫷ך⚥ח،ؙإءؽٔذ؍׾然⥂דֹ׷

Slide 28

Slide 28 text

+1&(װ1/(ך➿剏ذؗأز alt="·͙Ζͷण࢘" longdesc="http:// example.com/desc1"

Slide 29

Slide 29 text

47(דכ銲稆׀החة؎زٕذؗأز׾縧ֽ׷ ͍͘Β … ւଽͱγϟϦ … ͓ࡼ … ͍͘Βͷ܉؋

Slide 30

Slide 30 text

SPMFהBSJBMBCFMMFECZ׾鷄鎸ׅ׸ל أؙٔ٦ٝٔ٦ت٦㼎䘔׮דֹ׷ ϋϯόʔΨʔ ϋϯόʔΨʔͷϑϥοτͳ ΠϥετΞΠίϯ …

Slide 31

Slide 31 text

͜Μͳάϥϑ΋"ݸʑͷཁૉ͝ͱ"ʹ ΞΫηγϒϧʹ͢Δ͜ͱ͕Ͱ͖Δ 0 30 60 90 120 150 ౉ล ాத ߴڮ ླ໦ ࠤ౻ ⡟谏 挿 ꈿ加 挿 넝堀 挿 歊⚥ 挿 床鴟 挿

Slide 32

Slide 32 text

DEMO

Slide 33

Slide 33 text

ֿ׿זծ兛鸐כ铣׫♳־ז׿ַדֹזׁ׉ֲז ♧卐歗⫷תד׮ָ،ؙإءـٕח

Slide 34

Slide 34 text

ػ٦خךٌآُ٦ٕ⻉ⱄⵃ欽䚍 2

Slide 35

Slide 35 text

EFGT銲稆 TZNCPM銲稆 VTF銲稆 ٌآُ٦ٕ㹀纏 ٌآُ٦ٕ⿫撑

Slide 36

Slide 36 text

47(ךׅ׀ְהֿ׹ ずׄ47(俑剅ⰻծ׮׃ֻכ㢩鿇ך47(俑剅ⰻך ⦐ղך㔳䕎׾וֿדד׮ⱄⵃ欽דֹ׷ HTML5 ͷ Web Components Λઌߦ࣮૷͍ͯ͠ΔΑ͏ͳ΋ͷ͔ͳʁ

Slide 37

Slide 37 text

銲稆ךⱄⵃ欽 TZNCPM銲稆荈⡤כ㹋⡤ךזְ㔳䕎 VTF銲稆דⱄⵃ欽׃גⴱ׭ג邌爙דֹ׷ 1PJOU TZNCPMך㜥さծ鋵47(銲稆הכⴽך杝甧׃׋WJFX#PY׾ 䭯ג׷ךדծⱄⵃ欽׃׋ꥷך؟؎ؤ㢌刿׮〳腉

Slide 38

Slide 38 text

؝٦سꆀ׮眍秈דֹ׷

Slide 39

Slide 39 text

47(4QSJUFT JOEFYIUNM JDPOTTWH Send Mail 卐ך47(ך⚥ח֮׷㔳䕎׾ծ⦐ⴽחוֿחד׮邌爙דֹ׷ 1PJOU

Slide 40

Slide 40 text

DEMO

Slide 41

Slide 41 text

˖ WJFX#PY׾杝荈ח㹀纏דֹ׷׋׭ծ⽃杝דך䏟垥禸׾䭯א ˖ את׶ծVTF銲稆דⱄⵃ欽ׅ׷ꥷח؟؎ؤ׾㢌刿דֹ׷䏟垥禸㢌䳔 ˖ *MMVTUSBUPSךءٝنٕכTZNCPM銲稆ח㢌䳔ׁ׸׷ ˖ 㔳䕎銲稆׾ؚٕ٦ؾؚٝ׃ג⽃חذٝفٖ٦ز⻉׃׋׮ך ˖ ⽃杝ך䏟垥禸כ䭯׋׆ծⱄⵃ欽儗ח؟؎ؤכ㢌刿דֹזְ TZNCPM銲稆הEFGT銲稆ך麩ְ TZNCPM銲稆 EFGT銲稆

Slide 42

Slide 42 text

ֻׁ׏ה،صً٦ءّٝ 2

Slide 43

Slide 43 text

47(ך،صً٦ءّٝכ 㣐ֹֻⴓֽג珏겲 4.*-،صً٦ءّٝ $44،صً٦ءّٝ 47(%0.،صً٦ءّٝ

Slide 44

Slide 44 text

4.*-،صً٦ءّٝ 㼛勻涸ח䐖姺٥窟さ✮㹀זךד 䘌׸ג׮ְְדׅ $ISPNF⟃꣬דכծׅדחꬊ䱿㤺הז׏גְ׷ 1PJOU

Slide 45

Slide 45 text

$44،صً٦ءّٝ $44ךBOJNBUJPO USBOTJUJPOדך ،صً٦ءָّٝ〳腉׌ָ˘ ׋׌׃ծ⹛ַׇ׷ךכ 47(ד⢪ִ׷$44فٗػذ؍חꣲ׵׸׷ *&דכծ47(ך銲稆חUSBOTGPSNָת׏׋ֻ⸬ַזְךד $44דכ㔳䕎׾獳⹛٥㢌䕎ׇׁ׷ֿהָדֹזְ 1PJOU 1PJOU

Slide 46

Slide 46 text

$44،صً٦ءّٝ את׶ծ$44ד䭷㹀דֹזְ㾩䚍⦼כ،صً♶〳腉 㔳䕎ך㣐ֹׁծ⡘縧ծػأ䕎朐זו׾䭷㹀ׅ׷ 㾩䚍כծ$44דכ䭷㹀דֹזְ

Slide 47

Slide 47 text

IUUQXXXXPSH5347(QSPQJEYIUNM 47(ד⢪ִ׷$44فٗػذ؍♧鋮 1PJOU

Slide 48

Slide 48 text

$44،صً٦ءّٝ .FEJB2VFSJFTה PQBDJUZז׿ַ׾穈׫さ׻ׇ׷ךכ0,

Slide 49

Slide 49 text

IUUQBTDJJKQFMFN

Slide 50

Slide 50 text

47(%0.،صً٦ءّٝ +BWB4DSJQUד47(ך%0.׾乼⡲׃ג ،صً٦ءׇׁّٝ׷ 47(銲稆ך㾩䚍⦼׾剅ֹ䳔ִ׷կ㹋颵涸חז׿ד׮דֹ׷ 1PJOU 47(%0.%0.-FWFMכ)5.-%0.%0.-FWFM הכⴽ暟זךדծK2VFSZדכ銲稆欰䧭זודֹזְ 1PJOU 㢩鿇ך47(ؿ؋؎ٕ׾ծJNH銲稆װ$44CBDLHSPVOEד ⿫撑邌爙ׇׁ׋㜥さծ➬圫♳ת׏׋ֻ⹛ַזְ 1PJOU

Slide 51

Slide 51 text

47(%0.،صً٦ءّٝ var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", "50"); rect.setAttribute("y", "50"); rect.setAttribute("width", "100"); rect.setAttribute("height", "100"); rect.setAttribute("fill", "red"); var rot = 0; setInterval(function(){ rect.setAttribute("transform", "rotate(" + rot + " 100 100)"); rot = rot + 1; }, 10); document.querySelector("svg").appendChild(rect);

Slide 52

Slide 52 text

47(%0.،صً٦ءّٝ 47(欽ך،صً٦ءّٝٓ؎ـٓٔ׾⢪ֲֶ IUUQTHSFFOTPDLDPN IUUQKVMJBODPNSFTFBSDIWFMPDJUZ IUUQTOBQTWHJP 넝堣腉ז窟さ،صً٦ءّٝٓ ؎ـٓٔկ 47(ך،صً٦ءّٝ欽鷿׀ה חفؚٓ؎ٝ׾㼪Ⰵ׃ג⢪欽ׅ ׷կ׍׳׏הꨇ׃ְկ K2VFSZךBOJNBUF✼䳔הז׏ג ְ׷،صً٦ءّٝٓ؎ـٓٔկ 〳腉זꣲ׶$44׾⢪׏גֻ׸׷ ךד،صً٦ءّٝך넝鸞⻉ָ 㔳׸׷կ 㸣Ⰻח47(㼔欽ךٓ؎ـٓٔկ
 47(ך欰䧭װծ㢩鿇ך47(ؿ؋ ؎ٕ׾《׶鴥׿דⰻ鿇׾乼⡲ׅ ׷ֿה׮〳腉կ
 K2VFSZٓ؎ؙח剅ֽ׷կ 넝堣腉 ֶׅׅ׭

Slide 53

Slide 53 text

DEMO +

Slide 54

Slide 54 text

47(%0.،صً٦ءّٝ )5.-װ$BOWBTדך،صً٦ءّٝדכ ػ٦خ׀הח剅ֹ⳿ׅ䗳銲ָ֮׷ めんどい！

Slide 55

Slide 55 text

47(%0.،صً٦ءّٝ 47(ז׵ծⰋ⡤׾剅ֹ⳿׃׋䖓׮圓鸡׾ ׉ךתת⥂䭯׃גְ׷ךדծػ٦خך䪔ְָ嚂

Slide 56

Slide 56 text

IUUQTHSFFOTPDLDPNUXFFONBY

Slide 57

Slide 57 text

IUUQDPEFQFOJPQQQQQFO&72C:R

Slide 58

Slide 58 text

ꆙ׌ֽ ⹛ַׇ׷ 湡׌ֽ ⹛ַׇ׷ 47(כ 卐窩׾ׁ׏ה剅ֹ⳿׃גծ ׍׳ֿ׏ה鿇ⴓ涸ח⹛ַׅךחぢְג׷

Slide 59

Slide 59 text

״ֻ֮׷颵㉏

Slide 60

Slide 60 text

鯪ֻׅ׷倯岀כ

Slide 61

Slide 61 text

ΞϯΧʔϙΠϯτͷ਺ 1854 ϑΝΠϧ༰ྔ 66KB ΞϯΧʔϙΠϯτͷ਺ 461 ϑΝΠϧ༰ྔ 29KB ،ٝؕ٦ه؎ٝز׾幾׵ׅ

Slide 62

Slide 62 text

ΞϐΞϥϯεͰɺԼ͔Β ʮઢˠઢˠృΓʯͷॱ൪ͱͨ͠ਤܗ 47( ʹอଘ͢Δͱɺࣗಈతʹ෼ׂ͞Εɺ ̏ͭͷಉਤܗ͕ॏͶΒΕΔ SFDU ཁૉ SFDU ཁૉ SFDU ཁૉ ،ؾ،ٓٝأ׾㢳欽׃זְ

Slide 63

Slide 63 text

؝٦سך㼭侧挿⟃♴ך呞侧׾䫇ִ׷

Slide 64

Slide 64 text

47(0.(זוד剑黝⻉ׅ׷ https://jakearchibald.github.io/svgomg/

Slide 65

Slide 65 text

MUFSכ䗳銲剑⡚ꣲח http://jorgeatgu.github.io/svg-filters/

Slide 66

Slide 66 text

*&װ"OESPJEזוד 嫰桦ָ期׏ג邌爙ׁ׸׷

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

iOS width="200px" height="160px" viewBox="0 0 200 160" WJFX#PY䭷㹀֮׶կX IכչQYպ䭷㹀ׅ׷

Slide 69

Slide 69 text

47(ךٖأهٝءـ⻉כ 鋵銲稆ךQBEEJOHUPQד TWHXSBQ TWH .svg-wrap > svg { display: block; position: absolute; max-width: 100%; width: 100%; height: 100%; } .svg-wrap { position: relative; height:0; padding-top: 60%; } ֿך㜥さכծTWH銲稆ךXJEUI IFJHIUכ䭷㹀׃זְֿה 1PJOU

Slide 70

Slide 70 text

ؿؓ٦ٕغحؙכ

Slide 71

Slide 71 text

ؿؓ٦ٕغحָؙ䗳銲זךכծ⚺ח؝؎خ׵ IE 8 Android 2

Slide 72

Slide 72 text

IE 8 Android 2 銲⟝ה׃גוֲ׃ג׮㼎䘔ׅץֹ儗כ չ47(׾⢪׻זְպ

Slide 73

Slide 73 text

⹈䓼ׅ׷ךחְְ؟؎زכ

Slide 74

Slide 74 text

IUUQTXXXESPQCPYDPNTZLI[TDNTWMUGPMMPXVQ@TWH@MJOLTNE EMQSFWJFXGPMMPXVQ@TWH@MJOLTNE

Slide 75

Slide 75 text

הְֲֿהד ת׆כ47(׾兛鸐ך歗⫷ה׃ג ⢪׏ג׫״ֲ

Slide 76

Slide 76 text

׬׆ַ׃ְֿה׾׃זֽ׸ל 47(כ׬׆ַ׃ֻזְ

Slide 77

Slide 77 text

匟歊湫埠 ֮׶ָהֲ׀ְׂת׃׋