Meta Refresh 2018

The web in your pocket

Propose a session

Journey towards SVG Ninja Land

Submitted by Prashant (@prashantsani) on Saturday, 30 September 2017

Section: Full talk Technical level: Beginner


SVG is one of the most powerful but under-utilised tool of the modern web. This talk would focus on utilising the power of SVGs beyond using them as static images and background images.



  1. SVG Very Very Basics
  2. Shapes/Tags Available (eg. circle, polyline, line, etc)
  3. Fills and strokes
  4. Icon Fonts Vs SVG and SVG Spriting
  5. SVG Scaling: SVG Viewport and values for preserveAspectRatio
  6. SVG Animation using CSS
  7. SVG Filters
  8. Using SVG Creatively in your project
  9. SVG optimisation techniques at design level

Slides to be updated soon!


  1. Basic HTML & CSS knowledge
  2. An Open Mind.

Speaker bio

Prashant Sani is a freelance front-end developer with an experience of over 5 years. He primarily works on utilising the power of HTML, CSS, SVG and JavaScript to create responsive and interactive website experiences.



  • Zainab Bawa (@zainabbawa) a year ago

    We have had SVG talks at Meta Refresh earlier. This talk is very introductory and hence, not interesting for Meta Refresh.

Login with Twitter or Google to leave a comment