Constructing Modern UIs with SVG

Transcript

1. Constructing Modern UIs with SVG
   Tim G. Thomas • @timgthomas
   

   View Slide

2. Today
   Basics
   Integration
   Advanced SVG
   

   View Slide

3. Basics
   

   View Slide

4. SVG
   Scalable
   Vector
   Graphics
   

   View Slide

5. SVG
   Scalable
   Vector
   Graphics
   

   View Slide

6. SVG
   Scalable
   Vector
   Graphics
   

   View Slide

7. SVG
   Scalable
   Vector
   Graphics
   

   View Slide

8. SVG
   Scalable
   Vector
   Graphics
   

   View Slide

9. SVG
   Scalable
   Vector
   Graphics
   

   View Slide

10. Why SVG?
    Non-flow-based layout
    Visual effects
    Why not?
    

    View Slide

11. Uses for SVG
    Glyphs + Icons
    Visualizations
    Components
    Full Apps
    

    View Slide

12. Creating SVG
    By hand
    Apps
    Procedurally
    Libraries
    

    View Slide

13. Creating SVG
    By hand
    Apps
    Procedurally
    Libraries
    
    
    
    

    View Slide

14. Creating SVG
    By hand
    Apps
    Procedurally
    Libraries
    

    View Slide

15. Creating SVG
    By hand
    Apps
    Procedurally
    Libraries
    

    View Slide

