Book description
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
Publisher resources
Table of contents
- Preface
- I. SVG on the Web
- 1. Graphics from Vectors
- 2. The Big Picture
- 3. A Sense of Style
-
4. Tools of the Trade
- Ready-to-Use SVG
- Click, Drag, Draw: Graphical SVG Editors
-
Bringing SVG Alive: SVG in the Web Browser
- Gecko for Firefox
- WebKit for Safari and iOS Devices
- Blink for Newer Versions of Chrome, Opera, and Android Devices
- Presto for Older Opera Versions and Opera Mini
- Trident for Internet Explorer and Other Windows Programs
- EdgeHTML for Microsoft Edge and Windows 10+ Programs
- Servo
- Other Dynamic SVG Viewers
- Markup Management: Code Editors
- Ready-to-Use Code: JavaScript Libraries
- Processing and Packaging
- Summary: Software and Sources to Make SVG Easier
- II. Drawing with Markup
- 5. Building Blocks
-
6. Following Your Own Path
- Giving Directions: The d Attribute
- Straight Shooters: The move-to and line-to Commands
- Finishing Touches: The close-path Command
- Hole-y Orders and Fill Rules
- Following the Grid: Horizontal and Vertical Lines
- Crunching Characters
- Short and Sweet Shapes: Polygons and Polylines
- Curve Balls: The Quadratic Bézier Command
- Smooth Operators: The Smooth Quadratic Command
- Wave Motion: The Cubic Bézier Commands
- Building the Arcs
- Summary: Custom Shapes
-
7. The Art of the Word
- When Text Isn’t Text
- Working with Web Fonts
- Typewriter Text
- Colorful Language
- Responsive Text Scaling
- Anchors and Alignment
- Switching Styles with <tspan>
- Adjusting the Typewriter
- Full-Control Characters
- Twists and Turns: The <textPath> Element
- Sliding Text Along a Path with startOffset
- Measuring the Message
- Summary: Graphical Text Layout and Fonts
- III. Putting Graphics in Their Place
- 8. Scaling Up
- 9. A New Point of View
- 10. Seeing Double
- 11. Transformative Changes
- IV. Artistic Touches
- 12. Filling Up to Full
- 13. Drawing the Lines
- 14. Marking the Way
- 15. Less Is More
- 16. Playing with Pixels
- V. SVG as an Application
- 17. Beyond the Visible
- 18. Drawing on Demand
- 19. Transitioning in Time
- 20. Good Manners
- Index
Product information
- Title: Using SVG with CSS3 and HTML5
- Author(s):
- Release date: October 2017
- Publisher(s): O'Reilly Media, Inc.
- ISBN: 9781491921975
You might also like
book
Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow, 3rd Edition
Through a recent series of breakthroughs, deep learning has boosted the entire field of machine learning. …
book
Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow, 2nd Edition
Through a series of recent breakthroughs, deep learning has boosted the entire field of machine learning. …
book
The New CSS Layout
CSS Grid Layout will transform the way you design and develop for the web—and Rachel Andrew …
book
Web Development with Node and Express, 2nd Edition
Build dynamic web applications with Express, a key component of the Node/JavaScript development stack. In this …