Cargando…

Mastering SVG : ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript.

SVG is considered an important aspect of animating your web applications. Its cross-platform markup along with the combination of modern web technologies proves to be a great combination for web designers and developers. This book will show you the different facets of SVG and the various considerati...

Descripción completa

Detalles Bibliográficos
Clasificación:Libro Electrónico
Autor principal: Larsen, Rob
Formato: Electrónico eBook
Idioma:Inglés
Publicado: Birmingham : Packt Publishing Ltd, 2018.
Temas:
Acceso en línea:Texto completo
Tabla de Contenidos:
  • Cover
  • Title Page
  • Copyright and Credits
  • PacktPub.com
  • Contributors
  • Table of Contents
  • Preface
  • Chapter 1: Introducing Scalable Vector Graphics
  • Creating a simple SVG image
  • Using SVG as a content image
  • Drawing with code
  • Scalable + vector graphics
  • Using SVG in CSS
  • Gradients in SVG
  • Directly embedding SVG in an HTML document
  • Feature detection and Modernizr
  • Summary
  • Chapter 2: Getting Started with Authoring SVG
  • Positioning in SVG
  • viewBox and viewport in SVG
  • Introducing paths
  • More on basic shapes
  • The line element
  • The ellipse element
  • The polygon element
  • The polyline element
  • More on fills and strokes
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap
  • stroke-linejoin
  • stroke-opacity
  • linearGradient and radialGradient
  • The pattern element
  • Authoring programs
  • Summary
  • Chapter 3: Digging Deeper with SVG Authoring
  • Transformations
  • translate
  • scale
  • rotate
  • skew
  • Clipping and masking
  • Clipping
  • Masking
  • Importing images into SVG
  • Filters
  • Serving SVG on the web
  • Apache
  • nginx
  • IIS
  • Summary
  • Chapter 4: Using SVG in HTML
  • SVG, HTML, and accessibility
  • SVG as an image src
  • Inline SVG
  • SVG and responsive web design
  • The srcset attribute
  • The srcset and sizes attributes
  • The picture element
  • Additional details on inline SVG in an HTML document
  • Caching
  • Complexity
  • Authoring
  • The Document Object Model
  • Summary
  • Chapter 5: Working with SVG and CSS
  • CSS background images
  • Data URLs for SVG background images
  • SVG sprites and icon sets
  • Styling inline SVG
  • Using common CSS properties to manipulate SVGs
  • Basic font properties
  • Text properties
  • Miscellaneous CSS properties
  • Using SVG-specific CSS properties to manipulate SVGs
  • Color and painting properties
  • Stroke properties
  • Text properties.
  • Compositing properties
  • Interactivity properties
  • Styles in standalone SVG images
  • Basic CSS animations and transitions with SVG
  • CSS animations
  • Basic animation format
  • Animating a clip path
  • Animating multiple properties and assigning multiple animations to an element
  • CSS transitions
  • Summary
  • Chapter 6: JavaScript and SVG
  • JavaScript Versions and tools
  • JavaScript Versions
  • ECMAScript 5
  • ECMAScript 2015
  • TypeScript
  • Tooling
  • The DOM interface to SVG
  • Initial exploration
  • The SVG DOM manipulator
  • Summary
  • Chapter 7: Common JavaScript Libraries and SVG
  • Manipulating SVG with jQuery
  • Working with AngularJS and SVG
  • Manipulating SVG with Angular
  • Getting started with Angular
  • Installing Node, npm, and Angular Cli
  • Working with React and SVG
  • Summary
  • Chapter 8: SVG Animation and Visualizations
  • Creating an SVG data visualization
  • General techniques for animating SVG
  • Animating with pure JavaScript
  • Animating with CSS
  • Animating SVG with SMIL
  • Animating SVG with Vivus
  • Animating SVG with GSAP
  • Summary
  • Chapter 9: Helper Libraries Snap.svg and SVG.js
  • Working with Snap.svg
  • Getting started with Snap.svg
  • Animation with Snap
  • Snap.svg utilities
  • Snap.svg events
  • Custom data visualization with Snap.svg
  • Working with SVG.js
  • Getting started with SVG.js
  • Animation with SVG.js
  • SVG.js utilities
  • SVG.js events
  • Custom data visualization with SVG.js
  • Summary
  • Chapter 10: Working with D3.js
  • Getting started with D3
  • D3's enter and exit
  • Implementing a donut chart with D3
  • Implementing a chord diagram in D3
  • Summary
  • Chapter 11: Tools to Optimize Your SVG
  • Serving compressed SVG
  • gzipping SVG on Apache
  • SVG compression on nginx
  • SVG compression on IIS
  • SVGO
  • SVGOMG
  • SVGO authoring plugins
  • svgcleaner
  • Summary.
  • Other Books You May Enjoy
  • Index.