16. Creating SVG
    By hand
    Apps
    Procedurally
    Libraries
    
    {{#each shape as |d|}}
    
    {{/each}}
    
    

    View Slide

17. Creating SVG
    By hand
    Apps
    Procedurally
    Libraries
    svgjs.com
    snapsvg.io
    d3js.org
    

    View Slide

18. Integration
    

    View Slide

19. Integration
    Inline
    Reference
    
    

    View Slide

20. Integrating SVG
    Inline
    
    
    
    
    
    

    View Slide

21. Integrating SVG
    Inline with React
    render() {
    return (
    
    
    
    
    
    
    );
    },
    

    View Slide

22. Integrating SVG
    References
    .logo {
    background-image: url('logo.svg');
    }
    

    View Slide

23. Integrating SVG
    
    
    
    
    
    
    
    
    
    
    

    View Slide

24. Styling SVG
    Attributes
    CSS
    

    View Slide

25. Styling SVG
    Attributes
    />
    

    View Slide

26. Styling SVG
    Attributes
    fill="#6495ed"
    />
    

    View Slide

27. Styling SVG
    Attributes
    fill="#6495ed"
    stroke="#ff1493"
    />
    

    View Slide

28. Styling SVG
    Attributes
    fill="#6495ed"
    stroke="#ff1493"
    rx="10" ry="10"
    />
    

    View Slide

29. Styling SVG
    CSS
    
    rect {
    fill: #6495ed;
    stroke: #ff1493;
    }
    

    View Slide

30. Advanced SVG
    

    View Slide

31. Advanced SVG
    Blend Modes
    Line Drawing
    Symbols
    Clipping
    Filters
    A Real-World App
    

    View Slide

32. Advanced SVG
    Blend Modes
    

    View Slide

33. Advanced SVG
    Blend Modes
    

    View Slide

34. Advanced SVG
    Blend Modes
    .tint {
    mix-blend-mode: color;
    }
    

    View Slide

35. Advanced SVG
    Blend Modes
    Branding
    Photo Filters
    UI Tricks
    

    View Slide

36. Advanced SVG
    Line Drawing
    

    View Slide

37. Advanced SVG
    Line Drawing
    

    View Slide

38. Advanced SVG
    Line Drawing
    Create Path
    Stroke with Dash
    Add Dash Offset+Width
    Animate!
    

    View Slide

39. Advanced SVG
    Line Drawing
    Create Path
    Stroke with Dash
    Add Dash Offset+With
    Animate!
    

    View Slide

40. Advanced SVG
    Line Drawing
    Create Path
    Stroke with Dash
    Add Dash Offset+Width
    Animate!
    

    View Slide

41. Advanced SVG
    Line Drawing
    Create Path
    Stroke with Dash
    Add Dash Offset+Width
    Animate!
    

    View Slide

42. Advanced SVG
    Line Drawing
    Create Path
    Stroke with Dash
    Add Dash Offset+Width
    Animate!
    

    View Slide

43. Advanced SVG
    Line Drawing
    Create Path
    Stroke with Dash
    Add Dash Offset+Width
    Animate!
    

    View Slide

44. Advanced SVG
    Line Drawing
    path {
    stroke-dasharray: 750, 1000;
    }
    @keyframes handwriting {
    0% { stroke-offset: 0%; }
    100% { stroke-offset: 100%; }
    }
    

    View Slide

45. Advanced SVG
    Line Drawing
    path {
    stroke-dasharray: 750, 1000;
    }
    @keyframes handwriting {
    0% { stroke-offset: 0%; }
    100% { stroke-offset: 100%; }
    }
    

    View Slide

46. Advanced SVG
    Line Drawing
    Use Sparingly!
    

    View Slide

47. Advanced SVG
    Symbols
    

    View Slide

48. Advanced SVG
    Symbols
    
    
    
    

    View Slide

49. Advanced SVG
    Symbols
    
    
    
    
    

    View Slide

50. Advanced SVG
    Symbols
    
    
    
    style="fill: #6495ed" />
    style="fill: #ff1493" />
    

    View Slide

51. Advanced SVG
    Symbols
    Reduce Duplication
    Composition
    Glyphs/Icons
    

    View Slide

52. Advanced SVG
    Clipping + Masking
    

    View Slide

53. Advanced SVG
    Clipping + Masking
    
    
    
    
    

    View Slide

54. Advanced SVG
    Clipping + Masking
    
    
    r="128" />
    
    
    

    View Slide

55. Advanced SVG
    Clipping + Masking
    
    
    r="128" />
    
    
    href="unclipped.png"
    />
    

    View Slide

56. Advanced SVG
    Clipping + Masking
    
    
    r="128" />
    
    
    href="unclipped.png"
    clip-path="url(#mask)"
    />
    

    View Slide

57. Advanced SVG
    Clipping + Masking
    Use sparingly!
    

    View Slide

58. Advanced SVG
    Filters
    

    View Slide

59. Advanced SVG
    Filters
    
    
    NDC
    

    View Slide

60. Advanced SVG
    Filters
    
    type="turbulence"
    baseFrequency="0.05"
    numOctaves="2"
    result="turbulence" />
    
    NDC
    

    View Slide

61. Advanced SVG
    Filters
    
    type="turbulence"
    baseFrequency="0.05"
    numOctaves="2"
    result="turbulence" />
    in="SourceGraphic"
    in2="turbulence"
    scale="50"
    xChannelSelector="R"
    yChannelSelector="G"
    result="displacement" />
    
    NDC
    

    View Slide

62. Advanced SVG
    Filters
    
    type="turbulence"
    baseFrequency="0.05"
    numOctaves="2"
    result="turbulence" />
    in="SourceGraphic"
    in2="turbulence"
    scale="50"
    xChannelSelector="R"
    yChannelSelector="G"
    result="displacement" />
    in="displacement"
    stdDeviation="3" />
    
    NDC
    

    View Slide

63. Advanced SVG
    Filters
    type="turbulence"
    baseFrequency="0.05"
    numOctaves="2"
    result="turbulence">
    attributeType="XML"
    attributeName="baseFrequency"
    from="0.05" to="0"
    dur="10s"
    repeatCount="indefinite" />
    
    

    View Slide

64. Advanced SVG
    Filters
    type="turbulence"
    baseFrequency="0.05"
    numOctaves="2"
    result="turbulence">
    attributeType="XML"
    attributeName="baseFrequency"
    from="0.05" to="0"
    dur="10s"
    repeatCount="indefinite" />
    
    

    View Slide

65. Advanced SVG
    A Real-World App
    

    View Slide

66. Custom Shapes
    Blend Modes
    Clip Paths
    

    View Slide

67. Custom Shapes
    Blend Modes
    Clip Paths
    

    View Slide

68. Further Research
    developer.mozilla.org/docs/Web/SVG
    css-tricks.com/mega-list-svg-information
    bit.ly/ndcoslo-svg
    

    View Slide

69. Thanks for coming!
    @timgthomas • timgthomas.com
    

    View Slide