This book is for web developers and designers looking to add scalable, device-independent animation, images, and visualizations to their projects. Scalable Vector Graphics is an image file format introduced in 1998 by the World Wide Web Consortium (W3C). For many years, it languished behind poor browser compatibility and an unfriendly API. Over the past few years, it has become a vital part of the modern web development toolkit. SVG offers many important features for the modern web. For example, in a world of multiple device resolutions, it offers a simple path to high-quality image scaling without having to produce multiple resolutions for your image and without having to jump through complicated markup patterns. Also, being built in XML-based markup, it also allows easy access to common JavaScript patterns for creating highly interactive interfaces.
This book will teach you the fundamentals of working with SVG as static images, in CSS, inline as elements in an HTML document, and as a scripted part of animations or visualizations.
This book is for web developers interested in exploring Scalable Vector Graphics. It is written from the perspective of a frontend web developer, but anyone with experience with JavaScript, CSS, and XML-based grammars should find this book accessible.
Prior experience with SVG is not required.
Chapter 1, Introducing Scalable Vector Graphics, introduces the basics of SVG and will show you some fundamental examples of working with the format.
Chapter 2, Getting Started with Authoring SVG, introduces the fundamental concepts for authoring SVG in detail.
Chapter 3, Digging Deeper with SVG Authoring, introduces more advanced concepts for authoring SVG, including transformations, clipping and masking, and importing SVG elements into a document.
Chapter 4, Using SVG in HTML, adds further details about using SVG elements and SVG images in HTML documents.
Chapter 5, Working with SVG and CSS, introduces the reader to using SVG images in CSS, replacing PNGs and Gifs in the modern web development toolkit. This chapter also introduces the many ways you can use CSS to modify SVG elements.
Chapter 6, JavaScript and SVG, teaches the reader the basic JavaScript SVG Application Programming Interface by introducing the common Document Object Model methods that allow a developer to access and manipulate SVG properties.
Chapter 7, Common JavaScript Libraries and SVG, teaches the basics of interfacing with SVG from common libraries and frameworks includding jQuery, AngularJS, Angular, and ReactJS.
Chapter 8, SVG Animation and Visualizations, looks at examples of doing visualizations and animations with SVG.
Chapter 9, Helper Libraries Snap.svg and SVG.js, looks at two current libraries that help with common SVG tasks: Snap.svg and SVG.js.
Chapter 10, Working with D3.js, introduces basic uses of D3 and walks through some simple examples in order to whet your appetite for this powerful library.
Chapter 11, Tools to Optimize Your SVG, focuses on the different tools available to optimize SVGs.
This book assumes that you have knowledge of HTML, XML, CSS, and JavaScript. Knowledge of Node.js and npm-based development is also helpful.
Before you get started, it will help to ensure you have Node.js installed. You will also need a text editor. The samples in the book were written with Visual Studio Code, but any text editor will suffice.
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
- Log in or register at www.packt.com.
- Select the
SUPPORTtab. - Click on
Code Downloads & Errata. - Enter the name of the book in the
Searchbox and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR/7-Zip for Windows
- Zipeg/iZip/UnRarX for Mac
- 7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Mastering-SVG. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781788626743_ColorImages.pdf.
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="150" viewBox="0 0 350 150" version="1.1">
<circle cx="100" cy="75" r="50" fill="rgba(255,0,0,.5)"/>
<circle cx="100" cy="75" r="50" fill="rgba(255,0,0,.5)"
transform="translate(10)" />
<circle cx="100" cy="75" r="50" fill="rgba(255,0,0,.5)"
transform="translate(75,0)" />
</svg>When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
types {
image/svg+xml svg svgz;
}Any command-line input or output is written as follows:
$ npx create-react-app react-svgBold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "In this document, we've created a stylized letter R."
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.