Index
A
- Accessible Rich Internet Applications (ARIA) / SVG, HTML, and accessibility
- Adobe Illustrator
- reference / Authoring programs
- alt attribute
- reference / SVG as an image src
- Angular
- reference / TypeScript
- Scalable Vector Graphics (SVG), manipulating / Manipulating SVG with Angular
- Node, installing / Installing Node, npm, and Angular Cli
- npm, installing / Installing Node, npm, and Angular Cli
- Angular CLI
- installing / Installing Node, npm, and Angular Cli
- AngularJS
- with Scalable Vector Graphics (SVG) / Working with AngularJS and SVG
- animation
- about / Basic CSS animations and transitions with SVG
- with JavaScript / Animating with pure JavaScript
- with CSS / Animating with CSS
- with SMIL / Animating SVG with SMIL
- with Vivus / Animating SVG with Vivus
- with GreenSock Animation Platform (GSAP) / Animating SVG with GSAP
- with Snap.svg / Animation with Snap
- with SVG.js / Animation with SVG.js
- Apache
- media type, setting / Apache
- SVG, gzipping / gzipping SVG on Apache
- ARIA-live regions
- reference / Inline SVG
- Assistive Technology (AT) / SVG, HTML, and accessibility, SVG sprites and icon sets
B
- base64-encoded
- reference / Data URLs for SVG background images
- basic font properties / Basic font properties
- basic shapes
- about / More on basic shapes
- line element / The line element
- ellipse element / The ellipse element
- polygon element / The polygon element
- polyline element / The polyline element
C
- caching / Caching
- character data / Styles in standalone SVG images
- chord diagram
- implementing, in D3 / Implementing a chord diagram in D3
- clipping / Clipping and masking, Clipping
- color properties / Color and painting properties
- Command Line Utility (CLI) / Installing Node, npm, and Angular Cli
- complexity, inline SVG
- about / Complexity
- authoring / Authoring
- Document Object Model / The Document Object Model
- compositing properties / Compositing properties
- compressed SVG
- serving / Serving compressed SVG
- gzipping, on Apache / gzipping SVG on Apache
- on nginx / SVG compression on nginx
- on IIS / SVG compression on IIS
- Content Delivery Network (CDN) / The SVG DOM manipulator
- content image
- Scalable Vector Graphics (SVG), using as / Using SVG as a content image
- CSS
- Scalable Vector Graphics (SVG), using / Using SVG in CSS
- used, for animation / Animating with CSS
- CSS3 media queries
- reference / SVG and responsive web design
- CSS animations
- about / Basic CSS animations and transitions with SVG, CSS animations
- format / Basic animation format
- clip path, animating / Animating a clip path
- multiple properties, animating / Animating multiple properties and assigning multiple animations to an element
- multiple animations, assigning to element / Animating multiple properties and assigning multiple animations to an element
- CSS background images
- using / CSS background images
- Data URLs, for SVG background images / Data URLs for SVG background images
- CSS color value
- reference / Drawing with code, Color and painting properties
- CSS properties
- using / Using common CSS properties to manipulate SVGs
- basic font properties / Basic font properties
- text properties / Text properties
- miscellaneous CSS properties / Miscellaneous CSS properties
- CSS specificity
- CSS transitions / Basic CSS animations and transitions with SVG, CSS transitions
- Current user unit Transformation Matrix (CTM) / The SVG DOM manipulator
- custom data visualization
- with Snap.svg / Custom data visualization with Snap.svg
- with SVG.js / Custom data visualization with SVG.js
D
- D3.color
- reference / Implementing a chord diagram in D3
- Data-Drive Documents (D3)
- about / Getting started with D3
- reference / Getting started with D3
- implementing / Getting started with D3
- enter method / D3's enter and exit
- exit method / D3's enter and exit
- donut chart, implementing / Implementing a donut chart with D3
- chord diagram, implementing / Implementing a chord diagram in D3
- Data URLs
- for SVG background images / Data URLs for SVG background images
- reference / Data URLs for SVG background images
- data visualization
- creating / Creating an SVG data visualization
- Document Object Model (DOM)
- about / Directly embedding SVG in an HTML document, The Document Object Model, Interactivity properties
- reference / The Document Object Model, The DOM interface to SVG
- interface / The DOM interface to SVG
- exploration / Initial exploration
- SVG DOM manipulator / The SVG DOM manipulator
- Document Type Definition (DTD) / Installing Node, npm, and Angular Cli
- drawing
- with code / Drawing with code
- with Scalable Vector Graphics (SVG) / Scalable + vector graphics
E
- Ecma
- reference / JavaScript Versions
- ECMAScript / JavaScript Versions
- ECMAScript 5 (ES5) / ECMAScript 5
- ECMAScript 6 (ES6) / ECMAScript 2015
- ECMAScript 2015 / ECMAScript 2015
- ellipse element / The ellipse element
- ES5 polyfills
- reference / ECMAScript 5
F
- feature detection / Feature detection and Modernizr
- fills / More on fills and strokes
- filters / Filters
- Font Awesome
- reference / SVG sprites and icon sets
- frames per second (fps) / Animating with pure JavaScript
G
- GLYPHICONS
- reference / SVG sprites and icon sets
- GreenSock Animation Platform (GSAP)
- about / Animating SVG with GSAP
- used, for animation / Animating SVG with GSAP
- reference / Animating SVG with GSAP
H
- .htaccess file
- reference / gzipping SVG on Apache
- HTML
- with SVG / SVG, HTML, and accessibility
- with SVG as image src / SVG as an image src
- with inline SVG / Inline SVG
- HTML document
- Scalable Vector Graphics (SVG), embedding directly / Directly embedding SVG in an HTML document
- inline SVG / Additional details on inline SVG in an HTML document
- Hubway Data Visualization Challenges
- reference / Implementing a chord diagram in D3
I
- icon fonts
- downsides / SVG sprites and icon sets
- reference / SVG sprites and icon sets
- icon sets / SVG sprites and icon sets
- IIS
- media type, setting / IIS
- reference / IIS
- compressed SVG / SVG compression on IIS
- images
- importing, into SVG / Importing images into SVG
- Inkscape
- reference / Authoring programs
- inline SVG
- in HTML document / Additional details on inline SVG in an HTML document
- caching / Caching
- complexity / Complexity
- styling / Styling inline SVG
- styling, with CSS properties / Using common CSS properties to manipulate SVGs
- styling, with SVG-specific CSS properties / Using SVG-specific CSS properties to manipulate SVGs
- interactivity properties / Interactivity properties
J
- JavaScript
- versions / JavaScript Versions and tools, JavaScript Versions
- tools / JavaScript Versions and tools, Tooling
- ECMAScript 5 (ES5) / ECMAScript 5
- ECMAScript 2015 / ECMAScript 2015
- TypeScript / TypeScript
- used, for animation / Animating with pure JavaScript
- jQuery
- Scalable Vector Graphics (SVG), manipulating / Manipulating SVG with jQuery
L
- line element / The line element
M
- masking / Clipping and masking, Masking
- media type
- setting / Serving SVG on the web
- setting, in Apache / Apache
- setting, in nginx / nginx
- setting, in IIS / IIS
- miscellaneous CSS properties / Miscellaneous CSS properties
- Modernizr / Feature detection and Modernizr
N
- namespace (NS) / The SVG DOM manipulator
- nginx
- media type, setting / nginx
- compressed SVG / SVG compression on nginx
- nginx server configs project
- reference / SVG compression on nginx
- Node.js
- reference / Tooling
- node module
- reference / Data URLs for SVG background images
- node package serve
- reference / Tooling
O
- operator
- reference / Implementing a chord diagram in D3
P
- painting properties / Color and painting properties
- path element / Introducing paths
- picture element / The picture element
- picturefill
- reference / The picture element
- pointer-events property
- visiblePainted / Interactivity properties
- visibleFill / Interactivity properties
- visibleStroke / Interactivity properties
- visible / Interactivity properties
- painted / Interactivity properties
- fill / Interactivity properties
- stroke / Interactivity properties
- all / Interactivity properties
- none / Interactivity properties
- polyfill
- reference / The picture element
- polygon element / The polygon element
- polyline element / The polyline element
- positioning
- about / Positioning in SVG
- viewBox / viewBox and viewport in SVG
- viewport / viewBox and viewport in SVG
- prefixes
- reference / Implementing a chord diagram in D3
- programs
- authoring / Authoring programs
R
- React
- about / Working with React and SVG
- Scalable Vector Graphics (SVG), manipulating / Working with React and SVG
- red, green, blue, alpha (RGBA) value / Drawing with code
- responsive images
- requisites / SVG and responsive web design
- responsive web design (RWD)
- about / Using SVG in CSS, SVG and responsive web design
- srcset attribute / The srcset attribute, The srcset and sizes attributes
- sizes attribute / The srcset and sizes attributes
- picture element / The picture element
- rotate transform / rotate
S
- SASS function
- reference / Data URLs for SVG background images
- Scalable Vector Graphics (SVG)
- using, as content image / Using SVG as a content image
- drawing with / Scalable + vector graphics
- using, in CSS / Using SVG in CSS
- gradients / Gradients in SVG
- embedding, directly in HTML document / Directly embedding SVG in an HTML document
- images, importing / Importing images into SVG
- serving, on web / Serving SVG on the web
- in HTML / SVG, HTML, and accessibility
- responsive web design (RWD) / SVG and responsive web design
- manipulating, with jQuery / Manipulating SVG with jQuery
- with AngularJS / Working with AngularJS and SVG
- manipulating, with Angular / Manipulating SVG with Angular
- manipulating, with React / Working with React and SVG
- data visualization, creating / Creating an SVG data visualization
- animating / General techniques for animating SVG
- scale functions
- reference / Getting started with D3
- scale transform / scale
- sizes attribute / The srcset and sizes attributes
- Sketch
- reference / Authoring programs
- skew transform / skew
- Snap.svg
- about / Working with Snap.svg
- installing / Getting started with Snap.svg
- reference / Getting started with Snap.svg
- implementing / Getting started with Snap.svg
- animation with / Animation with Snap
- utilities / Snap.svg utilities
- events, managing / Snap.svg events
- used, for custom data visualization / Custom data visualization with Snap.svg
- srcset attribute / The srcset attribute, The srcset and sizes attributes
- standalone SVG images
- styles / Styles in standalone SVG images
- static typing
- reference / TypeScript
- stroke properties / Stroke properties
- strokes
- about / More on fills and strokes
- stroke-dasharray attribute / stroke-dasharray
- stroke-dashoffset attribute / stroke-dashoffset
- stroke-linecap attribute / stroke-linecap
- stroke-linejoin attribute / stroke-linejoin
- stroke-opacity attribute / stroke-opacity
- reference / stroke-opacity
- radialGradient element / linearGradient and radialGradient
- linearGradient element / linearGradient and radialGradient
- pattern element / The pattern element
- SVG-specific CSS properties
- using / Using SVG-specific CSS properties to manipulate SVGs
- painting properties / Color and painting properties
- color properties / Color and painting properties
- stroke properties / Stroke properties
- text properties / Text properties
- compositing properties / Compositing properties
- interactivity properties / Interactivity properties
- SVG.js
- about / Working with SVG.js
- installing / Getting started with SVG.js
- reference / Getting started with SVG.js
- animation with / Animation with SVG.js
- utilities / SVG.js utilities
- events / SVG.js events
- used, for custom data visualization / Custom data visualization with SVG.js
- svg4everybody
- reference / Importing images into SVG
- SVG background images
- Data URLs / Data URLs for SVG background images
- svgcleaner
- about / svgcleaner
- reference / svgcleaner
- SVG elements
- reference / Inline SVG
- SVG image
- creating / Creating a simple SVG image
- SVGOMG
- reference / SVGOMG
- about / SVGOMG
- authoring plugins / SVGO authoring plugins
- SVG Optimizer (SVGO)
- SVGRectElement element
- reference / Initial exploration
- SVG sprites
- using / SVG sprites and icon sets
- Synchronized Multimedia Integration Language (SMIL)
- about / Feature detection and Modernizr
- used, for animation / Animating SVG with SMIL
T
- text properties / Text properties, Text properties
- transformations
- about / Transformations
- translate transform / translate
- scale transform / scale
- rotate transform / rotate
- skew transform / skew
- transitions / Basic CSS animations and transitions with SVG
- translate transform / translate
- transpiler
- reference / JavaScript Versions
- TypeScript
- reference / TypeScript
- about / TypeScript
V
- viewBox / viewBox and viewport in SVG
- viewport / viewBox and viewport in SVG
- Vivus
- used, for animation / Animating SVG with Vivus
- reference / Animating SVG with Vivus
W
- web
- SVG, serving / Serving SVG on the web
X
- XML NameSpace (xmlns) / Creating a simple SVG image