40,81 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 317
Veröffentlichungsjahr: 2018
Ähnliche
Mastering SVG
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Kunal ChaudhariAcquisition Editor: Karan GuptaContent Development Editor: Arun NadarTechnical Editor: Surabhi KulkarniCopy Editor: Safis EditingProject Coordinator: Sheejal ShahProofreader: Safis EditingIndexer: Mariammal ChettiyarGraphics: Alishon MendonsaProduction Coordinator: Deepika Naik
First published: September 2018
Production reference: 1190918
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78862-674-3
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Rob Larsen is an experienced frontend engineer, team lead, and manager. He is an active writer and speaker on web technology with a special focus on the continuing evolution of HTML, CSS, and JavaScript. He is a co-author of Professional jQuery, the author of Beginning HTML and CSS, and the author of The Uncertain Web. He's also an active member of the open source community as a maintainer of several popular projects.
About the reviewer
Danny Allen is a full-stack web developer who focuses on user experience design and implementation as founder of the international consultancy Wonderscore Ltd (wonderscore[dot]co[dot]uk).
He is passionate about building high-quality, accessible, and usable experiences on the web.
Danny currently lives and works in the United Kingdom.
His portfolio and contact details can be found at dannya[dot]com.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Mastering SVG
PacktPub.com
Why subscribe?
PacktPub.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book.
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
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
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
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
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
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
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
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
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
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
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
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
Leave a review - let other readers know what you think
Preface
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.
Who this book is for
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.
What this book covers
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.
To get the most out of this book.
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.
Download the example code files
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
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box 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!
Download the color images
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.
Conventions used
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-svg
Bold: 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."
Get in touch
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.
Reviews
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.
Introducing Scalable Vector Graphics
Scalable Vector Graphics (SVG) is one of the most powerful components of modern web development. If used properly, it can solve common problems relating to the design, development, and delivery of imagery and user interfaces
SVG is an XML-based markup language used to define images. What HTML is to text, SVG is to images.
SVG is very flexible. It can be implemented as a standalone image and used as the src of an image or as a background image in CSS such as a PNG, GIF, or JPG. It can also be embedded directly into an HTML page and manipulated with CSS or JavaScript to create animations, visualizations, and interactive charts.
So, if SVG is that important and can do so much, why isn't it even more widely used? Why does it feel like we're only scratching the surface of what's possible with it? Why does it still feel like a new thing?
The problem is, not everyone knows everything that SVG is capable of and not everyone who knows what it's capable of is able to implement SVG solutions in an optimal manner. This book aims to help everyone interested in using SVG to get over those hurdles and master this vital technology.
SVG has had a circuitous route to its place in the pantheon of modern web development technologies. Released in 1999 (it's older than XHTML), SVG languished for a decade because of lack of support in the then dominant Internet Explorer browsers. The technology started to gain favor several years ago with JavaScript libraries, such as Raphaël, which added programmatic fallback support for older versions of IE and the trend has only grown stronger since. Thankfully, the tide has fully turned. All modern versions of Internet Explorer and Edge have support for SVG and there's strong support for the technology from all browser manufacturers, including, of course, Chrome and Firefox.
By the end of this chapter, you will understand the basics of SVG in its many guises. You will be able to take existing SVG images and use them in web pages and CSS with confidence and you'll be well on your way to the promised land of SVG mastery.
This chapter will cover the following topics:
An introduction to fundamental SVG grammar and vector graphics in general
The whys and hows of using SVG as the
src
file of an image
Basic usage of SVG as a CSS background image
The benefits and differences of using SVG embedded directly in a document
A brief introduction to Modernizr and feature detection
Creating a simple SVG image
If you're at all familiar with HTML, then the basics of an SVG document are going to be familiar to you. So let's get the mystery out of the way early and take a look at a simple SVG document.
The following code sample shows the basic structure of SVG. The first element is the standard xml declaration, indicating that the following should be parsed as an XML document. The second element is where the fun begins. It defines the root SVG element (in the same way that there's a root HTML element in an HTML document). height and width define the intrinsic dimensions of the document. The XML NameSpace (xmlns) is a reference to the schema that defines the current XML element. You'll learn about viewBox in more detail in the next chapter. There are many other attributes possible on an SVG element. You will learn more about them throughout this book.
In this first example, following the SVG element, there's a single SVG text element. The text element, like the SVG element, has many possible attributes that you'll learn about as you make your way through the book. In this case, there are four attributes related to the display of the element. The x and y attributes represent the position of the top-left corner of the text element as points on a coordinate plane. font-family maps to the familiar CSS property of the same name and defines the specific font that should be used to display the text. font-size also maps to the common CSS property of the same name.
Finally, there is the content of the text element, the simple message Hello SVG:
Saved as 1-1-hello-world.svg and opened in a browser, the previous markup renders as in the following screenshot:
Now that you've seen the most basic example of an SVG document, let's take a look at the basic usage of SVG images and elements in a variety of ways.
Using SVG as a content image
In this section, you'll learn about the single most basic usage of an SVG image, using it the same way you would use a JPG, PNG, or GIF, as the src of an img element. If you've done any work with HTML at all then you will know how to do this since it's just an image element, but you should start to think about all the different ways you can use SVG, and this is a big one.
Looking at the following code sample, there's nothing special at all about the img element. There's an src pointing to the SVG image, height and width to define the image's dimensions, and an alt attribute to provide a textual representation of the image for screen readers and other cases where the image may not display:
Running the preceding code in a browser renders the following:
Drawing with code
Before you learn about other basic implementations, it's worth taking a look at the previous screenshot in a little more depth. Instead of just being text like the first example (which, after all, you could have just done in HTML), it shows four circles diagonally arranged across the canvas. Let's take a look at the source of that image and learn our first visual element in SVG, the circle element.
The following code sample shows the circle in action. It also shows how simple changes in markup attribute values can create visually interesting patterns. In it there are five circle elements. These all take advantage of four new attributes. cx and cy represent the center x and center y coordinates of the element on a coordinate plane. r represents the radius of the circle. fill defines the color that will fill the circle. fill accepts any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). In this case, we're using a red,green, blue, alpha (RGBA) value to fill this with variations on pure red. The first few values remain the same while the fourth value, the alpha, doubles every time from .125 to 1 (fully opaque). Similarly, cx, cy, and r double each time. This produces the pattern you saw earlier. This isn't the most elaborate SVG image, but it does show you how easy basic SVG elements are to use and understand:
Scalable + vector graphics
Now that you've seen an example of a drawing created with SVG, it might be useful to take a second to explain the VG in SVG and why that makes the file format scalable.
With raster (bitmap) file formats, you're probably familiar with formats such as JPG, PNG, or GIF. You can think of the image data as being stored pixel by pixel, so each point in an image is stored in the file and read out by the browser or graphics program pixel by pixel and row by row. The size and quality of the image is constrained by the size and quality at the time of creation.
Vector graphics, on the other hand, are defined by vectors and control points. To simplify significantly, you can think of vector graphics as being a set of numbers that describe the shape of a line. They may be a set of specific points or they may be, as in the case of the circle earlier, a set of instructions on how to create a specific type of object. The circle element doesn't store every pixel that makes up the circle. It stores the arguments used to create the circle.
Why is this cool? One reason is that because it's just a set of instructions defining the shape, which you can scale in or out, and the rendering engine will just calculate new values accordingly. For that reason, vector graphics can scale infinitely without loss of fidelity.
If that's all confusing to you, don't worry about it. The more you work with them, the more familiar you'll be with the way vector graphics work. In the meantime, the following set of examples and figures will help to illustrate the difference. First, look at the following markup. It represents four images, using the exact same SVG image as the source. The image represents the SVG logo. The dimensions are set at the image's natural size and then 2x, 4x, and 8x, the image's natural size:
Rendered in the browser, that markup produces the following. Notice that it's completely crisp all the way up to 8x, the original size:
Now, look at the same markup, this time with PNGs. It follows the same pattern:
But now, see the result. Notice that, at the natural level, there is no difference between the SVG and PNG. The pixels in the PNG are enough to match the vector-defined lines in the SVG Version. Also, notice how the image gets progressively worse as the image gets larger. There is no way for the browser to get more information (more pixels) out of the bitmapped format to fill in the details at the larger size. It simply scales up the pixels that it has, with terrible results (especially at the 8x level):
Using SVG in CSS
A common usage of SVG is as a background image in CSS. There are benefits to this approach in terms of file size and scalability in responsive web design (RWD). In today's multi-device, multi-form factor world, the ability to offer high-quality images at a range of device sizes and resolutions (including high pixel density devices) is an important one. While there are optimized solutions for raster display images (in the form of the picture element and the srcset and sizes attributes) and you can use media queries to present different images or image sizes in CSS, the ability to do one image for all devices is huge. SVG in CSS allows us to do that easily
While you'll learn about the intersection of SVG and CSS in Chapter 5, Working with SVG and CSS, let's take a look at a basic example now to whet your appetite.
The following page has a div tag with a class of header. The only thing to really note here is a reference to an SVG file in the url value of the background property:
This code produces the following when run in a browser. This simple example, which is no different than any other CSS implementation, will scale to the highest points-per-inch display without any loss of smoothness in the gradient. This is achieved simply by using SVG:
Gradients in SVG
As you continue to learn about basic SVG usage, I'm going to continue to tease new concepts in authoring SVG itself. The next features I'm going to introduce you to will be the definitions (defs) section, the gradient element, and the rect element.
The following example shows the source of the SVG element in the previous example. Everything beyond the root svg element itself is different to the previous example.
First up, there's the defs element. defs is an organizational element designed to hold definitions of graphical objects to be used later in the document. We immediately meet the linearGradient element, which defines (you guessed it!) a linear gradient. x1, x2, y1, and y2 define the gradient vector of the gradient. You'll learn more about that in Chapter 2, Working with SVG and CSS, but for now, just know that it defines the direction of the gradients. The default is 0 at the left and 1 to the right. Setting x2 to 0 and y2 to 1 changes the angle from a horizontal left-to-right gradient to a vertical top-to-bottom gradient.
The look of the gradient is actually defined as child stop elements. Each has two attributes, offset and stop-color. The offset accepts either a percentage or a number between 0 and 1, representing the placement of the gradient stop on the totality of the gradient vector. This example is the simplest: one color at 0% and another at 100%. stop-color accepts any valid color value:
As these are just instructions on how to render the gradient, it's possible to stretch and shift the background image in this case with zero loss of fidelity. The browser will just calculate new values and render a new, perfect gradient.
The following example shows a tweak to the CSS that stretches the header to be half of the height of the browser (using the vh unit) and forces the header background image to fill the available space (background: size: contain):
As you can see in the following screenshot, the same background image handles the resizing with flying colors. This is true (as you'll learn) for anything else you can do with SVG.
Directly embedding SVG in an HTML document
In my opinion, the most exciting usage of SVG is as an inline element in an HTML document. While you will learn about SVG images as a separate file format and all the ways that SVG images can be used to develop modern web apps, the largest portion of this book will show you ways to interact with SVG elements embedded directly into the document. This is important because it is not possible to animate or otherwise manipulate the individual elements of an externally-referenced SVG file; this is only possible if the SVG elements are available directly (via the Document Object Model (DOM)) on the page.
The following example shows a simple inline SVG image with three circles and teases one of the most powerful tools you have when working with inline SVG: CSS! CSS can be used to style SVG elements in the same way that you can style regular HTML elements. This opens up a world of possibilities. The properties used here are probably new to you since they are SVG-specific, but just like the background-color or border properties you're used to, you can adjust the basic look and feel of SVG elements with CSS. In this next example, the CSS defines a default fill color for all circles, adds a border to the second circle, and then changes the fill color for the third circle. If you're not already scheming of ways to use CSS to manipulate SVG elements, rest assured you'll have plenty of ideas after reading Chapter 5, Working with SVG and CSS:
Opening a browser will show the results of all that CSS:
Feature detection and Modernizr
While overall support for SVG on the global web (https://caniuse.com/#search=svg) is now very high, it's not uniform and there are still non-supporting browsers out there. This is where Modernizr, the feature detection library, can be useful. If your user base is broad or you're using newer (even experimental) features, you can use Modernizr to detect browser compatibility with your important features and adjust your code accordingly.
There are two ways this works. One is the classes that Modernizr can place on the HTML element. The other is the global Modernizr object that contains results for all the tests as Booleans. Before we move on, I'll show you examples of both tools in action.
The Modernizr project provides hundreds of tests. Since some of the tests are quite expensive (in terms of resources needed to compute, when working with Modernizr, you want to use just the tests you need for your application. In this case, I've created a specific build of Modernizr that tests for multiple SVG features and nothing else. When added to an HTML page, this file will add classes to the HTML element indicating support for various SVG features
Here's the output of the HTML element in Microsoft Edge. The no-smil class indicates that Edge doesn't support Synchronized Multimedia Integration Language (SMIL), but does support everything else we're testing for:
Output from the latest Chrome Version indicates support for all tested features:
And finally, Internet Explorer 8 (IE8), which has no SVG support at all:
Using these classes would allow you to, as a simple example, provide a PNG fallback function for CSS background images in IE8:
As was mentioned, Modernizr also exposes a global Modernizr JavaScript object with each of the tests available as a Boolean. The following example shows how to access that Boolean and using an if statement for the code approximately, depending on whether or not SVG is supported:
In general, the rest of this book will not focus on fallbacks for older browsers, but it is useful to know that they're available if you're working in an environment where you need to support a broad range of browsers and devices.
Summary
In this chapter, we learned about the basics of SVG including several SVG-specific elements, such as circle, text, and the elements used to make SVG gradients. We also learned about several ways to use SVG in HTML documents and as a background image in CSS.
We also learned about the Modernizr feature detection library and how to use it to create fallbacks for browsers that don't support SVG or specific SVG features.
In Chapter 2, Getting Started with Authoring SVG, you'll learn about many more SVG features as you will expand your knowledge of authoring SVG documents.
