Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Constructing Modern UIs with SVG

Constructing Modern UIs with SVG

timgthomas

June 14, 2018
Tweet

More Decks by timgthomas

Other Decks in Technology

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