Using SVG with CSS3 and HTML5 Vector Graphics for Web Design (Early Release, Raw Unedited) (Amelia Bellamy-Royds, Kurt Cagle etc.)（Z-Library）

# Using SVG with CSS3 and HTML5: Vector Graphics for Web Design ## 【One-Line Pitch】 A practical, code-first guide for web developers who want to move beyond static illustrations and harness SVG's full power—integrating vector graphics into HTML5 pages, styling them with CSS, and adding interactivity and animation. If you already know HTML, CSS, and a bit of JavaScript, this book will turn you from an SVG consumer into an SVG creator. ## 【Book Arc】 - **Opening (~0%–9%)**: Sets the stage for SVG as a web-native graphics format, explains the book's five-part structure (SVG on the web, drawing with markup, coordinate systems, artistic effects, and SVG as an application), and establishes the reader's prerequisite knowledge—HTML, CSS, and basic JavaScript. - **Early (~9%–28%)**: Introduces the fundamentals of SVG as XML markup, walks through creating a first simple graphic (a stoplight built from rectangles and circles), and explains the critical concepts of the SVG namespace, root element structure, and the `<title>` element for document metadata. - **Early–Middle (~28%–47%)**: Dives into the core drawing vocabulary—shape elements like `<rect>` and `<circle>`, their geometric attributes (x, y, cx, cy, r, width, height), and presentation attributes (fill, stroke, stroke-width). Emphasizes that shapes paint in document order and introduces the `<g>` group element for inheriting styles. - **Middle (~47%–53%)**: Tackles code efficiency and maintainability. Introduces the DRY (Don't Repeat Yourself) principle through `<defs>` and the `<use>` element for reusing shapes, explains the difference between geometric attributes (not inherited) and style properties (inherited), and shows how CSS inline styles can replace presentation attributes. - **Late (beyond excerpts)**: The remaining parts of the book cover coordinate systems and transformations, advanced color and stroke techniques, filters and clipping, accessibility, and animation—turning static SVG into interactive web applications. ## 【Key Takeaways】 - **SVG is XML, not just a graphics format** (Early): An SVG file must declare the SVG namespace (`xmlns="http://www.w3.org/2000/svg"`) to render in browsers. Understanding this XML foundation is essential before any drawing begins. - **Shapes are the atomic unit of SVG** (Early): Everything builds from basic shapes like `<rect>` and `<circle>`, defined by geometric attributes (position, size) and styled by presentation attributes (fill, stroke). Even complex outlines like a map of Australia can be a single `<path>`. - **Document order determines paint order** (Middle): Shapes draw in the order they appear in code—later elements cover earlier ones. The `z-index` property exists in SVG specs but isn't supported in major browsers, so code order is your only layering tool. - **Separate geometry from style for maintainable code** (Middle): Geometric attributes (like `cx` and `r`) are shape-specific and not inherited, while style properties (like `fill` and `stroke`) behave like CSS and can be set on parent `<g>` elements. This separation makes graphics easier to modify and restyle. - **Presentation attributes are just default CSS** (Middle): You can write `style="fill:blue; stroke:black"` instead of `fill="blue" stroke="black"`. This bridges SVG and CSS, letting you apply the same styling mental model to both HTML and SVG. - **Use `<defs>` and `<use>` to eliminate redundancy** (Middle): Define a shape once in `<defs>`, then reference it multiple times with `<use xlink:href="#id">`. This is SVG's answer to DRY—critical when graphics get complex or need JavaScript manipulation. - **The `<title>` element is more flexible than in HTML** (Early): Beyond document titles that appear in browser tabs, you can add titles to individual graphic parts for tooltips and accessibility—a practice that becomes essential for interactive SVG. ## 【Reading Tips】 - **Work through the stoplight example hands-on** (Early): The book's first complete example is deliberately simple. Type it out, open it in a browser, then experiment—change colors, move circles, reorder elements—to internalize how the code maps to the visual result. - **Skim the O'Reilly boilerplate** (Opening): The front matter (conventions, contact info, acknowledgements) is standard publisher content. Jump straight to Part I when you hit "SVG on the Web." - **Pay close attention to the namespace discussion** (Early): The `xmlns` declaration and the difference between standalone SVG files versus SVG embedded in HTML5 is a common source of confusion. Re-read this section if you're fuzzy on XML namespaces. - **Compare the three stoplight versions carefully** (Middle): The book presents the same graphic three ways—plain shapes, grouped with inherited styles, and re-used with `<defs>`/`<use>`. Don't skim these; the structural differences matter enormously for later chapters on CSS and JavaScript manipulation. - **Keep a browser with developer tools open** (Throughout): The book assumes you can inspect document structure and styles. Use dev tools to verify how presentation attributes translate to computed styles—this will pay off in later chapters on CSS integration. ## 【Coverage Limits】 This guide covers the book's opening through the middle of Part I (roughly the first half of the "SVG on the Web" section). The excerpts do not cover coordinate systems, transformations, gradients, filters, animation, or accessibility—the book's later parts—so those topics are not addressed here. ##