SVG Reality - Speaker Deck

Slide 1

Slide 1 text

REALITY SVG REALITY SVG SVG REALITY

Slide 2

Slide 2 text

1024×768 1024×768 1024×768

Slide 3

Slide 3 text

OMG×FML OMG×FML OMG×FML

Slide 4

Slide 4 text

FIT FIT FIT

Slide 5

Slide 5 text

HiDPI HiDPI HiDPI

Slide 6

Slide 6 text

LoDPI LoDPI LoDPI

Slide 7

Slide 7 text

STRETCH STRETCH STRETCH

Slide 8

Slide 8 text

ONE DIV?! ONE DIV?! ONE DIV?!

Slide 9

Slide 9 text

RUBE GOLDBERG CSS RUBE GOLDBERG CSS RUBE GOLDBERG CSS

Slide 10

Slide 10 text

SCALABLE VECTOR GRAPHICS SCALABLE VECTOR GRAPHICS SCALABLE VECTOR GRAPHICS

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

SEBASTIAAN DECKERS SEBASTIAAN DECKERS SEBASTIAAN DECKERS FRONT END DEVELOPER AT COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG

Slide 13

Slide 13 text

FRONT END DEVS SG FRONT END DEVS SG FRONT END DEVS SG

Slide 14

Slide 14 text

SVG vs CSS SVG vs CSS SVG vs CSS HiDPI Animations Hardware Acceleration Blending Modes Responsive Media Queries Debugging Inspector Filters DOM API Scripting Colour Profiles

Slide 15

Slide 15 text

USAGE USAGE USAGE

Slide 16

Slide 16 text

Native support for inline

Slide 17

Slide 17 text

CSS url(image.svg)

Slide 18

Slide 18 text

SVG FONTS DEPRECATED COMEBACK? SVG FONTS DEPRECATED COMEBACK? SVG FONTS DEPRECATED COMEBACK?

Slide 19

Slide 19 text

SVG FRAGMENTS SVG FRAGMENTS SVG FRAGMENTS

Slide 20

Slide 20 text

USAGE SVG Building Blocks SVG Building Blocks SVG Building Blocks

Slide 21

Slide 21 text

= CSS 2.1 UNITS = CSS 2.1 UNITS UNITS = CSS 2.1

Slide 22

Slide 22 text

BASIC SHAPES

Slide 23

Slide 23 text

Paths Text based drawing instructions for line, arc, bezier curve, quadratic curve, etc. Use an editor! Inkscape, Sketch, Illustrator

Slide 24

Slide 24 text

Embedded images with xlink:href="foobar.{png,jpeg, gif,webp,svg}" or Base64 encoded

Slide 25

Slide 25 text

And more... Groups, Patterns, Transformations, References, ...

Slide 26

Slide 26 text

SVG DOM SVG DOM SVG DOM

Slide 27

Slide 27 text

XMLNS XMLNS XMLNS svgns = “http://www.w3.org/2000/svg” document.createElementNS(svgns, …) document.setAttributeNS document.getElementsByTagNameNS

Slide 28

Slide 28 text

API WRAPPERS API WRAPPERS API WRAPPERS

Slide 29

Slide 29 text

WEB COMPONENTS WEB COMPONENTS WEB COMPONENTS document.registerElement('my-shape', { extends: 'circle', prototype: Object.create( SVGCircleElement.prototype, {/*...*/} ) })

Slide 30

Slide 30 text

CSS & SVG CSS & SVG CSS & SVG

Slide 31

Slide 31 text

INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL FROM SVG INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL FROM SVG

Slide 32

Slide 32 text

Tips & Tricks Tips & Tricks Tips & Tricks

Slide 33

Slide 33 text

viewBox min-x min-y width height

Slide 34

Slide 34 text

preserveAspectRatio preserveAspectRatio POOR MAN’S BG-SIZE preserveAspectRatio X/Y min/mid/max, slice/keep X/Y min/mid/max, slice/keep X/Y min/mid/max, slice/keep POOR MAN’S BG-SIZE POOR MAN’S BG-SIZE

Slide 35

Slide 35 text