Meta Refresh 2014

On the construction of user interface on the web

Modern web graphics design using SVG

Submitted by Priyanka Herur (@priyanka-herur) on Monday, 9 December 2013

Section: Workshops Technical level: Beginner

Vote on this proposal

Login to vote

Total votes:  +10


This talk will cover all facets of designing assets through SVG. This will be covered with examples.
Things that will be discussed in detail:
1. What, Why and where you need SVG?
2. Elements such as path along with properties such as backgrounds and patterns
3. Clipping, Masking and Blending
4. SVG filters and animation
5. SVG libraries such as Snap, Raphael, etc.,
6. Future of SVG


In this session we'll look at Scalable Vector Graphics (SVG). SVG offers great opportunities to use for graphic elements on websites. They look great on all screens including retina displays. They can be easily embedded in CSS due to their small size. They also offer interactivity which means they can do more then just be an image on a site. These advantages make SVG a perfect addition to create resolution independent graphics for the future web. In this talk, the speaker will show demos and practical examples of how SVG can be mixed with other technologies to create compelling web assets.

Speaker bio

Priyanka Herur is a Software Engineer who has worked for various Web Design tools at Adobe. In the last 4 years, she has worked on applications using SVG libraries like Raphael and other web frameworks like jQuery, Underscore and Backbone. She likes interacting with the user community to better understand design needs.


  • 1
    Pooja Saxena (@anexasajoop) 5 years ago

    Hi Priyanka, thank you for your proposal! Could you tell us a little about the structure of your presentation—how do you plan to split your talk, time-wise, between talking about [1] of your objective, and the demos and practical examples?

  • 1
    Priyanka Herur (@priyanka-herur) Proposer 5 years ago (edited 5 years ago)

    I’ll spread the talk over 30mins.
    [5-7mins]Introduction to SVG. Examples showcasing the power of SVG which includes responsiveness to different screen sizes and resolution independence. Why we should adopt SVG and when to use it.

    [12mins] SVG elements and their properties including patterns, clipping, etc., The next couple of minutes would cover animation related properties. All of the above will be demonstrated with examples.

    [5mins] Open source libraries available for SVG, showing examples of which library would be best suited in which use cases(D3, snap, etc.,). Browser support.

    [2mins] Tools which can be used to create SVG such as Illustrator, Inkscape, SVG edit, etc,.

    [3-5mins] I’d like to end by talking about features that will be available in the next version of SVG and about the impact that it would have in future web tools.

    • 1
      Kiran Jonnalagadda (@jace) Reviewer 5 years ago

      Priyanka, I suspect an intro to SVG isn’t going to go down that well. Everyone knows what SVG is already, and Inkscape or Illustrator can output ready to use SVG.

      An advanced talk on inline SVG that interacts with the page, however, will be fabulous. Most people just use a framework like D3 for this instead of hand coding the necessary SVG.

      Also, a beginner workshop on SVG that covers your outline but spread over 3 hours could work.

      • 1
        Arpan CJ (@arpancj) 5 years ago

        Agree. A workshop that focused on inline SVG and how to interact with it from CSS & JS would be very interesting to me.

        We are all familiar with generating SVG using GUI tools, but learning about raw SVG and the posibilites that that offers - interactivity, SVG animation, SVG animation with CSS transitions, replacing complex HTML+CSS with SVG, SVG icons etc.

  • 1
    Priyanka Herur (@priyanka-herur) Proposer 5 years ago

    I’m interested in doing the session on the same topic. The session can be expanded to a workshop in which case, there’ll be more hand-on demos.

Login with Twitter or Google to leave a comment