Cool Staff of SVG

Interesting ideas of SVG. Cook with React.

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