Session Details

Session Details2019-01-07T06:21:08-05:00

Using SVG to create responsive, interactive and animatable graphics

Presented by: Ben Hoffmann

A message is often best stated visually. Traditional methods of designing graphics, diagrams, and charts produce something that retains its aspect ratio, regardless of the size it is viewed. This may work fine for print and slide media, but fails to take advantage of viewing digital content on devices of various screen sizes and resolutions, especially when text associated with the graphic is to be readable. On small devices, while the graphical element may retain its intent (e.g. two overlapping circles), associated text may be shrunk to unreadable point size. This session will describe how to use SVG (Scalable Vector Graphics) as a vector graphic format not just to render the graphic as it was originally designed, but transform itself using technologies such as CSS transforms and javascript to retain its readability on smaller layouts. Methods for exporting vector art from designer software such as Illustrator will be discussed. Demonstrations of mixing SVG and HTML into the same graphic using responsive techniques will be given. Integrating SVG elements with reactive frameworks to enhance interactivity and animation of the graphic will be covered. At the conclusion of the session, participants will have a better understanding of how to use SVG as a high quality format for rendering graphics on the web for a variety of screen sizes, retaining readability without compromising the impact of the graphic.

Tags: Design (UI/UX/CSS), Javascript, MobileLevel: Advanced