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
HTML5 Canvas, 2nd Edition
Flash is fading fast as Canvas continues to climb. The second edition of this popular book …
book
Beginning SVG: A Practical Introduction to SVG using Real-World Examples
Develop SVG functionality for use within websites quickly and natively, using basic tools such as HTML …
book
Integrating D3.js with React: Learn to Bring Data Visualization to Life
Integrate D3.js into a React TypeScript project and create a chart component working in harmony with …
book
SVG Text Layout
Scalable Vector Graphics (SVG) is an image format, so text isn’t the first thing you might …