Next generation graphics

SVGby David Corbacho

Scalable Vector Graphics

Representing graphics with mathematical expressions in XML

like is 1998

David Corbacho Román Senior Drupal developer - Frontend

Drupal core contributor, module maintainer (d.o. user: corbacho)

We are hiringLondon

Twitter @dcorbacho

Disclaimer: I’m not a designer

1. Brief introduction to SVG2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future

Structure

SVG basic concepts

<line>

SVG basic concepts

<rect>

SVG basic concepts

<circle>

SVG basic concepts

<ellipsis>

SVG basic concepts

<polyline>

SVG basic concepts

<polygon>

SVG basic concepts

Uppercase: absolute Lowercase: relative

L Lineto M Moveto C Curveto z close path

<path fill="#004975" d="M510,144.75c-39-24.75-77.25-34.5-114.75-59.25-23.25-15-55.5-53.25-82.5-85.5-5.25,51.75-20.25,73.5-39,87.75-38.25,30-62.25,39-95.25,57-27.75,15-178.5,104.25-178.5,297.75,0,61.78,16.593,118.36,45.063,166.77,60.697,103.2,175.4,169.23,298.44,169.23,180.75,0,337.5-131.25,337.5-330,0-109.15-44.33-185.49-88.28-234.63-36.0

8-40.34-71.9-62.36-82.72-69.12z"/>

Handcoded Twitter bird

https://twitter.com/danklammer/status/628866264153194496

Inkscape. (Open source)

Adobe Illustrator. (Best UI)

Sketch (the new guy)

For the rest of us mere mortals… use SVG Editors

Optimize it jakearchibald.github.io/svgomg/

Automate it SVGO

Bloated SVG code?

Why SVG ?

Why SVG? Always Crisp

https://en.wikipedia.org/wiki/Vector_graphics

Why SVG? Scriptable

http://codepen.io/githiro/pen/xABCi

SVG DOM

Why SVG? Animatablewith:

CSS JavaScript SMIL *

Why SVG? Styleable with CSS

<path fill="#004975" d="M510,144.75c-39-24.75-77.25-34.5-114.75-59.25-23.25-15-55.5-53.25-82.5-85.5-5.25,51.75-20.25,73.5-39,87.75-38.25,30-62.25,39-95.25,57-27.75,15-178.5,104.25-178.5,297.75,0,61.78,16.593,118.36,45.063,166.77,60.697,103.2,175.4,169.23,298.44,169.23,180.75,0,337.5-131.25,337.5-330,

