Index
A
- a element, Linking It All Together-A Better Image Map
- buttons vs links, Capturing the Keyboard with JavaScript-Enhanced Links
- in defs, browser bugs, A Better Image Map
- graphical links, A Better Image Map
- HTML vs SVG, Linking It All Together, Linking It All Together
- keyboard accessibility, Capturing the Keyboard with JavaScript-Enhanced Links, Capturing the Keyboard with JavaScript-Enhanced Links
- same-page links, Targeting the Interaction-Targeting the Interaction
- in text, Linking It All Together
- for views, Alternate Takes, with the <view> Element, Interactive Views
- absolute vs relative
- accessibility
- animation, Design for All Users
- design considerations, Design for All Users-Design for All Users
- keyboard access, Roles and Relationships, Interactive Style Switches-A Better Image Map, Capturing the Keyboard with JavaScript-Enhanced Links-Controlling the Keyboard with tabindex and focus(), Design for All Users
- screen readers
- alternative text, SVG as an HTML Image, Using SVG in HTML5 Documents, A Better Image Map
- alternative text, id=accessibility_screen_readers, range=startofrange, Titles and Tips
- decorative text, When Text Isn’t Text, Reflecting on Transformations, Who Was That Masked Graphic?, Morphing Shapes into Strokes, Test Text Fallbacks, or Convert to Paths
- interactivity, Controlling the Keyboard with tabindex and focus(), Design for All Users
- language, Titles and Tips
- semantics, Preserving Aspect Ratios, with CSS Padding, Linking It All Together, Counting Clicks
- touch input, Interactive Style Switches
- Acessible Rich Internet Applications (see ARIA)
- :active selector, Interactive Style Switches
- addEventListener DOM method, The Big Event
- Adobe CSS Shapes Editor library, Shorthand Shapes
- Adobe Illustrator, Adobe Illustrator, Simplify Paths
- (see also graphical editors)
- background filters, Mixing and Merging, Isolating the Blend Effect
- converting text to paths, When Text Isn’t Text, Test Text Fallbacks, or Convert to Paths
- copying elements as code, Graphics from Vectors
- fill rule defaults, Hole-y Orders and Fill Rules
- mesh gradients, Filling with More Than Solid Colors
- non-SVG effects, Learn the Limits of SVG, Compared to Your Tool
- styles and classes, Structuring Styles
- tracing shapes vs Photoshop selections, A Better Image Map
- Adobe Photoshop, Adobe Photoshop
- Adobe SVG viewer, The SVG Advantage, Other Dynamic SVG Viewers
- affine transformations, Skewed Perspective
- ::after CSS pseudoelement, Using SVG Images Within CSS, Which to Choose?
- AI (Adobe Illustrator) file format, Adobe Illustrator
- AJAX, File Management
- aliasing, Anti-Anti-Aliasing for Crisp Lines
- alpha
- alt attribute, on img, SVG as an HTML Image, Titles and Tips
- anchor, for text layout, Talking with Text, Anchors and Alignment
- (see also text-anchor style property)
- animate DOM method, Scripting Every Frame
- animate element, Animating Attributes, Declaratively
- animateMotion element, Complex Animations-Complex Animations
- animateTransform element, Complex Animations
- animation, Activating Animation-Activating Animation, Transitioning in Time-Summary: Animation
- accessibility concerns, Design for All Users
- CSS, Activating Animation, Smoothly Switching Styles-Benefits and Limits of Animating SVG with CSS
- declarative vs procedural, Scalable Vector Animations
- film techniques and terms, Scalable Vector Animations
- frame rate, Scalable Vector Animations, Scripting Every Frame
- loop functions, Scalable Vector Animations, Scripting Every Frame, Calculating the Current Value
- performance, Benefits and Limits of Animating SVG with CSS, Scripting Every Frame, Triggering Regular Updates, Calculating the Current Value
- scripted, Scripting Every Frame-Calculating the Current Value
- SVG/SMIL elements, Activating Animation, Animations as Document Elements-Benefits and Limits of SVG/SMIL Animation Elements
- timing functions, CSS Transitions, CSS Keyframe Animations, CSS Keyframe Animations, Calculating the Current Value
- Web Animations API, Scalable Vector Animations, Scripting Every Frame
- animation-* style properties, Starting Mid-Stride
- animation shorthand, CSS Keyframe Animations
- animation-delay, CSS Keyframe Animations
- animation-direction, CSS Keyframe Animations, CSS Keyframe Animations
- animation-duration, CSS Keyframe Animations
- animation-fill-mode, CSS Keyframe Animations
- animation-iteration-count, CSS Keyframe Animations
- animation-name, CSS Keyframe Animations, Benefits and Limits of Animating SVG with CSS
- animation-play-state, CSS Keyframe Animations
- animation-timing-function, CSS Keyframe Animations, CSS Keyframe Animations
- anti-aliasing, Anti-Anti-Aliasing for Crisp Lines
- Apache Batik, The SVG Advantage, The Changing Web, A <style> block, Other Dynamic SVG Viewers
- area element, in HTML, A Better Image Map
- ARIA, Roles and Relationships
- aria-atomic attribute, Counting Clicks
- aria-current attribute, Linking It All Together
- aria-describedby attribute, 1,000 Words Are Worth a Picture, 1,000 Words Are Worth a Picture
- aria-hidden attribute, Titles and Tips
- aria-label attribute, Using SVG in HTML5 Documents, Packaged Deals, File Management, Titles and Tips, Titles and Tips, A Better Image Map
- aria-labelledby attribute, Linking Labels-Linking Labels
- aria-level attribute, Roles and Relationships
- aria-live attribute, Counting Clicks
- aspect ratio, Autosizing Embedded SVG
- (see also preserveAspectRatio)
- Atom code editor, Atom Plus SVG Preview
- attributeName attribute, Animating Attributes, Declaratively
- audio element, in SVG 2, Smooth Scaling Photographs
- axis, Coordinated Efforts
- (see also coordinate systems)
B
- B or b bearing command, in SVG 2, Building the Arcs, Interactive Views
- backdrop, vs background, Blending Basics
- backdrop-filter style property, Isolating the Blend Effect
- background-* style properties, Using SVG Images Within CSS, Consider the Backdrop
- BackgroundImage and BackgroundAlpha filter inputs, Mixing and Merging, Half-and-Half Filter Effects, Blending Basics
- base element, in HTML, Using SVG Effects Within CSS
- base-64 encoding, Making Every File Count
- baseline (of text), Typewriter Text
- baseline-shift style property, Adjusting the Typewriter
- ::before CSS pseudoelement, Using SVG Images Within CSS, Which to Choose?
- Bézier curves, Curve Balls: The Quadratic Bézier Command-Wave Motion: The Cubic Bézier Commands
- bgcolor attribute, The Rainbow Connection
- bitmap images (see raster images)
- blend modes, Blending with the Backdrop-Isolating the Blend Effect
- Blink rendering engine, Blink for Newer Versions of Chrome, Opera, and Android Devices
- blur effect, A Basic Blur-Fast Filters from CSS Alone
- blur filter function, Fast Filters from CSS Alone, Fast Filters from CSS Alone, Building a Better Blur
- Boolean OR operator, Bubbling Out of Shadows
- border-image style property, Using SVG Images Within CSS
- border-radius style property, Cutting Corners-Cutting Corners
- bounding box, Scaling Paint Servers-The Boundaries of the Box
- box-shadow style property, A Basic Blur
- Boxy SVG, Boxy SVG
- Brackets code editor, Brackets Plus SVG Preview
- BrowserLing, Test, Test, Test!
- browsers (see web browsers)
- BrowserStack, Test, Test, Test!
- browsing context, Alternate Takes, with the <view> Element
- btoa JS function, Making Every File Count
- bugs (see web browsers, bugs)
- button role, Capturing the Keyboard with JavaScript-Enhanced Links
C
- C or c cubic-curve-to command, Wave Motion: The Cubic Bézier Commands
- calc CSS function, Drawing Lines, from Here to There, Curve Balls: The Quadratic Bézier Command
- cancelAnimationFrame DOM function, Triggering Regular Updates
- canvas element and Canvas2D API, Giving Directions: The d Attribute, Smooth Scaling Photographs
- Cartesian coordinates, Coordinated Efforts-Coordinated Efforts
- cascade, in CSS, Overriding Styles
- Catmull-Rom spline curve, Building the Arcs
- CDATA block, JavaScript in SVG, Drawing Lines, from Here to There, 1,000 Words Are Worth a Picture
- centered coordinates (see coordinate systems)
- centered text, Anchors and Alignment
- character data, in XML (see CDATA block)
- checkbox role, Roles and Relationships
- child CSS function or keyword, in SVG 2, Filling with More Than Solid Colors, Defining Dimensions
- Chrome, Blink for Newer Versions of Chrome, Opera, and Android Devices
- circle CSS function, Circular Logic
- circle element, Simple Shapes, Circular Logic
- class attribute, Style and Structure, Radiating Radial Gradients, Name Things
- classList DOM property, Drawing Lines, from Here to There, Counting Clicks
- className DOM property, JavaScript in SVG
- clearInterval JS function, Triggering Regular Updates
- click DOM event, Bubbling Out of Shadows
- clientX and clientY DOM properties, Measuring Mouse Positions
- clip art, sources, Ready-to-Use SVG-Ready-to-Use SVG
- clip style property, Smooth Scaling Photographs, Shorthand Shapes
- clip-path style property, Short and Sweet Shapes: Polygons and Polylines, Smooth Scaling Photographs, Creating a Custom Clipping Path
- clip-rule style property, Creating a Custom Clipping Path
- clipPath element, Creating a Custom Clipping Path-Creating a Custom Clipping Path
- clipPathUnits attribute, Creating a Custom Clipping Path, Intersecting Shapes, Stretch-to-Fit Clipping Effects
- clipping, Less Is More, The Clean-Cut Clip-Shorthand Shapes
- Clippy, Shorthand Shapes
- cloneNode DOM method, Bubbling Out of Shadows
- CMYK color, vs sRGB, Set Up Color Preferences for Web Use
- code editors, Defining an SVG in Code, Markup Management: Code Editors
- CodePen, Online Live Code Sites
- color, Coloring Between the Lines-Water Colors
- color hints, in CSS gradients, Switching Focus
- Color module (see CSS3 modules)
- color style property, Colorful Language, Coordinating Colors
- color-interpolation-filters style property, The Chain of Commands, Blending Basics
- compositing
- Compositing and Blending module (see CSS3 modules)
- conditional CSS rules, Conditional Styles, Media queries
- conic gradients
- constructor property, of a JS object, JavaScript in SVG
- content style property, Using SVG Images Within CSS
- contenteditable attribute, Half-and-Half Filter Effects
- contentinfo role, Roles and Relationships
- context-fill and context-stroke keywords, in SVG 2, Orienting Arrows
- coordinate systems, Scaling Up-Scaling to Fit
- createElement and createElementNS DOM methods, JavaScript in SVG, Drawing Lines, from Here to There, Counting Clicks
- Creative Commons, Ready-to-Use SVG, Machine-Readable Metadata
- crispEdges keyword, for shape-rendering, Anti-Anti-Aliasing for Crisp Lines
- cross-file references (see external asset files)
- cross-origin (CORS) files, File Management
- CrossBrowserTesting, Anchors and Alignment, Test, Test, Test!
- crossorigin attribute, File Management
- CSS
- animation (see animation)
- as attributes, Presentation attributes
- (see also presentation attributes)
- box layout vs SVG, Styling Documents Versus Drawing Graphics
- cascade and inheritance, Overriding Styles
- conditional rules, Conditional Styles
- fallback declarations, Parser fallbacks
- filters (see filters)
- media rules (see media queries)
- selectors (see selectors)
- style rules, A <style> block
- styling methods compared, Structuring Styles
- timeline, The Changing Web
- transitionable properties, CSS Transitions, CSS Keyframe Animations
- transitions (see animation)
- variables, Variables for Every Property-Variables for Every Property, Isolating the Blend Effect, Benefits and Limits of Animating SVG with CSS
- as a vector graphics language, CSS as a Vector Graphics Language-Which to Choose?
- CSS Shapes Editor Chrome extension, Shorthand Shapes
- CSS3 modules, The Changing Web, Using SVG with CSS3, Summary: Working with CSS
- browser support (see web browsers, support)
- Color level 3, The Rainbow Connection, Water Colors
- Color level 4, The Rainbow Connection, Variables for Every Property, Water Colors, Set Up Color Preferences for Web Use
- Compositing and Blending, Blending with the Backdrop, Premade Mixes
- Fill and Stroke, Colorful Language, Fallbacks for Fills, Picture Perfect, A Simple Stroke to Start, Swapping Stroke and Fill, A Wide Array of Dashes (and Gaps Between Them), A Wide Array of Dashes (and Gaps Between Them), More Pleasing Dash Patterns, Made with Math, Painting Lines
- Filter Effects, The Filter Framework, Mixing and Merging, Building a Better Blur
- Filter Effects level 2, Isolating the Blend Effect
- Images level 3, A Poor Fit (and How preserveAspectRatio Fixes It)
- Images level 4, Switching Focus
- Masking, The Clean-Cut Clip, Shorthand Shapes, Hiding Behind Masks, Making a Stencil
- Motion Path, Complex Animations
- Selectors, A <style> block
- Shapes, Circular Logic, Short and Sweet Shapes: Polygons and Polylines, Smooth Operators: The Smooth Quadratic Command, Shorthand Shapes
- Transforms, Transformative Changes, Reflecting on Transformations, New Origins, Turning Things Around
- Transforms level 2, Skewed Perspective
- Values and Units, Drawing Lines, from Here to There
- Writing Modes, Full-Control Characters
- CTM (cumulative transformation matrix), Enter the Matrix, Measuring Mouse Positions
- currentColor keyword, Colorful Language, Coordinating Colors-Coordinating Colors
- cursor style property, Using SVG Images Within CSS
- custom properties, in CSS (see CSS, variables)
- cx and cy attributes
D
- d attribute, Giving Directions: The d Attribute
- D3.js, D3.js
- darken blend mode, Blending Basics
- data attribute, on object element, Interactive Embedded SVG
- data URI, Making Every File Count
- Date JS object, Counting Clicks, Triggering Regular Updates
- declarative animation, defined, Scalable Vector Animations
- default size
- default SVG coordinate system, Coordinated Efforts, Framing the View, with viewBox
- defer keyword, for preserveAspectRatio, Smooth Scaling Photographs
- defs element, Repetition Without Redundancy, Reduce, Reuse, Recycle
- degrees (deg unit), Turning Things Around
- desc element, 1,000 Words Are Worth a Picture-1,000 Words Are Worth a Picture
- display style property
- document DOM object, Drawing Lines, from Here to There
- document object model (see DOM)
- documentElement DOM property, Drawing Lines, from Here to There
- DOM, Standalone SVG, SVG and the Web Platform
- DOMMatrix object, Measuring Mouse Positions
- DOMPoint object, Measuring Mouse Positions, Calculating the Current Value
- Don’t Repeat Yourself (see DRY code)
- download attribute, Linking It All Together
- Draw SVG, Draw SVG
- drop-shadow filter function, A Basic Blur, Mixing and Merging, Learn the Limits of SVG, Compared to Your Tool
- DRY code, Standalone SVG, It’s Hip to Be Square (or Rectangular), Summary: Reusing Content, Half-and-Half Filter Effects, Complex Animations, Sharing SVG Assets
- Dublin Core, Machine-Readable Metadata
- dur attribute, Animating Attributes, Declaratively
- dx and dy attributes
E
- easing functions (see animation, timing functions)
- ECMAScript, The Changing Web, JavaScript in SVG
- EdgeHTML, EdgeHTML for Microsoft Edge and Windows 10+ Programs
- edgeMode attribute, Building a Better Blur, Building a Better Blur
- editor software
- Element DOM object, JavaScript in SVG
- ellipse CSS function, Circular Logic
- ellipse element, Circular Logic-Circular Logic
- embed element, Interactive Embedded SVG
- embedded object (see objects, SVG embedded as)
- emulators, for testing, Test, Test, Test!
- enable-background style property, in SVG 1, Isolating the Blend Effect
- encodeURIComponent JS function, Making Every File Count
- equivalent path, for shapes, Starting Mid-Stride, Defining Dimensions
- evenodd keyword, Hole-y Orders and Fill Rules
- Event DOM object, The Big Event
- EventTarget DOM object, Bubbling Out of Shadows
- external asset files, File Management-File Management, Sharing SVG Assets
- for clipping and masking, Creating a Custom Clipping Path, Making a Stencil
- cross-origin (see cross-origin (CORS) files)
- CSS within, File Management
- for filters, Fast Filters from CSS Alone
- for paint servers, Graduating to Gradients, Using SVG in HTML5 Documents, Using SVG in HTML5 Documents, Fallbacks for Fills, Aligning Linear Gradients
- for use references, File Management, Coordinating Colors, Picture Perfect
- workarounds for poor browser support, File Management
- external stylesheets, External stylesheets
F
- fallback fonts (see web fonts)
- fallbacks, for SVG, Identify Your Browser Support Requirements
- feBlend element, Mixing and Merging, Blending Basics
- feColorMatrix element, The Chain of Commands-The Chain of Commands, A Better Image Map
- feComposite element, Mixing and Merging, Morphing Shapes into Strokes, Morphing Shapes into Strokes
- feDisplacementMap element, Mixing and Merging
- feDropShadow element, A Basic Blur, Mixing and Merging
- feFlood element, Mixing and Merging, Morphing Shapes into Strokes
- feGaussianBlur element, A Basic Blur, The Chain of Commands
- feImage element, Mixing and Merging, Blending Basics
- feMerge and feMergeNode elements, Mixing and Merging, We’re Going to Need a Bigger Boom
- feMorphology element, Building a Better Blur-Morphing Shapes into Strokes
- feOffset element, Mixing and Merging, We’re Going to Need a Bigger Boom
- Fetch API, File Management
- feTurbulence element, Mixing and Merging
- figure element, Preserving Aspect Ratios, with CSS Padding
- file type, Defining an SVG in Code
- file: URLS, File Management
- Fill and Stroke module (see CSS3 modules)
- fill attribute, on animation elements, Animating Attributes, Declaratively
- fill style property, Simple Shapes, Filling Up to Full-Fallbacks for Fills, Counting Clicks
- child syntax in SVG 2, Filling with More Than Solid Colors
- CSS3 changes, Fallbacks for Fills
- fallback colors, Using SVG in HTML5 Documents, Fallbacks for Fills
- on line element, Drawing Lines, from Here to There
- and pointer-events, Getting the Point(er) Across
- reused icons and inheritance, File Management
- for text, Colorful Language
- url values, Graduating to Gradients, Using SVG in HTML5 Documents, Fallbacks for Fills
- fill-box keyword, for transform-box, New Origins
- fill-opacity style property, Cutting Corners, Water Colors-Water Colors
- fill-rule style property, Hole-y Orders and Fill Rules-Hole-y Orders and Fill Rules
- FillPaint filter input, Mixing and Merging, Morphing Shapes into Strokes
- filter CSS function, Fast Filters from CSS Alone
- Filter Effects module (see CSS3 modules)
- filter element, The Filter Framework
- filter style property, The Filter Framework
- filters, Playing with Pixels-Summary: Filters and Blend Modes
- chaining primitives
- CSS transitions, Fast Filters from CSS Alone
- error handling, Fast Filters from CSS Alone, Mixing and Merging, Morphing Shapes into Strokes
- filter region, Mixing and Merging, We’re Going to Need a Bigger Boom-Half-and-Half Filter Effects
- for CSS layout boxes, Morphing Shapes into Strokes
- inputs, Mixing and Merging
- merging primitives, Mixing and Merging
- on tspan and textPath elements, browser support, Morphing Shapes into Strokes
- performance, Playing with Pixels, Fast Filters from CSS Alone, We’re Going to Need a Bigger Boom, Isolating the Blend Effect, Summary: Filters and Blend Modes
- primitive elements, The Filter Framework
- rendering order, The Chain of Commands, Premade Mixes
- shorthand functions
- filterUnits attribute, We’re Going to Need a Bigger Boom
- Firefox, Gecko for Firefox
- flags
- Flaming Text ImageBot, Ready-to-Use SVG, Draw SVG
- Flash, The SVG Advantage, Scalable Vector Animations
- flash of unstyled SVG (FOUS), Defining an SVG in Code, File Management, Structuring Styles
- flattening effects (see layer effects)
- flood-color and flood-opacity style properties, Water Colors, Mixing and Merging, Morphing Shapes into Strokes
- focal point, of radial gradients, Radiating Radial Gradients, Switching Focus
- focus DOM method, JavaScript in SVG, Controlling the Keyboard with tabindex and focus()
- focus order (see accessibility, keyboard)
- :focus selector, Fast Filters from CSS Alone, Linking It All Together
- focusable attribute, in SVG 1.2, Controlling the Keyboard with tabindex and focus()
- font-* style properties, Typewriter Text
- @font-face CSS rule, Working with Web Fonts, Anchors and Alignment
- foreignObject element, Using SVG in HTML5 Documents, 1,000 Words Are Worth a Picture, 1,000 Words Are Worth a Picture
- fps (frames per second), Scripting Every Frame
- frames, in an animation, Scalable Vector Animations
- from attribute, Animating Attributes, Declaratively
- from keyframes selector, CSS Keyframe Animations
- fx and fy attributes, Switching Focus
G
- g element, Style and Structure
- layer effects, Fading Away with the opacity Property
- layers in graphical editors, Style and Structure, Structure Your Graphic
- logical structure, Structure Your Graphic
- in mask vs clipPath contents, Clipping a clipPath, Who Was That Masked Graphic?
- nesting transforms, New Origins, Benefits and Limits of Animating SVG with CSS
- reusing, vs symbol, Flat Pack Stacks, Reduce, Reuse, Recycle, Water Colors
- roles, for accessibility, Titles and Tips, Roles and Relationships
- styling child elements that will be re-used, Reflecting on Transformations, Skewed Perspective
- Gaussian blur, A Basic Blur
- Gaussian distribution, A Basic Blur, A Basic Blur
- Gecko, Gecko for Firefox
- getAttribute and getAttributeNS DOM methods, Capturing the Keyboard with JavaScript-Enhanced Links
- getBBox DOM method, The Boundaries of the Box
- getComputedStyle DOM method, Structuring Styles
- getComputedTextLength DOM method, Measuring the Message
- getPointAtLength DOM method, Calculating the Current Value
- getScreenCTM DOM method, Measuring Mouse Positions
- getSubStringLength DOM method, Measuring the Message
- getTotalLength DOM method, Measuring the Message, More Pleasing Dash Patterns, Made with Math, Starting Mid-Stride, Starting Mid-Stride, Calculating the Current Value
- GIMP, Adobe Photoshop
- global URL, Using SVG Images Within CSS
- GPU, Playing with Pixels, Test, Test, Test!
- gradians (grad unit), Turning Things Around
- gradients, Graduating to Gradients-Graduating to Gradients, Great Gradients-Switching Focus
- gradientTransform attribute, Shared Structures, Transforming Gradients-Transforming Gradients
- gradientUnits attribute, Shared Structures, Aligning Linear Gradients
- graphical editors, Click, Drag, Draw: Graphical SVG Editors-Boxy SVG, Working with Graphical Editors-Learn the Limits of SVG, Compared to Your Tool
- background colors, Consider the Backdrop
- converting text to paths, When Text Isn’t Text, Test Text Fallbacks, or Convert to Paths
- fill rule defaults, Hole-y Orders and Fill Rules
- layers, Style and Structure, Blending with the Backdrop, Structure Your Graphic
- non-SVG effects, Mixing Multiple Filter Operations, Learn the Limits of SVG, Compared to Your Tool
- paths from selections, A Better Image Map
- stroke alignment, Swapping Stroke and Fill, Learn the Limits of SVG, Compared to Your Tool
- graphical processing unit (see GPU)
- graphics-* roles, Titles and Tips, Roles and Relationships
- grayscale filter function, The Chain of Commands
- GreenSock Animation Platform, GSAP
- group role, Titles and Tips, Roles and Relationships
- Grunt, SVGStore for, Processing and Packaging
- GSAP (Greensock Animation Platform), GSAP
- Gzip compression, Ready-to-Use SVG, Packaged Deals
H
- H or h horizontal-line-to command, Following the Grid: Horizontal and Vertical Lines
- hatch elements, Filling with More Than Solid Colors
- heading role, Roles and Relationships
- height and width attributes or style properties
- autosizing SVG, Just-Right Sizing-Preserving Aspect Ratios, with CSS Padding, Packaged Deals
- coordinate system dimensions, Coordinated Efforts
- on filter, We’re Going to Need a Bigger Boom
- on filter primitives, Half-and-Half Filter Effects
- geometry properties, in SVG 2, It’s Hip to Be Square (or Rectangular)
- in graphical editors, Autosizing Embedded SVG, Define Your Artboard or Drawing Size
- on img, Packaged Deals
- on mask, Who Was That Masked Graphic?
- on pattern, All the Units to Use, Picture Perfect, Patterned Prints
- on rect, It’s Hip to Be Square (or Rectangular)
- on svg element, Defining an SVG in Code, Autosizing Embedded SVG, Bubbling Out of Shadows
- on symbol, in SVG 2, Symbolic Usage
- on use, Reduce, Reuse, Recycle
- hexadecimal color values, The Rainbow Connection
- :hover selector, Fast Filters from CSS Alone, Interactive Style Switches, A Better Image Map
- href attribute
- a element in SVG vs HTML, Linking It All Together
- CSS selectors for, A <style> block
- on marker, proposal, Defining Dimensions
- vs xlink:href, Repetition Without Redundancy, Sliding Text Along a Path with startOffset, Reduce, Reuse, Recycle, Aligning Linear Gradients, Linking It All Together, Capturing the Keyboard with JavaScript-Enhanced Links
- hreflang attribute, Linking It All Together
- hsl color function, The Rainbow Connection, Counting Clicks
- hsla color function, Water Colors
- HTML
- elements in SVG
- embedding SVG in, Embedding SVG in Web Pages-Using SVG in HTML5 Documents
- HTML5, The Changing Web, Using SVG in HTML5 Documents
- parser, Defining an SVG in Code-Defining an SVG in Code, Simple Shapes, Using SVG in HTML5 Documents, Sliding Text Along a Path with startOffset, 1,000 Words Are Worth a Picture, Machine-Readable Metadata
- vs SVG, SVG and the Web Platform
- timeline, The Changing Web
- WHATWG vs W3C, Using SVG in HTML5 Documents
- HTMLUnknownElement DOM object, JavaScript in SVG
- HTTP headers
- HTTP/2, and multiple file requests, Using SVG Images Within CSS
- HTTPS, Alternate Takes, with the <view> Element, File Management, File Management
- hue-rotate filter function, The Chain of Commands
- hyperlinks (see a element)
I
- Iconic library, Ready-to-Use SVG
- id attribute, Repetition Without Redundancy, Using SVG Effects Within CSS, Name Things
- iframe element, Interactive Embedded SVG
- (see also objects, SVG embedded as)
- browsing contexts and SVG views, Alternate Takes, with the <view> Element
- sandboxing, Alternate Takes, with the <view> Element
- scaling SVG in, Alternate Takes, with the <view> Element, Rescaling on the Fly, with SVG View Fragments
- in SVG 2, Smooth Scaling Photographs
- image element, Responsive Text Scaling, Picture Perfect: Raster Images in SVG-Smooth Scaling Photographs
- alternative text, Smooth Scaling Photographs
- autosizing, in SVG 2, Picture Perfect: Raster Images in SVG
- cropping, Smooth Scaling Photographs, Who Was That Masked Graphic?
- fallback behavior and src, Picture Perfect: Raster Images in SVG
- image maps, A Better Image Map
- in a pattern, Picture Perfect, Painting Lines, Half-and-Half Filter Effects
- image maps, HTML vs SVG, A Better Image Map-A Better Image Map
- Images module (see CSS3 modules)
- images, SVG embedded as, SVG as an HTML Image-SVG as an HTML Image, Drawing on Demand, Decide How SVG Will Integrate in Your Website
- autosizing, SVG as an HTML Image, Autosizing Embedded SVG
- backgrounds and borders on root element, Drawing Lines, from Here to There
- embedding with CSS, Using SVG Images Within CSS-Using SVG Images Within CSS
- icons sprites with views, Packaged Deals
- limitations, SVG as an HTML Image, External stylesheets, When Text Isn’t Text, Responsive Text Scaling, Interactive Views
- media queries, Media queries
- vs use elements, File Management, File Management
- img element, SVG as an HTML Image
- (see also images, SVG embedded as)
- alternative text, Titles and Tips
- fallback for object, Interactive Embedded SVG
- image as synonym, for fallback, Picture Perfect: Raster Images in SVG
- image maps, A Better Image Map
- picture and srcset, SVG as an HTML Image
- presentation attributes, Packaged Deals
- scaling SVG in, Just-Right Sizing-Autosizing Embedded SVG
- styling the box, Cutting Corners, Packaged Deals, Consider the Backdrop
- SVG views within, Alternate Takes, with the <view> Element, Packaged Deals
- img role, SVG as an HTML Image, Using SVG in HTML5 Documents, File Management, Titles and Tips, Roles and Relationships
- immediately-invoked function, for scoping JavaScript variables, JavaScript in SVG
- @import CSS rule, External stylesheets, Structuring Styles
- !important CSS modifier, Presentation attributes, A <style> block
- in attribute, Mixing and Merging
- in2 attribute, Mixing and Merging
- inherit keyword, Style and Structure, Scaling Shapes Without Scaling Strokes
- Inkscape, Inkscape and Sodipodi, Flat Pack Stacks
- (see also graphical editors)
- background filters, Mixing and Merging
- converting text to paths, When Text Isn’t Text
- CSS support, A <style> block, Radiating Radial Gradients
- desc descriptions, 1,000 Words Are Worth a Picture
- fill rule defaults, Hole-y Orders and Fill Rules
- mesh gradients, Filling with More Than Solid Colors
- SVG 1.2 wrapping text, The Art of the Word
- symbol libraries, Symbolic Usage
- unset styles, “Unset” Styles
- inline styles, Style and Structure, Inline styles, Preserving Aspect Ratios, with CSS Padding, “Unset” Styles
- inline SVG, Defining an SVG in Code, Using SVG in HTML5 Documents-Using SVG in HTML5 Documents, Drawing on Demand, Decide How SVG Will Integrate in Your Website
- inline-size style property, in SVG 2, Adjusting the Typewriter
- innerHTML DOM property, JavaScript in SVG
- inset CSS function, Circular Logic
- internal stylesheet (see style element)
- Internet Explorer, Trident for Internet Explorer and Other Windows Programs
- interpolation, Transitioning in Time, Calculating the Current Value
- intrinsic aspect ratio, Autosizing Embedded SVG
- intrinsic size, Autosizing Embedded SVG, Packaged Deals
- inverse DOM method, Measuring Mouse Positions
- isolation style property, Isolating the Blend Effect
- isolation, for blend modes, Isolating the Blend Effect-Isolating the Blend Effect
J
- jank, defined, Transitioning in Time
- (see also animation, performance)
- JavaScript, JavaScript in SVG-JavaScript in SVG
- (see also DOM)
- for animation, Scripting Every Frame-Calculating the Current Value
- drawing SVG elements with, Drawing Lines, from Here to There, It’s Hip to Be Square (or Rectangular)
- event model, The Big Event
- for interactivity, The Big Event-Controlling the Keyboard with tabindex and focus()
- libraries, Ready-to-Use Code: JavaScript Libraries-SVG.js, Drawing Lines, from Here to There, Selecting a JavaScript Library-Selecting a JavaScript Library
- on* attributes, JavaScript in SVG
- script element, JavaScript in SVG
- string length counting, Full-Control Characters
- timeline, The Changing Web
- JSFiddle, Online Live Code Sites
L
- L or l line-to command, Straight Shooters: The move-to and line-to Commands
- lang attribute, Standalone SVG
- (see also xml:lang attribute)
- for multilingual title and desc, in SVG 2, Titles and Tips
- language, of text, Titles and Tips
- (see also xml:lang attribute)
- :last-of-type selector, Turning Things Around
- layer effects, Less Is More-Fading Away with the opacity Property, Stretch-to-Fit Clipping Effects, Who Was That Masked Graphic?, Mixing and Merging, Premade Mixes
- layers, in design (see graphical editors)
- lengthAdjust attribute, Sliding Text Along a Path with startOffset
- letter-spacing style property, Full-Control Characters
- libRSVG, The Changing Web
- ligatures (in text), Full-Control Characters
- lighten blend mode, Blending Basics
- line element, Drawing Lines, from Here to There-Drawing Lines, from Here to There
- line markers (see marker element)
- line-height style property, Adjusting the Typewriter
- linearGradient element, Graduating to Gradients, Filling with More Than Solid Colors, Shared Structures, Aligning Linear Gradients-Transforming Gradients, Painting Lines
- linearRGB, keyword for color interpolation, The Chain of Commands
- link element, External stylesheets
- :link selector, Linking It All Together
- links (see a element)
- list and listitem roles, Roles and Relationships
- list-style-image style property, Using SVG Images Within CSS
- local URL, Using SVG Images Within CSS
- location DOM object, Capturing the Keyboard with JavaScript-Enhanced Links
- luminance
- luminanceToAlpha, type in feColorMatrix filter, The Chain of Commands
M
- M or m move-to command, Straight Shooters: The move-to and line-to Commands
- map element, in HTML, A Better Image Map
- marker element, Marking the Way-Summary: Line Markers
- marker-* style properties, Emphasizing Points
- markerHeight and markerWidth attributes, Defining Dimensions
- markerUnits attribute, Scaling to Strokes, Orienting Arrows, Defining Dimensions
- markup, defined, Defining an SVG in Code
- mask element, Who Was That Masked Graphic?, Making a Stencil
- mask style property, Who Was That Masked Graphic?
- mask-* style properties, in CSS3, Making a Stencil
- mask-border style property, in CSS3, Making a Stencil
- mask-type style property, on mask element, Making a Stencil
- maskContentUnits attribute, Who Was That Masked Graphic?
- masking, Less Is More, Hiding Behind Masks-Making a Stencil
- Masking module (see CSS3 modules)
- maskUnits attribute, Who Was That Masked Graphic?
- Math JS object
- matrix
- matrixTransform DOM method, Measuring Mouse Positions
- media attribute, External stylesheets, Media queries
- @media CSS rule, Media queries
- Media Fragments URI, Rescaling on the Fly, with SVG View Fragments
- media queries, Media queries
- meet keyword, for preserveAspectRatio, A Poor Fit (and How preserveAspectRatio Fixes It), Packaged Deals
- mesh gradients, Filling with More Than Solid Colors-Filling with More Than Solid Colors
- meta element, Machine-Readable Metadata
- metadata element, Ready-to-Use SVG, Machine-Readable Metadata-Machine-Readable Metadata
- Microsoft Edge, EdgeHTML for Microsoft Edge and Windows 10+ Programs
- mix-blend-mode style property, Blending with the Backdrop, Premade Mixes
- mode attribute, on feBlend, Blending Basics
- modulus operator, JavaScript in SVG, It’s Hip to Be Square (or Rectangular), Calculating the Current Value
- motion blur, A Basic Blur
- motion path, Complex Animations, Complex Animations
- Motion Path module (see CSS3 modules)
- MouseEvent DOM interface, Measuring Mouse Positions
- mouseup DOM event, Bubbling Out of Shadows
- mpath element, Complex Animations
- MS Edge, EdgeHTML for Microsoft Edge and Windows 10+ Programs
- multiline text
- multiply blend mode, Blending Basics, Isolating the Blend Effect
N
- name attribute
- name property, of a JS function, JavaScript in SVG
- namespace (see XML namespaces)
- namespaceURI DOM property, Drawing Lines, from Here to There, Counting Clicks
- nested coordinate systems, A New Point of View, Packaged Deals, Flat Pack Stacks, Reduce, Reuse, Recycle, Symbolic Usage, Patterned Prints
- non-scaling-stroke keyword, Scaling Shapes Without Scaling Strokes
- nonuniform scale, Unbalanced Scales
- (see also scale transform)
- nonzero keyword, Hole-y Orders and Fill Rules
- normal blend mode, Blending Basics
- normal distribution, A Basic Blur, A Basic Blur
- :not selector, Flat Pack Stacks
- Noun Project, Ready-to-Use SVG
- :nth-of-type selector, Using SVG Images Within CSS, A Simpler Scale
O
- object element, Interactive Embedded SVG
- (see also objects, SVG embedded as)
- accessibility, When Text Isn’t Text
- as a link target, Alternate Takes, with the <view> Element
- plug-in for older browsers, Other Dynamic SVG Viewers
- scaling SVG in, Just-Right Sizing-Autosizing Embedded SVG, Alternate Takes, with the <view> Element, Rescaling on the Fly, with SVG View Fragments
- SVG views within, Packaged Deals
- object-fit and object-position style properties, A Poor Fit (and How preserveAspectRatio Fixes It), Smooth Scaling Photographs
- objectBoundingBox keyword, Scaling Paint Servers
- (see also bounding box)
- for clipping and masking, Creating a Custom Clipping Path, Stretch-to-Fit Clipping Effects, Who Was That Masked Graphic?, Making a Stencil
- distorting effect visualized, Aligning Linear Gradients
- vs fill-box in CSS, New Origins
- for filters, We’re Going to Need a Bigger Boom, Half-and-Half Filter Effects
- for gradients, Shared Structures
- for patterns, All the Units to Use, Dividing the Box
- for stroke paint, Painting Lines-Painting Lines
- zero-width or -height boxes, Painting Lines
- objects, SVG embedded as, Interactive Embedded SVG-Interactive Embedded SVG, Drawing on Demand, Decide How SVG Will Integrate in Your Website
- and CSS media queries, Responsive Text Scaling
- autosizing, Autosizing Embedded SVG, Autosizing Embedded SVG
- backgrounds and borders on root element, Drawing Lines, from Here to There
- interactive views, Interactive Views
- media queries, Media queries
- same-file links, Interactive Views
- scaling with object vs iframe, Alternate Takes, with the <view> Element, Rescaling on the Fly, with SVG View Fragments
- offset attribute, on stop element, Shared Structures, Aligning Linear Gradients, Aligning Linear Gradients
- offset-* style properties, Complex Animations
- offsetX and offsetY DOM properties, Measuring Mouse Positions
- on* attributes, JavaScript in SVG, The Big Event
- opacity filter function, Fast Filters from CSS Alone
- opacity style property, Water Colors, Fading Away with the opacity Property, A Better Image Map
- Open Clip Art Library (OCAL), Ready-to-Use SVG, 1,000 Words Are Worth a Picture
- operator attribute
- optimizers, for SVG code, Processing and Packaging
- OR operator, Bubbling Out of Shadows
- orient attribute, on marker element, Orienting Arrows
- origin
- orthographic projection, Skewed Perspective
- outline style property, Linking It All Together, A Better Image Map
- outline-offset style property, A Better Image Map
- overflow style property, Overriding Styles
- Oxygen XML editor, Oxygen XML SVG Editor
P
- padding style property
- pageX and pageY DOM properties, Measuring Mouse Positions
- paint servers, Graduating to Gradients, Filling Up to Full, Filling with More Than Solid Colors-Patterned Prints
- paint-order style property, Swapping Stroke and Fill, Scaling to Strokes
- painted keyword, for pointer-events, Getting the Point(er) Across
- parser, Defining an SVG in Code
- path attribute, on textPath in SVG 2, Sliding Text Along a Path with startOffset
- path CSS function, Smooth Operators: The Smooth Quadratic Command
- path element, Simple Shapes, Following Your Own Path-Summary: Custom Shapes
- for animateMotion, Complex Animations, Complex Animations
- creating from images, A Better Image Map
- length of a path, Measuring the Message, More Pleasing Dash Patterns, Made with Math
- merging paths, in editors, Structure Your Graphic, Simplify Paths
- vs polygon and polyline, Short and Sweet Shapes: Polygons and Polylines
- repositioning with transforms, New Origins
- start of stroke, Starting Mid-Stride
- for textPath, Twists and Turns: The <textPath> Element
- pathLength attribute, More Pleasing Dash Patterns, Made with Math
- pattern element, Filling with More Than Solid Colors, Patterns of Possibility-Patterned Prints, Half-and-Half Filter Effects
- patternContentUnits attribute, All the Units to Use
- patternTransform attribute, Patterned Prints-Patterned Prints
- patternUnits attribute, All the Units to Use, Patterned Prints
- PDF, The SVG Advantage
- percentages
- for alpha values, Water Colors
- for CSS circle function, Circular Logic
- for dashed strokes, A Wide Array of Dashes (and Gaps Between Them), A Wide Array of Dashes (and Gaps Between Them)
- for lengths that are neither horizontal nor vertical, Circular Logic, A Simple Stroke to Start
- in markers, Scaling to Strokes
- in masks, Who Was That Masked Graphic?
- in nested coordinate systems, Packaged Deals
- in patterns, All the Units to Use
- in reused graphics, Framing the View, with viewBox, Reduce, Reuse, Recycle
- for rounded rectangles, Cutting Corners
- for transform property, New Origins
- and user-space graphical effects, Scaling Paint Servers, We’re Going to Need a Bigger Boom
- and views, rescaling, Alternate Takes, with the <view> Element
- performance budget, Identify Your Browser Support Requirements
- performance DOM object, Triggering Regular Updates
- picture element, SVG as an HTML Image
- pointer-events style property, A Better Image Map, Getting the Point(er) Across-Getting the Point(er) Across, Counting Clicks
- points attribute, Giving Directions: The d Attribute, Short and Sweet Shapes: Polygons and Polylines
- polygon and polyline elements, Giving Directions: The d Attribute, Short and Sweet Shapes: Polygons and Polylines, Starting Mid-Stride
- polygon CSS function, Short and Sweet Shapes: Polygons and Polylines, Curve Balls: The Quadratic Bézier Command, Shorthand Shapes
- Portable Document Format (PDF), The SVG Advantage
- position style property, for CSS vector graphics, CSS as a Vector Graphics Language
- PostScript, The SVG Advantage, Scalable Vector Animations
- prefers-reduced-motion media query, Design for All Users
- presentation attributes, Style and Structure, Presentation attributes, Counting Clicks
- presentation role, Titles and Tips
- preserveAspectRatio attribute, A Poor Fit (and How preserveAspectRatio Fixes It)-A Poor Fit (and How preserveAspectRatio Fixes It)
- defer keyword, Smooth Scaling Photographs
- on image, Smooth Scaling Photographs
- on nested svg, Packaged Deals, Reduce, Reuse, Recycle
- vs object-fit and object-position, A Poor Fit (and How preserveAspectRatio Fixes It)
- padding hack with slice, Preserving Aspect Ratios, with CSS Padding
- in SVG view fragments, Rescaling on the Fly, with SVG View Fragments
- on symbol, Reduce, Reuse, Recycle, Symbolic Usage
- on view element, Alternate Takes, with the <view> Element
- Presto, Presto for Older Opera Versions and Opera Mini
- preventDefault DOM method, Bubbling Out of Shadows, Capturing the Keyboard with JavaScript-Enhanced Links
- primitives, for filters (see filters, primitive elements)
- primitiveUnits attribute, Mixing and Merging, Half-and-Half Filter Effects
- print stylesheets, Overriding Styles
- procedural animation, defined, Scalable Vector Animations
- pseudoclasses, Using SVG in HTML5 Documents, File Management
- pseudoelements, Using SVG Images Within CSS, Which to Choose?
R
- r attribute
- radialGradient element, Graduating to Gradients, Filling with More Than Solid Colors, Shared Structures, Radiating Radial Gradients-Switching Focus
- radians (rad unit), Turning Things Around
- Raphaël, Raphaël and Snap.svg
- raster images
- data URIs, Making Every File Count
- embedding with image element, Picture Perfect: Raster Images in SVG
- fallback for SVG, SVG as an HTML Image, Interactive Embedded SVG, Boxy SVG
- vs vector, Talking with Text, The SVG Advantage, SVG and the Web Platform, Ready-to-Use SVG, When Text Isn’t Text, Anchors and Alignment, Just-Right Sizing, Morphing Shapes into Strokes, Drawing on Demand, Identify Your Browser Support Requirements
- rasterization, Picturing Paint
- RDF, Machine-Readable Metadata
- rect element, Simple Shapes, It’s Hip to Be Square (or Rectangular)-Cutting Corners
- reference point, of a marker, Defining Dimensions
- reflections, Reflecting on Transformations
- refX and refY attributes, Defining Dimensions
- region role, Roles and Relationships
- rel attribute, Linking It All Together
- relative URL, Using SVG Images Within CSS
- relative vs absolute
- rendering engines, Bringing SVG Alive: SVG in the Web Browser
- requestAnimationFrame DOM function, Triggering Regular Updates
- resize style property, Scaling to Fit
- Resource Description Framework, Machine-Readable Metadata
- result attribute, Mixing and Merging
- rgb color function, The Rainbow Connection
- rgba color function, Water Colors
- role attribute, Packaged Deals, File Management, Roles and Relationships
- root element, of a document, Standalone SVG, Drawing Lines, from Here to There
- rotate attribute
- rotate transform, Turning Things Around-Turning Things Around
- rx and ry attributes
S
- S or s smooth-cubic-curve-to command, Wave Motion: The Cubic Bézier Commands
- Safari (browser), WebKit for Safari and iOS Devices
- sandbox attribute, Alternate Takes, with the <view> Element
- saturate filter function, The Chain of Commands
- scale transform, A Simpler Scale-Reflecting on Transformations
- Scour, Processing and Packaging
- screen blend mode, Blending Basics, Isolating the Blend Effect
- screen readers (see accessibility)
- screenX and screenY DOM properties, Measuring Mouse Positions
- script element, JavaScript in SVG, Drawing Lines, from Here to There
- selectors, A <style> block
- :active, Interactive Style Switches
- attribute, A <style> block, Water Colors, Counting Clicks
- :checked, Using SVG in HTML5 Documents
- DOM methods, JavaScript in SVG
- :focus, Linking It All Together
- :hover, Using SVG in HTML5 Documents, Interactive Style Switches, A Better Image Map
- for interactivity, Interactive Style Switches
- keyframe position, Activating Animation, CSS Keyframe Animations
- :last-of-type, Turning Things Around
- :link and :visited, Linking It All Together
- mixed-case bugs, JavaScript in SVG
- namespaces in, A <style> block, Linking It All Together
- :not, Flat Pack Stacks
- :nth-of-type, Using SVG Images Within CSS, A Simpler Scale
- sibling, Packaged Deals
- universal, Overriding Styles, Scaling Shapes Without Scaling Strokes
- :valid and :invalid, Using SVG in HTML5 Documents
- working around browser inheritance bugs, Symbolic Usage, Orienting Arrows
- Selectors module (see CSS3 modules)
- self-closed, XML tag, Simple Shapes, JavaScript in SVG
- semantics, Roles and Relationships
- (see also role attribute)
- Servo (rendering engine), Servo
- set element, Complex Animations
- setAttribute and setAttributeNS DOM methods, JavaScript in SVG, Drawing Lines, from Here to There, Bubbling Out of Shadows
- setInterval JS function, Triggering Regular Updates
- setTimeout JS function, Triggering Regular Updates
- shadow DOM, Reduce, Reuse, Recycle, Bubbling Out of Shadows
- shape-inside style property, in SVG 2 and CSS3, Adjusting the Typewriter
- shape-outside style property, Using SVG Images Within CSS, Circular Logic
- shape-rendering style property, Anti-Anti-Aliasing for Crisp Lines
- Shapes module (see CSS3 modules)
- side attribute, on textPath in SVG 2, Sliding Text Along a Path with startOffset
- Sketch, Sketch
- (see also graphical editors)
- skew transform, Skewed Perspective-Skewed Perspective
- slice keyword, for preserveAspectRatio, A Poor Fit (and How preserveAspectRatio Fixes It), Preserving Aspect Ratios, with CSS Padding
- slider role, Capturing the Keyboard with JavaScript-Enhanced Links
- SMIL (Synchronized Multimedia Integration Language), Activating Animation, Animations as Document Elements
- Snap.svg, Raphaël and Snap.svg
- Sodipodi, Inkscape and Sodipodi
- solidcolor element, Filling with More Than Solid Colors
- source element, with picture element, SVG as an HTML Image
- SourceAlpha filter input, Mixing and Merging, Morphing Shapes into Strokes
- SourceGraphic filter input, Mixing and Merging
- spacing and spacingAndGlyphs keywords, for textLength, Sliding Text Along a Path with startOffset
- specificity, in CSS, Overriding Styles
- spline, of Bézier curves, Curve Balls: The Quadratic Bézier Command
- spreadMethod attribute, Shared Structures
- sprite image files, Making Every File Count
- Squiggle viewer, for Apache Batik, Other Dynamic SVG Viewers
- src attribute
- srcset attribute
- sRGB
- stacks, of SVG icons (see SVG stacks)
- standard deviation, A Basic Blur
- startOffset attribute, Sliding Text Along a Path with startOffset
- static SVG, vs interactive, Drawing on Demand
- status role, Counting Clicks
- stop element, Shared Structures-Shared Structures
- stop-color style property, Shared Structures
- stop-opacity style property, Water Colors, Shared Structures
- stroke style property, Simple Shapes, Colorful Language, A Simple Stroke to Start
- stroke-align style property, in CSS3, Swapping Stroke and Fill, Learn the Limits of SVG, Compared to Your Tool
- stroke-dash-* style properties, in CSS3, More Pleasing Dash Patterns, Made with Math
- stroke-dasharray style property, A Dashing Design-Starting Mid-Stride
- stroke-dashoffset style property, Starting Mid-Stride
- stroke-linecap style property, Capping It Off with Line Caps-Capping It Off with Line Caps
- stroke-linejoin style property, Making the Connection with Line Joins-Making the Connection with Line Joins
- stroke-miterlimit style property, Making the Connection with Line Joins
- stroke-opacity style property, Circular Logic, Water Colors, A Simple Stroke to Start
- stroke-width style property, Simple Shapes, Drawing Lines, from Here to There, A Simple Stroke to Start, A Simple Stroke to Start, Painting Lines
- StrokePaint filter input, Mixing and Merging, Morphing Shapes into Strokes
- strokes, Drawing the Lines-Summary: Stroke Effects
- alignment and paint order, Circular Logic, A Simple Stroke to Start, Swapping Stroke and Fill, Swapping Stroke and Fill, Scaling to Strokes, Learn the Limits of SVG, Compared to Your Tool
- cursive text, Linking It All Together
- dashed, A Dashing Design-Starting Mid-Stride
- limitations, vs filter effects, Morphing Shapes into Strokes
- paint servers, Painting Lines
- replacing filled paths, Simplify Paths
- scaling and nonscaling, Unbalanced Scales, Scaling Shapes Without Scaling Strokes-Scaling Shapes Without Scaling Strokes
- stroke region for pointer-events, Getting the Point(er) Across
- strokeWidth keyword, for markerUnits, Scaling to Strokes
- style attribute, Style and Structure, Inline styles
- style DOM property, JavaScript in SVG, 1,000 Words Are Worth a Picture
- style element, Style and Structure, A <style> block-A <style> block
- @supports CSS rule, @supports tests
- SVG
- as images (see images, SVG embedded as)
- as objects (see objects, SVG embedded as)
- browser support, The Changing Web, Identify Your Browser Support Requirements
- vs HTML, SVG and the Web Platform
- inline (see inline SVG)
- namespace, Standalone SVG
- (see also XML namespaces)
- standalone files vs inline SVG, Defining an SVG in Code
- timeline, The Changing Web
- vs raster images, Talking with Text, The SVG Advantage, Ready-to-Use SVG, When Text Isn’t Text, Anchors and Alignment, Just-Right Sizing
- SVG 2
- autosizing image elements, Smooth Scaling Photographs
- bearing path command, Building the Arcs
- child function for cross-references, Filling with More Than Solid Colors, Defining Dimensions
- crossorigin attribute, File Management
- DOM compatibility improvements, JavaScript in SVG
- geometry properties, Style and Structure, It’s Hip to Be Square (or Rectangular)
- href without xlink, Repetition Without Redundancy
- HTML embedded content elements in SVG, Smooth Scaling Photographs
- line join alternatives, Making the Connection with Line Joins
- markers changes, Defining Dimensions
- multiline text, Adjusting the Typewriter
- paint servers, Filling with More Than Solid Colors
- percentages for alpha, Water Colors
- support (see web browsers, support)
- SVG 1.1 vs 2, The Changing Web
- symbol changes, Symbolic Usage
- textPath changes, Sliding Text Along a Path with startOffset
- vector-effect property, Framing the View, with viewBox
- SVG Editor (graphical interface for SVGO), Processing and Packaging
- svg element, Defining an SVG in Code, Standalone SVG
- attributes, Defining an SVG in Code, Repetition Without Redundancy, Using SVG in HTML5 Documents, Scaling Up, Packaged Deals
- cropping images with, Smooth Scaling Photographs
- in HTML documents, Using SVG in HTML5 Documents
- nested, Packaged Deals
- (see also nested coordinate systems)
- roles, for accessibility, Titles and Tips
- vs symbol, Symbolic Usage, Bubbling Out of Shadows
- SVG fonts, The Art of the Word, Working with Web Fonts
- SVG Markers module, Defining Dimensions, Complex Animations
- SVG Paths module, Building the Arcs
- SVG stacks, Making Every File Count, Flat Pack Stacks
- SVG view fragments, A New Point of View, Rescaling on the Fly, with SVG View Fragments-Interactive Views
- SVG-in-OpenType fonts, The Art of the Word
- SVG.js, SVG.js
- SVG4Everybody, File Management, Sharing SVG Assets
- SVGElementInstance DOM object, Bubbling Out of Shadows
- SVGMatrix DOM object, Measuring Mouse Positions
- SVGO, Processing and Packaging
- SVGOMG, Processing and Packaging
- SVGPoint DOM object, Measuring Mouse Positions, Calculating the Current Value
- SVGStore Grunt plug-in, Processing and Packaging
- SVGxUse, File Management
- SVGZ file extension, Ready-to-Use SVG
- switch element, Titles and Tips
- symbol element, Symbolic Usage-File Management, Patterned Prints, A Simple Stroke to Start
- Synchronized Multimedia Integration Language (SMIL), Animations as Document Elements
- synthesized typefaces, Switching Styles with <tspan>
- system colors, Design for All Users
- systemLanguage attribute, Titles and Tips
T
- T or t smooth-quadratic-curve-to command, Smooth Operators: The Smooth Quadratic Command
- tabindex attribute, Capturing the Keyboard with JavaScript-Enhanced Links, Controlling the Keyboard with tabindex and focus()
- tangent
- target attribute, Alternate Takes, with the <view> Element, Linking It All Together
- target DOM property, of an Event object, The Big Event, Counting Clicks
- target fragment, A New Point of View
- :target selector, Making Every File Count
- text element, Typewriter Text-Anchors and Alignment
- text-align style property, Adjusting the Typewriter
- text-anchor style property, Anchors and Alignment, Adjusting the Typewriter, Measuring the Message
- text-shadow style property, @supports tests, A Basic Blur
- textLength attribute, Anchors and Alignment, Sliding Text Along a Path with startOffset, Measuring the Message
- textPath element, Twists and Turns: The <textPath> Element-Sliding Text Along a Path with startOffset, Linking It All Together
- three-dimensional (3D) transformations, Skewed Perspective
- tile, for patterns, Patterns of Possibility
- (see also pattern element)
- timer role, Counting Clicks
- timing functions (see animation, timing functions)
- title attribute, in HTML, Titles and Tips
- title element, Standalone SVG-Standalone SVG, Coordinating Colors, Emphasizing Points, Titles and Tips-Linking Labels, A Better Image Map
- alternative text, Titles and Tips
- vs aria-label, Smooth Scaling Photographs, Titles and Tips
- vs desc, 1,000 Words Are Worth a Picture
- document title, Titles and Tips
- fallbacks in old browsers, 1,000 Words Are Worth a Picture
- HTML content, 1,000 Words Are Worth a Picture
- multilingual, Titles and Tips
- tooltips, Titles and Tips
- to attribute, Animating Attributes, Declaratively
- to keyframes selector, CSS Keyframe Animations
- toFixed JS method, Counting Clicks
- toggle CSS function, Drawing Lines, from Here to There
- tooltips, Titles and Tips
- touch input, Titles and Tips, Interactive Style Switches, Getting the Point(er) Across, Counting Clicks, Bubbling Out of Shadows, Design for All Users
- transform attribute or style property, Transformative Changes-Summary: Coordinate System Transformations
- (see also coordinate systems)
- attribute vs style, Transformative Changes, Reflecting on Transformations, New Origins, Turning Things Around
- browser support, Transformative Changes
- vs gradientTransform and patternTransform, Transforming Gradients, Patterned Prints
- in SVG view fragments, Rescaling on the Fly, with SVG View Fragments
- transform lists, Reflecting on Transformations, New Origins
- transform-box style property, New Origins
- transform-origin style property, Turning Things Around
- transformations, Transformative Changes-Summary: Coordinate System Transformations
- (see also transform attribute)
- 3D, Skewed Perspective, Skewed Perspective
- affine, Skewed Perspective
- vs animateMotion, Complex Animations
- attributes impacted by, New Origins
- inverse, Measuring Mouse Positions
- matrix representation, Skewed Perspective-Enter the Matrix
- multiple operations, Reflecting on Transformations, New Origins, Enter the Matrix
- of paint servers, Transforming Gradients
- user-space effects, Making a Stencil
- vs viewBox scaling, Scaling Up, A Simpler Scale, A Simpler Scale, Turning Things Around
- Transforms module (see CSS3 modules)
- transition-* style properties, CSS Transitions
- translate transform, New Origins-New Origins
- Tributary, Online Live Code Sites
- Trident (rendering engine), Trident for Internet Explorer and Other Windows Programs
- (see also Internet Explorer)
- tspan element, Switching Styles with <tspan>-Adjusting the Typewriter
- turn unit, Turning Things Around
- tweening, Transitioning in Time, Scalable Vector Animations, Calculating the Current Value
- type attribute
U
- uniform scale, Unbalanced Scales
- (see also scale transform)
- units
- angles, Turning Things Around
- converting to user coordinates for paths, Curve Balls: The Quadratic Bézier Command
- CSS3, Drawing Lines, from Here to There
- in graphical editors, Define Your Artboard or Drawing Size
- scaling effects, Calibrating the Scales
- supported in SVG 1.1, Drawing Lines, from Here to There
- time, CSS Transitions, Animating Attributes, Declaratively
- in transform property vs attribute, New Origins
- viewport, Resizing Inline SVG, Scaling Shapes Without Scaling Strokes
- url CSS function, Graduating to Gradients
- URL values
- in CSS, Using SVG Images Within CSS, Using SVG Effects Within CSS
- file: URLS, File Management
- global, local, or relative, Using SVG Images Within CSS, Using SVG Effects Within CSS
- origin of web pages, File Management
- SVG view fragments, Rescaling on the Fly, with SVG View Fragments
- target fragments, A New Point of View, Alternate Takes, with the <view> Element
- use element, Repetition Without Redundancy, Repetition Without Redundancy, Reduce, Reuse, Recycle-File Management
- changes in SVG 2, Reduce, Reuse, Recycle
- vs cloning DOM nodes, Bubbling Out of Shadows
- duplicating text, Reflecting on Transformations
- nested references, Reduce, Reuse, Recycle, Coordinating Colors
- scaling, Patterned Prints
- vs server-side includes, Sharing SVG Assets
- shadow DOM event models, Bubbling Out of Shadows
- usemap attribute, A Better Image Map
- user coordinates, defined, Drawing Lines, from Here to There
- user space, defined, Scaling Paint Servers
- userSpaceOnUse keyword, Scaling Paint Servers
- for clipping and masking, Creating a Custom Clipping Path, Intersecting Shapes, Who Was That Masked Graphic?, Making a Stencil
- for filters, We’re Going to Need a Bigger Boom, We’re Going to Need a Bigger Boom, Half-and-Half Filter Effects
- for gradients, Shared Structures
- for markerUnits, Scaling to Strokes
- for patterns, All the Units to Use
- percentages and multiple svg elements, Scaling Paint Servers, We’re Going to Need a Bigger Boom
- UTF-8, Defining an SVG in Code, Standalone SVG
- UTF-16, Standalone SVG
V
- V or v vertical-line-to command, Following the Grid: Horizontal and Vertical Lines
- :valid and :invalid selectors, Using SVG in HTML5 Documents
- Values and Units module (see CSS3 modules)
- var CSS function, Variables for Every Property, Variables for Every Property
- (see also CSS, variables)
- Vecteezy, Draw SVG
- vector drawables (in Android apps), Giving Directions: The d Attribute
- Vector Markup Language (VML), Trident for Internet Explorer and Other Windows Programs, Raphaël and Snap.svg
- vector-effect style property, Framing the View, with viewBox, Unbalanced Scales, Scaling Shapes Without Scaling Strokes-Scaling Shapes Without Scaling Strokes
- vertical text layout, Full-Control Characters, Twists and Turns: The <textPath> Element, Measuring the Message
- video element, Preserving Aspect Ratios, with CSS Padding, Making a Stencil
- view element, Alternate Takes, with the <view> Element-Packaged Deals
- view-box keyword, for transform-box, New Origins
- viewBox attribute, Responsive Text Scaling, Framing the View, with viewBox-Scaling to Fit
- cropping a nested image, Smooth Scaling Photographs
- defining intrinsic aspect ratio, Autosizing Embedded SVG
- in graphical editors, Autosizing Embedded SVG, Define Your Artboard or Drawing Size
- on marker, Defining Dimensions
- on nested svg, Packaged Deals, Reduce, Reuse, Recycle
- on pattern, All the Units to Use, Patterned Prints
- proposal to convert to CSS, Preserving Aspect Ratios, with CSS Padding
- setting with a JavaScript array, Counting Clicks
- in SVG view fragments, Rescaling on the Fly, with SVG View Fragments
- on symbol, Reduce, Reuse, Recycle, Symbolic Usage
- vs transformations, A Simpler Scale, Turning Things Around
- on view element, Alternate Takes, with the <view> Element
- viewport units, Framing the View, with viewBox, Resizing Inline SVG, Scaling Shapes Without Scaling Strokes
- viewport, in SVG scaling, Framing the View, with viewBox
- viewTarget attribute, Rescaling on the Fly, with SVG View Fragments, Packaged Deals
- virtual machines, for testing, Test, Test, Test!
- visibility style property, Activating Animation
- visible* keywords, for pointer-events, Getting the Point(er) Across
- :visited selector, Linking It All Together
- VML, Trident for Internet Explorer and Other Windows Programs, Raphaël and Snap.svg
W
- W3C, Using SVG in HTML5 Documents
- WAI-ARIA (see ARIA)
- WAI-ARIA Graphics module, Roles and Relationships
- Web Animations API, Scalable Vector Animations, Scripting Every Frame
- web browsers, Bringing SVG Alive: SVG in the Web Browser-Other Dynamic SVG Viewers
- bugs
- accessibility, Titles and Tips, A Better Image Map, Capturing the Keyboard with JavaScript-Enhanced Links
- blend modes, Isolating the Blend Effect
- clipping paths, Clipping a clipPath, A Better Image Map
- CSS animations, Starting Mid-Stride
- CSS transforms, Reflecting on Transformations, New Origins, Turning Things Around
- CSS variables, Variables for Every Property
- currentColor inheritance, Coordinating Colors
- DOM methods, Measuring Mouse Positions-Measuring Mouse Positions
- filters, Fast Filters from CSS Alone, The Chain of Commands, Blending Basics
- font-size, Typewriter Text
- foreignObject element, Using SVG in HTML5 Documents, 1,000 Words Are Worth a Picture
- getBBox, The Boundaries of the Box, The Boundaries of the Box
- gradients, Water Colors, Shared Structures, Aligning Linear Gradients, Radiating Radial Gradients, Radiating Radial Gradients, Switching Focus
- markers, Emphasizing Points, Scaling to Strokes, Orienting Arrows, Orienting Arrows
- masks, Who Was That Masked Graphic?, Who Was That Masked Graphic?, Making a Stencil
- object embeds, Interactive Embedded SVG, Alternate Takes, with the <view> Element, Linking It All Together
- parsing, 1,000 Words Are Worth a Picture
- patterns, All the Units to Use
- querySelector, JavaScript in SVG
- scaling, SVG as an HTML Image, Autosizing Embedded SVG-Resizing Inline SVG, Alternate Takes, with the <view> Element
- strokes, A Simple Stroke to Start, Making the Connection with Line Joins, A Wide Array of Dashes (and Gaps Between Them), Turning Dashes into Dots, More Pleasing Dash Patterns, Made with Math
- text layout, Full-Control Characters, Twists and Turns: The <textPath> Element, Twists and Turns: The <textPath> Element, Sliding Text Along a Path with startOffset, Linking It All Together
- units and calc, Drawing Lines, from Here to There, A Simple Stroke to Start, Starting Mid-Stride
- URL target fragments, Alternate Takes, with the <view> Element
- use elements, Framing the View, with viewBox, Reduce, Reuse, Recycle, Symbolic Usage, File Management-File Management, Skewed Perspective, Coordinating Colors, Picture Perfect
- user-space effects, Scaling Paint Servers
- views, A New Point of View, Alternate Takes, with the <view> Element, Rescaling on the Fly, with SVG View Fragments, Rescaling on the Fly, with SVG View Fragments, Packaged Deals, Packaged Deals
- support
- blend modes, Blending Basics, Premade Mixes
- contenteditable in SVG, Half-and-Half Filter Effects
- CSS animations, Activating Animation, SVG as an HTML Image, Starting Mid-Stride, Smoothly Switching Styles, CSS Transitions, CSS Keyframe Animations
- CSS variables, Variables for Every Property
- CSS3 clipping and masking, The Clean-Cut Clip, Stretch-to-Fit Clipping Effects, Shorthand Shapes, Hiding Behind Masks, Making a Stencil, Making a Stencil
- CSS3 colors, The Rainbow Connection, Water Colors
- CSS3 filters, The Filter Framework, Fast Filters from CSS Alone, Building a Better Blur, Morphing Shapes into Strokes, Isolating the Blend Effect
- CSS3 shape functions, Shorthand Shapes
- CSS3 transforms, Reflecting on Transformations, New Origins, Turning Things Around, Transforming Gradients
- CSS3 units, Drawing Lines, from Here to There, Resizing Inline SVG, Painting Lines
- data URIs, Making Every File Count
- external asset files, File Management-File Management, File Management, Coordinating Colors, Fallbacks for Fills, Aligning Linear Gradients, Picture Perfect
- filter inputs, Mixing and Merging
- fonts using SVG glyphs, The Art of the Word
- foreignObject element, Using SVG in HTML5 Documents
- form pseudoclass selectors, Using SVG in HTML5 Documents
- getBBox options, Painting Lines
- href without xlink, Repetition Without Redundancy, Aligning Linear Gradients
- image autosizing, Picture Perfect: Raster Images in SVG, Smooth Scaling Photographs
- link element in SVG, External stylesheets
- masking, Hiding Behind Masks
- multilingual title and desc, Titles and Tips
- object-fit and -position, A Poor Fit (and How preserveAspectRatio Fixes It)
- paint-order, Swapping Stroke and Fill, Scaling to Strokes
- requestAnimationFrame, Triggering Regular Updates
- resize property, Scaling to Fit
- SMIL animation elements, Animations as Document Elements
- @supports, @supports tests
- SVG 1, The Changing Web, Identify Your Browser Support Requirements
- SVG 2 DOM changes, JavaScript in SVG
- SVG 2 geometry properties, Style and Structure, It’s Hip to Be Square (or Rectangular)
- SVG 2 marker options, Emphasizing Points, Defining Dimensions
- SVG 2 paint servers, Filling with More Than Solid Colors
- SVG 2 text layout, Adjusting the Typewriter
- tabindex and focus, Controlling the Keyboard with tabindex and focus()
- use element shadow DOM, Reduce, Reuse, Recycle, Bubbling Out of Shadows
- vector-effect, Framing the View, with viewBox, Scaling Shapes Without Scaling Strokes
- views, A New Point of View-Alternate Takes, with the <view> Element, Rescaling on the Fly, with SVG View Fragments, Packaged Deals
- Web Animations API, Scripting Every Frame
- -webkit-* properties, Gecko for Firefox, Blink for Newer Versions of Chrome, Opera, and Android Devices, EdgeHTML for Microsoft Edge and Windows 10+ Programs, Fallbacks for Fills, The Filter Framework
- testing, Test, Test, Test!-Test, Test, Test!
- web fonts, When Text Isn’t Text, Working with Web Fonts
- web platform, defined, SVG and the Web Platform
- WebKit, WebKit for Safari and iOS Devices
- -webkit-* style properties, Activating Animation, WebKit for Safari and iOS Devices, Transformative Changes, Starting Mid-Stride, The Clean-Cut Clip, Stretch-to-Fit Clipping Effects, Hiding Behind Masks, Making a Stencil, Making a Stencil, The Filter Framework, Fast Filters from CSS Alone, Smoothly Switching Styles
- -webkit-text-fill-color and -webkit-text-stroke-color style properties, Colorful Language, Fallbacks for Fills
- WHATWG, Using SVG in HTML5 Documents
- white-space style property, Adjusting the Typewriter
- whitespace, in text markup, Typewriter Text
- width attribute or style property (see height and width)
- Wikimedia Commons, Ready-to-Use SVG
- wildcard CSS namespace selector, A <style> block
- will-change style property, Calculating the Current Value
- winding order, Hole-y Orders and Fill Rules
- (see also fill-rule style property)
- word-spacing style property, Full-Control Characters
- Writing Modes module (see CSS3 modules)
- writing-mode style property, Full-Control Characters
- (see also vertical text layout)
X
- x and y attributes
- on filter, We’re Going to Need a Bigger Boom, We’re Going to Need a Bigger Boom
- on filter primitives, Half-and-Half Filter Effects
- geometry properties, in SVG 2, It’s Hip to Be Square (or Rectangular), Typewriter Text
- on mask, Who Was That Masked Graphic?
- on pattern, All the Units to Use, Picture Perfect
- on rect, Simple Shapes, It’s Hip to Be Square (or Rectangular)
- on svg element, Packaged Deals, Bubbling Out of Shadows
- on symbol, in SVG 2, Symbolic Usage
- text layout
- on use, Repetition Without Redundancy, Reduce, Reuse, Recycle, New Origins, Intersecting Shapes, Bubbling Out of Shadows
- x and y DOM properties, of a point object, Measuring Mouse Positions
- x1 and x2 attributes
- X11, The Rainbow Connection
- XLink, Repetition Without Redundancy
- xlink:href attribute, Repetition Without Redundancy, Repetition Without Redundancy
- on a element in SVG, Interactive Views, Linking It All Together
- CSS selectors for, A <style> block
- DOM methods for creating, JavaScript in SVG
- on linearGradient and radialGradient, Shared Structures, Aligning Linear Gradients
- on pattern, Patterned Prints
- on script element in SVG, JavaScript in SVG
- on use, Reduce, Reuse, Recycle
- XML
- XML namespaces
- XML prolog, External stylesheets
- xml-stylesheet instruction, External stylesheets
- xml:base attribute, Using SVG Effects Within CSS
- xml:lang attribute, Standalone SVG, Titles and Tips
- XMLHttpRequest DOM object, File Management
- xmlns attribute, Standalone SVG, 1,000 Words Are Worth a Picture
- xmlns:xlink attribute, Repetition Without Redundancy
- XSLT, Oxygen XML SVG Editor, Ready-to-Use Code: JavaScript Libraries
Y
- y attribute (see x and y attributes)
- y1 and y2 attributes
Using SVG with CSS3 and HTML5
Published by
O'Reilly Media, Inc., 2017