Mastering SVG: Web animations, visualizations and vector graphics with HTML, CSS and JavaScript

Book Description

Take the plunge and develop cross-browser-compatible and responsive web designs with SVG

Key Features

• Master the art of custom animations and visualizations with SVG, CSS, and JavaScript
• Combine SVG with third-party libraries and frameworks such as React, JQuery, D3, and Snap.svg for GUI-rich apps
• Create an awesome user experience with high-performance graphics for your web applications

Book Description

SVG is the most powerful image format in use on the web. In addition to producing resolution-independent images for today’s multi-device world, SVG allows you to create animations and visualizations to add to your sites and applications. The simplicity of cross-platform markup, mixed with familiar modern web languages, such as CSS and JavaScript, creates a winning combination for designers and developers alike.

In this book, you will learn how to author an SVG document using common SVG features, such as elements and attributes, and serve SVG on the web using simple configuration tips for common web servers. You will also use SVG elements and images in HTML documents.

Further, you will use SVG images for a variety of common tasks, such as manipulating SVG elements, adding animations using CSS, mastering the basic JavaScript SVG (API) using Document Object Model (DOM) methods, and interfacing SVG with common libraries and frameworks, such as React, jQuery, and Angular.

You will then build an understanding of the Snap.svg and SVG.js APIs, along with the basics of D3, and take a look at how to implement interesting visualizations using the library. By the end of the book, you will have mastered creating animations with SVG.

What you will learn

• Deliver the elements that make up an SVG image
• Replace your old CSS sprites with SVG
• Understand animation and data visualization with SVG are explained in pure JavaScript and using common libraries
• Use SVG to scale images across multiple devices easily
• Harness the power of CSS animations and transformations to manipulate your SVG images in a replicable, remixable way
• Interface SVG with common libraries and frameworks, such as jQuery, React, and Angular

Who this book is for

This book is for web developers and designers looking to add animation to their projects. Some experience with HTML, CSS, and JavaScript is required.

Table of Contents

Chapter 1 Introducing Scalable Vector Graphics
Chapter 2 Getting started with Authoring SVG
Chapter 3 Digging Deeper with SVG Authoring
Chapter 4 Using SVG in HTML
Chapter 5 Working with SVG and CSS
Chapter 6 JavaScript and SVG
Chapter 7 Common JavaScript Libraries and SVG
Chapter 8 SVG Animation and Visualizations
Chapter 9 Helper Libraries Snap.svg and SVG.js
Chapter 10 Working with D3.js
Chapter 11 Tools to Optimize your SVGs

中文：

书名：Mastering SVG: Web animations, visualizations and vector graphics with HTML, CSS and JavaScript

大胆尝试，使用SVG开发跨浏览器兼容且响应迅速的Web设计

Key Features

• 掌握使用SVG、CSS和JavaScript制作定制动画和可视化效果的艺术
• 将SVG与第三方库和框架相结合，如React、JQuery、D3和Snap.svg，以用于富图形用户界面的应用程序
• 使用高性能图形为您的Web应用程序创建卓越的用户体验

图书描述

SVG是Web上使用的功能最强大的图像格式。除了为当今的多设备世界制作与分辨率无关的图像外，SVG还允许您创建动画和可视化效果，以添加到您的站点和应用程序中。跨平台标记的简单性与熟悉的现代Web语言(如CSS和JavaScript)相结合，为设计人员和开发人员创造了一个成功的组合。

在本书中，您将学习如何使用常见的SVG功能(如元素和属性)创建SVG文档，并使用常见Web服务器的简单配置提示在Web上提供SVG。您还将在HTML文档中使用SVG元素和图像。

此外，您将使用SVG图像执行各种常见任务，例如操作SVG元素、使用CSS添加动画、使用文档对象模型(DOM)方法掌握基本的JavaScript SVG(API)，以及将SVG与常见的库和框架(如Reaction、jQuery和ANGING)接口。

然后，您将了解Snap.svg和SVG.js API，以及D3的基础知识，并了解如何使用库实现有趣的可视化。到本书结束时，您将掌握如何使用SVG创建动画。

你将学到什么

• 提供组成SVG图像的元素
• 用SVG替换旧的CSS精灵
• 了解使用SVG实现动画和数据可视化的方法，并使用通用库进行说明
• 使用SVG轻松跨多个设备缩放图像
• 利用CSS动画和变换的强大功能，以可复制、可混合的方式处理SVG图像
• 将SVG与通用库和框架(如jQuery、Reaction和Angel)进行接口

这本书是为谁而写的

这本书是为希望在他们的项目中添加动画的Web开发人员和设计人员编写的。需要一些使用HTML、CSS和JavaScript的经验。

目录表

Chapter 1 Introducing Scalable Vector Graphics
第2章创作SVG入门
第3章使用SVG创作进行深入挖掘
第4章在HTML中使用SVG
第5章使用SVG和CSS
第6章：JavaScript和SVG
第7章常见的JavaScript库和SVG
Chapter 8 SVG Animation and Visualizations
第9章帮助器库Snap.svg和SVG.js
第10章使用D3.js
第11章优化您的SVG的工具