Cool Staff of SVG

C0055c579633b487d66374ac8c33b826?s=47 Jiachi
November 23, 2016
Technology
0
83

Cool Staff of SVG

Interesting ideas of SVG. Cook with React.

C0055c579633b487d66374ac8c33b826?s=128

Jiachi

November 23, 2016
Tweet

More Decks by Jiachi

See All by Jiachi
C0055c579633b487d66374ac8c33b826?s=48 huozhi
0
55

Other Decks in Technology

See All in Technology
6c816f42ab77227f2d153a68c179d542?s=48 morux2
5
850
C174e1ef0c746f53d989b1902b4e674e?s=48 govargo
11
1.8k
84907687e50c8ac2a09b02e0d1b36ab1?s=48 toricls
35
11k
C47bda32c8455a59471cd7e19c32c074?s=48 hamadakoji
5
1.4k
C636093440dd4a8be6416e83cb980979?s=48 iselegant
7
430
D9130a0952480278c7f44527c6989da7?s=48 syoshie
6
530
8a9e3e40a5fed444715dc95ee1ca45aa?s=48 tosiooooooo
1
510
1cf2de2da02f94ad87a7a31038721e6c?s=48 capsmalt
1
140
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
1
110
81603b1fb3b31483780be0700ed183e8?s=48 gabidavila
0
230
6d87223b5fcfb9a5a73007f77f134e28?s=48 taketora
0
130
Cc8a208e174943d1da814783841abd50?s=48 shinodogg
0
360

Featured

See All Featured
A9704266587836f7e784235e5073b93e?s=48 jmmastey
2
230
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
154
6.2k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
28
3.1k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.2k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
53
6k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
27k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
115
4.7k

Transcript

  1. Cool Staff of SVG We LOVE ❤ SVG

  2. Fundamental SVG reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths Shape A + Shape B =>

    Awesome Graphics line path circle rect polyline polygon ellipse

  3. Why SVG? What’s special? Easily controlled by PROPS fill, stroke-width,

    stroke-linecap Good Compatibility DOM structured <svg><path d=“…”></svg> Positioning easily x, y, r, cx, cy, x1, y1…

  4. Control Your SVG with React Original Way Now we have

    React ! =>

  5. RESPINNER was born ! https://huozhi.github.io/respinner/

  6. Improve present situation we wanna control more details only single

    path icons?

  7. REICONS was born ! https://huozhi.github.io/reicons/

  8. Complex Application Scenarios d3 force layout graph multi-layer dependency complex

    relationship d3 geographic map fancy background image meaning data visualization

  9. Interesting Extension ISOMORPHIC JS Service serve static icons generate graphics

    request specific query, response dynamic visual display

  10. – huozhi Q & A