SVG Reality

Talk at CSSConf.asia 2014
http://2014.cssconf.asia/

Transcript

1. REALITY SVG REALITY SVG SVG REALITY
2. 1024×768 1024×768 1024×768
3. OMG×FML OMG×FML OMG×FML
4. FIT FIT FIT
5. HiDPI HiDPI HiDPI
6. LoDPI LoDPI LoDPI
7. STRETCH STRETCH STRETCH
8. ONE DIV?! ONE DIV?! ONE DIV?!
9. RUBE GOLDBERG CSS RUBE GOLDBERG CSS RUBE GOLDBERG CSS
10. SCALABLE VECTOR GRAPHICS SCALABLE VECTOR GRAPHICS SCALABLE VECTOR GRAPHICS
12. SEBASTIAAN DECKERS SEBASTIAAN DECKERS SEBASTIAAN DECKERS FRONT END DEVELOPER AT COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG
13. FRONT END DEVS SG FRONT END DEVS SG FRONT END DEVS SG
14. 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
15. USAGE USAGE USAGE
16. Native support for inline <svg/>
17. CSS url(image.svg)
18. SVG FONTS DEPRECATED COMEBACK? SVG FONTS DEPRECATED COMEBACK? SVG FONTS DEPRECATED COMEBACK?
19. SVG FRAGMENTS SVG FRAGMENTS SVG FRAGMENTS
20. USAGE SVG Building Blocks SVG Building Blocks SVG Building Blocks
21. = CSS 2.1 UNITS = CSS 2.1 UNITS UNITS = CSS 2.1
22. BASIC SHAPES
23. Paths <path> Text based drawing instructions for line, arc, bezier curve, quadratic curve, etc. Use an editor! Inkscape, Sketch, Illustrator
24. Embedded images <image> with xlink:href="foobar.{png,jpeg, gif,webp,svg}" or Base64 encoded
25. And more... Groups, Patterns, Transformations, References, ...
26. SVG DOM SVG DOM SVG DOM
27. XMLNS XMLNS XMLNS svgns = “http://www.w3.org/2000/svg” document.createElementNS(svgns, …) document.setAttributeNS document.getElementsByTagNameNS
28. API WRAPPERS API WRAPPERS API WRAPPERS
29. WEB COMPONENTS WEB COMPONENTS WEB COMPONENTS document.registerElement('my-shape', { extends: 'circle', prototype: Object.create( SVGCircleElement.prototype, {/*...*/} ) })
30. CSS & SVG CSS & SVG CSS & SVG
31. INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL FROM SVG INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL FROM SVG
32. Tips & Tricks Tips & Tricks Tips & Tricks
33. viewBox min-x min-y width height
34. 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
36. MAX SIZE MAX SIZE MAX SIZE Infinite resolution, but Maximum ±5 megapixels
37. SVGOptimizer SVGOptimizer SVGOptimizer also as {grunt,gulp}-svgmin also as {grunt,gulp}-svgmin also as {grunt,gulp}-svgmin
38. BUT WAIT... BUT WAIT... BUT WAIT...
39. ANIMATION SMIL & JS ANIMATION SMIL & JS ANIMATION SMIL & JS
40. SVG 1.2 SVG 2 SVG 1.2 SVG 2 SVG 1.2 SVG 2
41. THANK YOU THANK YOU THANK YOU