Melinda Kovacs-Sztankovits, Francisco Jose Seva Mora
1xINTERNET, Frankfurt am Main, Germany

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Since they are text, they can be rendered directly in Drupals Twig templates.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.

Just like any other markup in Twig, SVGs can be altered based on variables and logic in the templates.

In this session we will show some awesome effects what you can do with SVG images. We start with looking at the structure of SVGs and how to create and change them. Then we connect the SVGs with variables and logic in our templates. For parameterizing the images we create Drupal functions (content types, theme functions, etc.), so changing SVGs can be done from a Drupal backend.

Throughout the talk we will use fun and blazing SVG effects, so the session becomes interactive and entertaining.

The session is targeted at beginners and experienced developers, that do not have much experience working with SVGs.

Attendees will
- learn how to create and change SVGs
- learn how to use SVGs with Drupal
- learn how to create fun and blazing effects with SVGs
- get a nice starting point to dive deeper into
- have a lot of fun, seeing what can be done with SVGs.