O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using SVG with CSS3 and HTML5

Book Description

Using SVG with CSS3 and HTML5 starts with the basics, explaining how simple shapes and icons are defined in SVG, and then builds upon that foundation to create complex graphics and interactive, animated applications. It covers all the features you're likely to come across in web design, while avoiding areas with poor browser support.

Table of Contents

  1. Preface
    1. A Winding Path
      1. The Road Ahead
    2. Before You Begin
    3. About This Book
      1. Conventions Used in This Book
      2. About the Examples
      3. How to Contact Us
    4. Acknowledgements
  2. I. SVG on the Web
  3. 1. Graphics from Vectors
    1. Defining an SVG in Code
    2. Simple Shapes
    3. Repetition without Redundancy
    4. Graduating to Gradients
    5. Activating Animation
    6. Talking with Text
    7. Understanding Vector Graphics
    8. The SVG Advantage
    9. Summary: An Overview of SVG
  4. 2. The Big Picture
    1. The Web Platform
    2. SVG and the Modern Web
    3. JavaScript in SVG
    4. Embedding SVG in Web Pages
    5. Using SVG with HTML 5
    6. Using SVG with CSS 3
    7. Summary: SVG and the Web
  5. 3. A Sense of Style
    1. CSS in SVG
      1. Style declarations
      2. The cascade
      3. Conditional styles
    2. SVG in CSS
      1. Using SVG images within CSS
      2. Using SVG effects within CSS
    3. CSS versus SVG
      1. Styling Documents versus Drawing Graphics
      2. CSS as a Vector Graphics Language
      3. Which to Choose?
    4. Summary: Working with CSS
  6. 4. Tools of the Trade
    1. Ready-to-Use SVG
    2. Click, Drag, Draw
      1. Adobe Illustrator
      2. Adobe PhotoShop
      3. Sketch
      4. Adobe Animate
      5. Inkscape and Sodipodi
      6. LibreOffice and Apache Open Office
      7. Google Docs
      8. SVG-edit
      9. Draw SVG
      10. Boxy SVG
    3. SVG Snapshots
    4. Bringing SVG Alive
    5. Markup Management
    6. Ready-to-use Code
    7. Processing and Packaging
    8. Summary: Software and Sources to Make SVG Easier
  7. II. Drawing with Markup
  8. 5. Building Blocks
    1. From Here to There
    2. Block Party
    3. Cutting Corners
    4. Loop-the-loop
    5. Summary: Basic Shapes
      1. Quick Reference: Basic shape elements and attributes
      2. Quick Reference: Length Units
  9. 6. Following Your Own Path
    1. Giving Directions
    2. Straight Shooters
    3. Finishing touches
    4. Hole-y Orders
    5. Short & Sweet Shapes
    6. Curve Balls
    7. Smooth Operators
    8. Wave Motion
    9. Building the Arcs
    10. Summary: Custom Shapes
      1. Quick Reference: Custom shape elements and attributes
      2. Quick Reference: Path commands
  10. 7. The Art of the Word
    1. Text in Images versus Interactive Text
    2. Typewriter Text
    3. Super-powered SVG Labels
    4. Anchors and Alignment
    5. Switching Styles
    6. Full-Control Characters
    7. Beyond Horizontal
    8. Twists and Turns
    9. Measuring Text
    10. Summary: Graphical Text Layout and Fonts
      1. Quick reference: Text Elements and Attributes
  11. III. Putting Graphics in Their Place
  12. 8. Scaling Up
  13. 9. A New Point of View
  14. 10. Seeing Double
  15. 11. Transformative Changes
  16. IV. Artistic Touches
  17. 12. Coloring the Shapes
  18. 13. Drawing the Lines
  19. 14. Marking the Way
  20. 15. Layered Looks
  21. 16. Less Is More
  22. 17. Playing with Pixels
  23. V. SVG as an Application
  24. 18. Beyond the Visible
  25. 19. Drawing on Demand
  26. 20. Good Manners
  27. A. SVG Style Properties