Online Extras

Extras, by Chapter#

1. Graphics from Vectors: An Overview of SVG
   • “HTML Syntax, Lazy or Long”: Explaining the elements, attributes, and syntax details of our boilerplate inline SVG example.
   • “XML Prologs and Document Types”: Unique features of XML that you may discover if you look at SVG code created by a software program.
   • “Understanding Vector Graphics”: SVG stands for Scalable Vector Graphics, but what does that mean? How is it different from other image formats?
2. The Big Picture: SVG and the Web
   • “The Web Platform”: The web platform is the interconnected set of standards used by websites and browsers: HTML, CSS, HTTP, URLs, JavaScript, the DOM. And SVG.
3. A Sense of Style: Working with CSS
   • “The Cascade”: The CSS cascade mostly works the same for SVG as for HTML. But that doesn't mean that it is simple.
   • “Media Queries in Embedded Versus Inline SVG”: Media queries can be used with inline SVG and in standalone SVG files. But if you switch between the two, you’ll often need to make adjustments.
   • “XML Namespaces in CSS”: You can usually ignore XML namespaces when writing CSS selectors, but that makes it all the more surprising when they cause a problem.
4. Tools of the Trade: Software and Sources to Make SVG Easier
   • “SVG Snapshots: Converting Vector to Raster”: Sometimes, you need a “snapshot” image of an SVG, saved in a common raster (aka, bitmap) image format, such as PNG or JPEG. The conversion can often be automated using dedicated rasterization tools.
5. Building Blocks: Basic Shapes
   • “Perplexing Percentages”: Most SVG lengths are proportional to the viewBox width or height. But some values aren't either horizontal or vertical.
6. Following Your Own Path: Custom Shapes
   • “The Winding Order of the Fill Rule”: What do the nonzero and evenodd keywords mean, and how do they relate to the shape of your path?
   • “Calculating Cubic Béziers”: Connecting the control points to the cubic curve.
7. The Art of the Word: Graphical Text Layout and Fonts
   • “Creating Embeddable Fonts as Data URIs”: The old SVG <font> element to include a font in an SVG file doesn't work on the web. Data URIs do.
   • “Interactive Text”: Don't bake-in labels on your photos: add them with SVG text, and you can style them dynamically.
   • “Beyond Horizontal: Rotated and Vertical Text”: Horizontal text is so HTML. SVG was designed for more than that. And now, CSS is too.
   • “Perfecting Paths for <textPath>”: Tips for mastering geometry when wrapping SVG text around shapes.
8. Scaling Up: Defining Coordinate Systems
   • “The Limits of Numbers in SVG”: SVG coordinates are scalable, independent of pixels. But in practice, you can't use just any scale you choose.
   • “Dynamically Changing preserveAspectRatio”: A ready-to-use playground for exploring meet, slice, and none preserveAspectRatio options.
9. A New Point of View: Cropping Embedded SVG Files
   • “Picking the Perfect View”: SVG views and the HTML <picture> element are a responsive design power team, letting you crop an embedded graphic based on media queries.
10. Seeing Double: Re-using Content
    • “Understanding CORS and SVG”: Why doesn't it just work? Cross-origin services and static asset servers are part of modern web development, but they can be a headache for SVG.
    • “Importing SVG Assets, with AJAX”: Browser support limitations can restrict your ability to share SVG assets between web pages. A little JavaScript can patch the gaps.
11. Transformative Changes: Coordinate System Transformations
    • “The Next Dimension: 3D Transformations”: CSS transforms include 3D effects. How do they work, and how do you work around the browser bugs for SVG?
12. Filling Up To Full: The fill Property, Gradients, & Patterns
    • “objectBoundingBox versus userSpaceOnUse”: SVG graphical effects can be defined in terms of the bounding box of the element they apply to or its user-space coordinate system. But what does that really mean?
    • “Faking Repeating Gradients”: SVG repeating gradients are wonderful. But someone forgot to tell WebKit developers that. What's a dev to do?
13. Drawing the Lines: Stroke Effects
    • “Drawing with Dashes”: SVG's stroke-dasharray property was designed for dotted lines, but when animated it creates a shape that draws itself.
14. Marking the Way: Line Markers
    • “Re-purposing Icons as Markers”: Turning an existing symbol into a marker is a matter of copy and paste, plus a few attributes. Just watch out for the browser quirks.
15. Less Is More: Clipping and Masking
    • “Clipped Clicks”: Clipping paths were designed to work with interactive effects. Just watch out for the browser support.
    • “Clipping on the Outside, with a Mask”: Sometimes a clipping path is the opposite of what you need. And sometimes a mask is the secret to effects you didn't think possible.
16. Playing with Pixels: Filters and Blend Modes
    • “Making the Wave”: SVG <feTurbulence> and <feDisplacementMap> create wave-like distortion effects from mathematical parameters. What do the numbers mean?
17. Beyond the Visible: Metadata for Accessibility and Added Functionality
    • (none)
18. Drawing on Demand: Interactive SVG
    • “Borrowing Ready-Made Widgets from HTML”: HTML input elements provide accessible interfaces that can maintain state without scripting. All they need is a new coat of SVG.
19. Transitioning in Time: Animation
    • “Using SVG/SMIL Animation Elements”: SVG/SMIL elements can add complex animation effects with a few lines of code. Too bad about the browser support.
    • “Planning for Performance”: Designing an effective animation is equal parts art and science. Here, we discuss the technical side of creating smooth web animations.
20. Good Manners: Best Practices for SVG
    • (none)