Dudley Storey

Using Scalable Vector Graphics (SVG) for illustrations only scratches the surface of this format’s potential on the web. With this practical guide, you’ll learn how to use SVG not only for illustrations but also as graphical documents that you can integrate into complex HTML5 web pages, and style with custom CSS. Web developers will discover ways to adapt designs by adding data based graphics, dynamic styles, interaction, or animation. Divided into five parts, this book includes: SVG on the web: Understand how SVG works with HTML, CSS, and JavaScript to define graphics Drawing with markup: Learn the vector language of x and y coordinates that let SVG create basic and custom shapes Putting graphics in their place: Use the coordinate system to draw SVG shapes and text at different scales and positions Artistic touches: Explore how color is used, how strokes are created and manipulated, and how graphical effects like filters, clipping, and masking are applied SVG as an application: Make your graphic more accessible to humans and computers, and learn how to make it interactive or animated

Pro CSS3 Animation will teach you how to use fresh new CSS3 syntax to fully utilize this exciting tool for web design. Using cutting-edge industry standards and drawing on best practices for animation, you will learn how to apply CSS3 animation to transform and bring your page content to life. CSS3 is the way forward for web page interactivity and animation, offering new and exciting options for design. Integrated with HTML5, SVG and mobile design methodologies, you can bring sites into the third dimension to change the perception and appreciation generated in your audience. This book will teach you how to: Enhance your web pages, and your visitor’s experience of your site, with animation Animate images and other page content to create banners, interactive galleries and slideshows Provide fallback and support options for older browsers Chain CSS3 syntax with @media queries, filters and 3D transformations to create responsive animations with depth Provide animation to mobile devices without Flash or JavaScript