SVG MANIAX

Transcript

1. SVG MANIAX Scalable Vector Graphics in AKITA দా௚थ 贃ך瑎
   8FC
   $SFBUPS
   .FFUVQ
   7PM
   չوٕثرغ؎أ㼎䘔պ
2. 匟歊湫埠 $$0
   8FC
   %FTJHOFS
3. 47(⯋䎃
4. 47(⯋䎃 ה鎉ְ竲ֽגծכװ䎃ֻ׵ְ穗麓
5. 9~ 3.2~ 4~ 3~ 3.0~ 3.2~ ״ֲװֻ
   ⢪ִ׷橆㞮ך倯ָءؑ،ָرֻؕז׏׋ iOS
6. 47(
   ׾琎噰涸ח⢪ְ׋ְ
   ׀儗⚅חⰅ׏׋
7. 47(
   ךֿ׸׌ֽכ椚鍑׃הֽ
8. WJFX#PY
9. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 200 200" > <circle cx="100" cy="100" r="100"/> </svg>
10. width="200px" height="160px" viewBox="0 0 200 160" ج४఺ͷxy࠲ඪ viewBoxͷ෯ viewBoxͷߴ͞
11. WJFX#PY
    ך⦼
    䏟垥禸 邌爙؟؎ؤ WJFX#PY XJEUI
    IFJHIU width="200px" height="160px" viewBox="0 0 200 160" ͒
12. width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> QY QY ⰼך湫䖇כ
    䏟垥 47(
    ך
    䏟垥 ـٓؐؠך
    QY = WJFX#PY
    ך⦼ה
    XJEUI
    IFJHIU
    ך⦼כⴽ暟ד֮׷ QY
    
     =    
13. WJFX#PY
    ך䭷㹀ָזְ㜥さ QY QY ⰼך湫䖇כ
    䏟垥 ⴱ劍䏟垥禸
    QY = = 47(
    ך
    䏟垥 鋵銲稆ך؟؎ؤ
    
    width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/>
14. 䏟垥ך؟؎ؤכծXJEUI
    IFJHIU
    ח״׏ג㢌׻׷ խWJFX#PY
    ח״׷ խ㢌䳔ׁ׸׋䏟垥 䏟垥ך⽃⡘ךֿה׾ 䏟垥禸㢌䳔 ⵃ欽⽃⡘
15. ֿ׸׵׾椚鍑׃גֶֻֿהָ
    47(ך邌爙דعو׵זְ؝خ WJFX#PY XJEUI
    IFJHIU QSFTFSWF"TQFDU3BUJP ͱɺͱ͖Ͳ͖
16. *MMVTUSBUPS
    ד
    47(׾⥂㶷儗ծٖأهٝءـպ׾ ثؑحؙׅ׷הծTWH
    銲稆ח
    XJEUI
    ה
    IFJHIU
    㾩䚍ָ 䭷㹀ׁ׸זְ 1PJOU
17. iOS 暴ח؝؎خה؝؎خךֶ⚅鑧ך׋׭ח䗳⥜דׅ
18. iOS width="200px" height="160px" viewBox="0 0 200 160" ˖ $44ד䭷㹀ׅ׸לծ㾩䚍ך⦼״׶׮⮚⯓ׁ׸׷
    ˖ *&דכչIFJHIU
    BVUPպָ⸬ַזְ
    ˖ "OESPJE
    תדչQSFTFSWF"TQFDU3BUJPպ䭁簭嫰桦ךغָؚ֮׷
    ˖ זךדծٖأهٝءـ'MVJEחׅ׷חכծJGSBNFךٖأهٝءـַהずׄ䩛岀׾ WJFX#PY䭷㹀֮׶կX
    I
    כչQYպ䭷㹀ׅ׷ָし
19. ׍ז׫חծ47(
    ךٖٝتؚٔٝכ
    *&
    װ
    &EHF
    ָ剑׮笺뜧
20. 㙵׭鴥׫倯
21. 㣐ֹֻⴓֽג
    珏겲
22. Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode Secure Static Mode SVGͷ͢΂ͯͷػೳΛ දࣔ ɾ ॲཧϞʔυ Ξχϝʔγϣϯ ॲཧϞʔυ Ξχϝʔγϣϯ ॲཧϞʔυ ੩ࢭըදࣔϞʔυ * ࡟আ͞ΕΔ༧ఆ ੩ࢭըදࣔϞʔυ ֎෦Ϧιʔεࢀর εΫϦϓτͷ࣮ߦ ΠϯλϥΫγϣϯॲཧ ʢΠϕϯτ ɾ ϦϯΫʣ SMILΞχϝʔγϣϯ HTML <img> HTML <object> <embed> <iframe> HTML5 inline SVG CSS background content HTML <img> CSS background content
23. ֿ׸׵׾椚鍑ְ׋׌ְ׋♳ד˘
24. 47(
    ׾⢪ְ׋ֻז׷
    
    
    
    㣐طة
25. 歗⫷ⰻחر٦ةה圓鸡׾ⰻ⺪דֹ׷ 1
26. խխ歗⫷
    
    
    խד֮׶ծխխ俑剅
    
    
    խד֮׷ 47(
    כ
27. 9.-俑剅׌ַ׵ծׅץגך㔳䕎כչ銲稆պ 俑㶵ر٦ةذؗأزظ٦س׾ろ׭׵׸׷ 歗⫷ך⚥ח،ؙإءؽٔذ؍׾然⥂דֹ׷
28. +1&(
    װ
    1/(
    ך➿剏ذؗأز alt="·͙Ζͷण࢘" longdesc="http:// example.com/desc1"
29. 47(דכ銲稆׀החة؎زٕذؗأز׾縧ֽ׷ <g> <title>͍͘Β</title> <desc>…</desc> </g> <g> <title>ւଽͱγϟϦ</title> <desc>…</desc> </g> <g> <title>͓ࡼ</title> <desc>…</desc> </g> <title>͍͘Βͷ܉؋</title>
30. SPMF
    ה
    BSJBMBCFMMFECZ
    ׾鷄鎸ׅ׸ל
    أؙٔ٦ٝٔ٦ت٦㼎䘔׮דֹ׷ <svg viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">ϋϯόʔΨʔ</title> <desc id="desc">ϋϯόʔΨʔͷϑϥοτͳ ΠϥετΞΠίϯ</desc> … </svg>
31. ͜Μͳάϥϑ΋"ݸʑͷཁૉ͝ͱ"ʹ ΞΫηγϒϧʹ͢Δ͜ͱ͕Ͱ͖Δ 0 30 60 90 120 150 ౉ล ాத ߴڮ ླ໦ ࠤ౻ ⡟谏
    挿 ꈿ加
    挿 넝堀
    挿 歊⚥
    挿 床鴟
    挿
32. DEMO
33. ֿ׿זծ兛鸐כ铣׫♳־ז׿ַדֹזׁ׉ֲז
    ♧卐歗⫷תד׮ָ،ؙإءـٕח
34. ػ٦خךٌآُ٦ٕ⻉ⱄⵃ欽䚍 2
35. EFGT
    銲稆
    TZNCPM
    銲稆 VTF
    銲稆 ٌآُ٦ٕ㹀纏 ٌآُ٦ٕ⿫撑
36. 47(
    ךׅ׀ְהֿ׹ ずׄ
    47(
    俑剅ⰻծ׮׃ֻכ㢩鿇ך
    47(
    俑剅ⰻך
    ⦐ղך㔳䕎׾וֿדד׮ⱄⵃ欽דֹ׷ HTML5 ͷ Web Components Λઌߦ࣮૷͍ͯ͠ΔΑ͏ͳ΋ͷ͔ͳʁ
37. 銲稆ךⱄⵃ欽 <symbol id="s"> <path d="..."/> </symbol> <use xlink:href="#s" x="20" y="10" fill="#fc0"/> TZNCPM
    銲稆荈⡤כ㹋⡤ךזְ㔳䕎
    VTF
    銲稆דⱄⵃ欽׃גⴱ׭ג邌爙דֹ׷ 1PJOU TZNCPM
    ך㜥さծ鋵47(
    銲稆הכⴽך杝甧׃׋
    WJFX#PY׾ 䭯ג׷ךדծⱄⵃ欽׃׋ꥷך؟؎ؤ㢌刿׮〳腉
38. <symbol id="tw"> <path d="M64,6.2c-1.1,0.6-4.3,1.8-7.3,2.1c1.9-1,4.8-4 .5,5.5-7.2c-1.9,1.2-6.1,2.9-8.2,2.9v0C51.5,1.6, 48.2,0,44.4,0 c-7.3,0-13.2,5.9-13.2,13.2c0,1,0.1,2,0.3,2.9h0c -9.9-0.3-20.7-5.2-27.2-13.7c-4,6.9-0.5,14.6,4,1 7.4c-1.6,0.1-4.4-0.2-5.8-1.5 C2.5,23,4.7,29.1,12.7,31.3c-1.6,0.8-4.3,0.6-5.5 ,0.4c0.4,3.9,5.9,9,11.8,9c-2.1,2.5-10.1,6.9-19, 5.5C6.1,49.9,13.2,52,20.7,52 c21.3,0,37.8-17.3,37-38.6c0,0,0,0,0-0.1c0-0.1,0 -0.1,0-0.2c0-0.1,0-0.1,0-0.2C59.5,11.7,62.1,9.3 ,64,6.2z"/> </symbol> <use xlink:href="#tw" x="20" y="0" fill="#319aec"/> <use xlink:href="#tw" x="40" y="0" fill="#319aec"/> <use xlink:href="#tw" x="60" y="0" fill="#319aec"/> <use xlink:href="#tw" x="80" y="0" fill="#319aec"/> ؝٦سꆀ׮眍秈דֹ׷
39. 47(
    4QSJUFT JOEFYIUNM JDPOTTWH Send Mail 卐ך
    47(
    ך⚥ח֮׷㔳䕎׾ծ⦐ⴽחוֿחד׮邌爙דֹ׷ 1PJOU <svg> <use xlink:href="icon.svg#train"/> </svg>
40. DEMO
41. ˖ WJFX#PY
    ׾杝荈ח㹀纏דֹ׷׋׭ծ⽃杝דך䏟垥禸׾䭯א
    ˖ את׶ծVTF
    銲稆דⱄⵃ欽ׅ׷ꥷח؟؎ؤ׾㢌刿דֹ׷䏟垥禸㢌䳔
    ˖ *MMVTUSBUPS
    ךءٝنٕכ
    TZNCPM
    銲稆ח㢌䳔ׁ׸׷ ˖ 㔳䕎銲稆׾ؚٕ٦ؾؚٝ׃ג⽃חذٝفٖ٦ز⻉׃׋׮ך
    ˖ ⽃杝ך䏟垥禸כ䭯׋׆ծⱄⵃ欽儗ח؟؎ؤכ㢌刿דֹזְ TZNCPM
    銲稆
    ה
    EFGT
    銲稆ך麩ְ TZNCPM
    銲稆 EFGT
    銲稆
42. ֻׁ׏ה،صً٦ءّٝ 2
43. 47(
    ך،صً٦ءّٝכ
    㣐ֹֻⴓֽג珏겲 4.*-
    ،صً٦ءّٝ $44
    ،صً٦ءّٝ 47(
    %0.
    ،صً٦ءّٝ
44. 4.*-
    ،صً٦ءّٝ 㼛勻涸ח䐖姺٥窟さ✮㹀זךד
    䘌׸ג׮ְְדׅ $ISPNF
    
    ⟃꣬דכծׅדחꬊ䱿㤺הז׏גְ׷ 1PJOU
45. $44
    ،صً٦ءّٝ $44
    ך
    BOJNBUJPO
    USBOTJUJPO
    דך
    ،صً٦ءָّٝ〳腉׌ָ˘ ׋׌׃ծ⹛ַׇ׷ךכ
    47(
    
    ד⢪ִ׷
    $44
    فٗػذ؍חꣲ׵׸׷ *&
    דכծ47(
    ך銲稆ח
    USBOTGPSN
    ָת׏׋ֻ⸬ַזְךד $44
    דכ㔳䕎׾獳⹛٥㢌䕎ׇׁ׷ֿהָדֹזְ 1PJOU 1PJOU
46. $44
    ،صً٦ءّٝ את׶ծ$44
    ד䭷㹀דֹזְ㾩䚍⦼כ،صً♶〳腉 <circle cx="120" cy="120" r=“100" />    
     㔳䕎ך㣐ֹׁծ⡘縧ծػأ䕎朐זו׾䭷㹀ׅ׷ 㾩䚍כծ$44
    דכ䭷㹀דֹזְ
47. IUUQXXXXPSH5347(QSPQJEYIUNM 47(
    ד⢪ִ׷$44فٗػذ؍♧鋮 1PJOU
48. $44
    ،صً٦ءّٝ .FEJB
    2VFSJFT
    ה
    PQBDJUZ
    ז׿ַ׾穈׫さ׻ׇ׷ךכ0,
49. IUUQBTDJJKQFMFN
50. 47(
    %0.
    ،صً٦ءّٝ +BWB4DSJQU
    ד
    47(
    ך
    %0.
    ׾乼⡲׃ג
    ،صً٦ءׇׁّٝ׷ 47(銲稆ך㾩䚍⦼׾剅ֹ䳔ִ׷կ㹋颵涸חז׿ד׮דֹ׷ 1PJOU 47(
    %0.%0.
    -FWFM
    כ
    )5.-
    %0.%0.
    -FWFM
     הכⴽ暟זךדծK2VFSZדכ銲稆欰䧭זודֹזְ 1PJOU 㢩鿇ך
    47(
    ؿ؋؎ٕ׾ծJNH
    銲稆װ
    $44
    CBDLHSPVOE
    ד ⿫撑邌爙ׇׁ׋㜥さծ➬圫♳ת׏׋ֻ⹛ַזְ 1PJOU
51. 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);
52. 47(
    %0.
    ،صً٦ءّٝ 47(
    欽ך،صً٦ءّٝٓ؎ـٓٔ׾⢪ֲֶ IUUQTHSFFOTPDLDPN IUUQKVMJBODPNSFTFBSDIWFMPDJUZ IUUQTOBQTWHJP 넝堣腉ז窟さ،صً٦ءّٝٓ ؎ـٓٔկ
    47(ך،صً٦ءّٝ欽鷿׀ה חفؚٓ؎ٝ׾㼪Ⰵ׃ג⢪欽ׅ ׷կ׍׳׏הꨇ׃ְկ K2VFSZךBOJNBUF✼䳔הז׏ג ְ׷،صً٦ءّٝٓ؎ـٓٔկ 〳腉זꣲ׶$44׾⢪׏גֻ׸׷ ךד،صً٦ءّٝך넝鸞⻉ָ 㔳׸׷կ 㸣Ⰻח47(㼔欽ךٓ؎ـٓٔկ
 47(ך欰䧭װծ㢩鿇ך47(ؿ؋ ؎ٕ׾《׶鴥׿דⰻ鿇׾乼⡲ׅ ׷ֿה׮〳腉կ
 K2VFSZٓ؎ؙח剅ֽ׷կ 넝堣腉 ֶׅׅ׭
53. DEMO +
54. 47(
    %0.
    ،صً٦ءّٝ )5.-
    װ
    $BOWBT
    דך،صً٦ءّٝדכ
    ػ٦خ׀הח剅ֹ⳿ׅ䗳銲ָ֮׷ めんどい！
55. 47(
    %0.
    ،صً٦ءّٝ 47(
    ז׵ծⰋ⡤׾剅ֹ⳿׃׋䖓׮圓鸡׾
    ׉ךתת⥂䭯׃גְ׷ךדծػ٦خך䪔ְָ嚂
56. IUUQTHSFFOTPDLDPNUXFFONBY
57. IUUQDPEFQFOJPQQQQQFO&72C:R
58. ꆙ׌ֽ
    ⹛ַׇ׷ 湡׌ֽ
    ⹛ַׇ׷ 47(
    כ
    卐窩׾ׁ׏ה剅ֹ⳿׃גծ
    ׍׳ֿ׏ה鿇ⴓ涸ח⹛ַׅךחぢְג׷
59. ״ֻ֮׷颵㉏
60. 鯪ֻׅ׷倯岀כ
61. ΞϯΧʔϙΠϯτͷ਺ 1854 ϑΝΠϧ༰ྔ 66KB ΞϯΧʔϙΠϯτͷ਺ 461 ϑΝΠϧ༰ྔ 29KB ،ٝؕ٦ه؎ٝز׾幾׵ׅ
62. ΞϐΞϥϯεͰɺԼ͔Β ʮઢˠઢˠృΓʯͷॱ൪ͱͨ͠ਤܗ 47( ʹอଘ͢Δͱɺࣗಈతʹ෼ׂ͞Εɺ ̏ͭͷಉਤܗ͕ॏͶΒΕΔ SFDU ཁૉ SFDU ཁૉ SFDU ཁૉ ،ؾ،ٓٝأ׾㢳欽׃זְ
63. ؝٦سך㼭侧挿⟃♴ך呞侧׾䫇ִ׷
64. 47(0.(זוד剑黝⻉ׅ׷ https://jakearchibald.github.io/svgomg/
65. MUFS
    כ䗳銲剑⡚ꣲח http://jorgeatgu.github.io/svg-filters/
66. *&
    װ
    "OESPJE
    זוד
    嫰桦ָ期׏ג邌爙ׁ׸׷
68. iOS width="200px" height="160px" viewBox="0 0 200 160" WJFX#PY䭷㹀֮׶կX
    I
    כչQYպ䭷㹀ׅ׷
69. 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
70. ؿؓ٦ٕغحؙכ
71. ؿؓ٦ٕغحָؙ䗳銲זךכծ⚺ח؝؎خ׵ IE 8 Android 2
72. IE 8 Android 2 銲⟝ה׃גוֲ׃ג׮㼎䘔ׅץֹ儗כ չ47(
    ׾⢪׻זְպ
73. ⹈䓼ׅ׷ךחְְ؟؎زכ
74. IUUQTXXXESPQCPYDPNTZLI[TDNTWMUGPMMPXVQ@TWH@MJOLTNE EMQSFWJFXGPMMPXVQ@TWH@MJOLTNE
75. הְֲֿהד
    ת׆כ
    47(
    ׾兛鸐ך歗⫷ה׃ג
    ⢪׏ג׫״ֲ
76. ׬׆ַ׃ְֿה׾׃זֽ׸ל
    47(
    כ׬׆ַ׃ֻזְ
77. 匟歊湫埠 ֮׶ָהֲ׀ְׂת׃׋