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...
Clasificación: | Libro Electrónico |
---|---|
Autor principal: | |
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.