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

Rob Larsen

  • 出版商: Packt Publishing
  • 出版日期: 2018-09-24
  • 售價: $1,520
  • 貴賓價: 9.5$1,444
  • 語言: 英文
  • 頁數: 312
  • 裝訂: Paperback
  • ISBN: 1788626745
  • ISBN-13: 9781788626743
  • 相關分類: CSSHTMLJavaScript
  • 立即出貨 (庫存=1)

買這商品的人也買了...

商品描述

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

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

商品描述(中文翻譯)

勇於嘗試,使用SVG開發跨瀏覽器相容且響應式的網頁設計

主要特點



  • 掌握使用SVG、CSS和JavaScript進行自定義動畫和視覺化的技巧

  • 將SVG與React、JQuery、D3和Snap.svg等第三方庫和框架結合,打造GUI豐富的應用程式

  • 為您的網頁應用程式創建高性能圖形,提供出色的用戶體驗

書籍描述


SVG是目前在網頁上使用的最強大的圖像格式。除了為當今多設備世界提供解析度獨立的圖像外,SVG還允許您創建動畫和視覺化效果,以增強您的網站和應用程式。跨平台標記語言的簡單性,再加上熟悉的現代網頁語言,如CSS和JavaScript,為設計師和開發人員提供了一個絕佳的組合。

在本書中,您將學習使用常見的SVG功能(例如元素和屬性)來編寫SVG文檔,並使用常見的Web服務器的簡單配置技巧在Web上提供SVG。您還將在HTML文檔中使用SVG元素和圖像。

此外,您還將使用SVG圖像執行各種常見任務,例如操作SVG元素,使用CSS添加動畫,使用文檔對象模型(DOM)方法掌握基本的JavaScript SVG(API),以及將SVG與常見的庫和框架(如React、jQuery和Angular)進行接口。

然後,您將了解Snap.svg和SVG.js API的基礎,以及D3的基礎,並研究如何使用該庫實現有趣的視覺化效果。通過本書的學習,您將掌握使用SVG創建動畫的技巧。

您將學到什麼



  • 提供構成SVG圖像的元素

  • 使用SVG替換舊的CSS精靈

  • 純JavaScript和常見庫解釋動畫和數據視覺化

  • 使用SVG輕鬆在多個設備上縮放圖像

  • 利用CSS動畫和變換的功能以可複製、可重複使用的方式操作SVG圖像

  • 將SVG與常見的庫和框架(如jQuery、React和Angular)進行接口

適合閱讀對象


本書適合希望為其項目添加動畫效果的網頁開發人員和設計師。需要具備HTML、CSS和JavaScript的一些經驗。

目錄



  1. 介紹可縮放向量圖形

  2. 開始使用SVG編寫

  3. 深入研究SVG編寫

  4. 在HTML中使用SVG

  5. 使用SVG和CSS

  6. JavaScript和SVG

  7. 常見的JavaScript庫和SVG

  8. SVG動畫和視覺化

  9. 輔助庫Snap.svg和SVG.js

  10. 使用D3.js

  11. 優化SVG的工具