Chapter 7. SVG: responsive in-browser graphics

 

Chapter 7 at a glance

Topic

Description, methods, and so on

Page
Setting up SVG Overview of basic setup for using SVG  
 
  • Vector vs. bitmap
  • <svg> configuration
  • CSS for SVG and DOM
200 204 205
SVG tags How to create shapes with the XML syntax  
 
  • Basic shapes
  • Gradients and <g>
  • <text> and animation
  • XLink
  • Paths for advanced shapes
  • viewBox
206 207 208 208 209 211
JavaScript usage Advanced usage with JavaScript and SVG  
 
  • XML namespacing
  • SVG libraries
  • Simple design pattern
  • Dynamically generating a large SVG group
  • Generating SVG paths via software
  • CSS for SVG animation
  • getBBox()
212 213 216 227 228 229 231
Canvas vs. SVG Using SVG vs. Canvas for projects  
 
  • Community
  • Code comparison
  • DOM
232 233 233

Look for this icon throughout the chapter to quickly locate the topics outlined in this table.

This chapter covers

  • Comparing bitmap and vector graphics
  • Creating SVG from scratch
  • Harnessing SVG for liquid layout graphics
  • Using JavaScript with SVG
  • Using SVG versus Canvas

7.1. How bitmap and vector graphics compare

7.2. Starting SVG Aliens with XML

7.3. Adding JavaScript for interactivity

7.4. Summary