DrupalCon Amsterdam 2019: SVGs in Drupal Frontends - Creating configurable blazing effects

Nov 01, 2019

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.

Hi! I'm Karim Boudjema, the developer and site-builder of this site.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.