.druplicon { fill:#004975; <path class=“druplicon” … }

Why SVG? Accessibility

http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

Why SVG? Small size

For example, new google logo, 305 bytes

SVG DOM

http://gizmodo.com/how-could-googles-new-logo-be-only-305-bytes-while-its-1728793790

1. Brief introduction to SVG 2. The past3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future

Structure

SVG 1.0 begins in 1998

http://www.w3.org/Talks/2014/schepers-accessible_graphics/rise-and-fall.svghttp://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG

SVG 1.0 = XML + SVG + DOM + CSS + Animations +

Filters + XLINKS + …

2001.SVG 1.0 released

Adobe releases SVG Viewer 3

2003.SVG 1.1 and SVG

Mobile:Tiny and Basic

2005. Adobe adopts Flash

2008 Apple blocks

Flash in iPhone & iPad

2010 IE 9 release.

Implements 60% of SVG spec

2011

SVG 1.1 2nd Edition

Apple Retina

2012Android 3.x implements part of SVG

We need graphics for HD screens, that works in all modern browsers

It’s the SVG Renaissance!

SVG is perfect !!

1. Brief introduction to SVG 2. The past 3. The present. Using SVG4. SVG and Drupal 5. SVG 2: The future

Structure

SVG Basic Support95.92% of browsers (caniuse.com)

Firefox 26+ Chrome 31+

IE10+ Safari 7+

Opera 19+ iOS Safari 3.2+

IE 9 (limited feature set) Android 3.x (no SVG filters)

SVG 1 is a new-old thing “Viejoven”and it has “quirks”

SVG. Markup and Image

The paradox of Schrödinger’s cat

SVG in HTML

“DEAD” for security

“ALIVE” SVG DOM

SVG (nowadays) is a parallel universe, where some rules

don’t apply

No z-index

Fixed in SVG 2

no “structure” properties

via CSS

XML. So much fun

No problems the HTML5 way

jQuery .addClass

not working on SVG elements

but .attr("class", "works");

.addClass fixed in jQuery 3

jQuery .append() or .html()

not working on SVG elements

http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-

svg-element

CSS transforms on SVG

IE no support for CSS transforms

Firefox 41 fixed

SVG adds a new dimension of possibilities5 ways of embedding SVG in your HTML

x multiple ways of scripting SVG

x multiple ways of adding CSS

x multiple ways of “reusing” SVG elements xlink, def, symbol, fill, etc

x html in your svg (foreignObject)

x svg in your svg (nested svg)

x svg in your CSS

x multiple ways of animating techniques and libraries

x multiple browsers. Fallback techniques

caniuse.com can’t track

every single combination

This is too much

SVG Experts

CSS

SVG community

@sarah_edo @anatudor@AmeliasBrain @rachelnabors@SaraSoueidan

Pushing forward SVG Sharing best practices and code

W3C SVG Working Group

@svgeesus @shepazu@erikdahlstromTavmjong Bah @dirkschulze

They want SVG to succeed

Chris Coyier css-tricks, codepen.io

If you have fun with SVG, you will learn it faster

GSAP

http://codepen.io/chrisgannon/pen/xGwybB

snap.svg

http://snapsvg.io/demos/#coffee

SMIL (deprecated in Chrome)

SVG Animations are neat and very good support via JS

but.. really, add 79Kb to the page load ?

Still… it’s a great way to learn SVG

USE case: SVG for your logo

USE case: SVG for icons

USE case: SVG for charts, infographics,

"JavaScript journalism"

Think “jQuery for SVG”

min. 74.9 KB

min. 50.8 KB

d3.js predefined layoutsfull min

148 KB

Mike Bostock building

more modular d3.js version 4

d3.js force graph

1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal5. SVG 2: The future

Structure

Thank you Ryan Frederick (ry5n)

Drupal 8 theme loads logo.svg by default, not logo.png anymore

Issue: https://www.drupal.org/node/2142653 Change: https://www.drupal.org/node/2410787

feed.png to feed.svg

https://www.drupal.org/node/2427213

Drupal SVG Guidelines (on work)https://www.drupal.org/node/2433761

Similar project https://svgontheweb.com/

Drupal 7 has 0 SVG files in core Drupal 8 has 79 SVG files in core

We use them as images, not taking full potential

SVG Sprite for toolbar iconshttps://www.drupal.org/node/2306499

svgimg (Sandbox module)

https://www.drupal.org/sandbox/neilgardner/2505991

used in www.reallifedigital.com/

A word about security

http://www.slideshare.net/x00mario/the-image-that-called-me

1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future

Structure

SVG 2 ripped appart in core + “shared” modules

SVG 2 will bring more integration with new web features such as

CSS, HTML5 and WOFF.http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Commitments

SVG 2 specshttp://www.w3.org/TR/SVG2/ (Working Draft) https://svgwg.org/svg2-draft/ (Editors Draft) https://github.com/w3c/svgwg

Conclusion

Conclusion

SVG is not new.. but it’s here to stay.

Now it’s the time.

and let’s bring more SVG goodness to Drupal

ResourcesDmitry Baranovskiy - You Don't Know SVGhttps://www.youtube.com/watch?v=SeLOt_BRAqc

"If you don't know svg you can't call yourself a Web Developer.Call yourself a Web Enthusiast” — DmitryTavmjong Bah - SVG 2 For the Artist and Developerhttps://www.youtube.com/watch?v=UL2-ZAyvXOM

Everything that Sarah Soueidan publishes.http://sarasoueidan.com/articles/index.html

CSS Tricks. SVG category

2nd edition!

Vote this sessionhttps://events.drupal.org/node/5511