Using SVG with CSS3 and HTML5. Vector Graphics for Web Design - Helion

ebook

Autor: Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey
ISBN: 978-14-919-2192-0
stron: 844, Format: ebook
Data wydania: 2017-10-17
Księgarnia: Helion

Cena książki: 203,15 zł (poprzednio: 236,22 zł)
Oszczędzasz: 14% (-33,07 zł)

Osoby, które kupiły tę książkę, wybierały także »

Using Scalable Vector Graphics (SVG) for illustrations only scratches the surface of this format’s potential on the web. With this practical guide, you’ll learn how to use SVG not only for illustrations but also as graphical documents that you can integrate into complex HTML5 web pages, and style with custom CSS. Web developers will discover ways to adapt designs by adding data based graphics, dynamic styles, interaction, or animation.

Divided into five parts, this book includes:

SVG on the web: Understand how SVG works with HTML, CSS, and JavaScript to define graphics
Drawing with markup: Learn the vector language of x and y coordinates that let SVG create basic and custom shapes
Putting graphics in their place: Use the coordinate system to draw SVG shapes and text at different scales and positions
Artistic touches: Explore how color is used, how strokes are created and manipulated, and how graphical effects like filters, clipping, and masking are applied
SVG as an application: Make your graphic more accessible to humans and computers, and learn how to make it interactive or animated

Osoby które kupowały "Using SVG with CSS3 and HTML5. Vector Graphics for Web Design", wybierały także:

Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
DevOps w praktyce. Kurs video. Jenkins, Ansible, Terraform i Docker 190,00 zł, (39,90 zł -79%)
Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)

Spis treści

Using SVG with CSS3 and HTML5. Vector Graphics for Web Design eBook -- spis treści

Preface
- A Winding Path
  - The Road Ahead
  - Before You Begin
- About This Book
  - Conventions Used in This Book
  - Supplementary Material
  - About the Examples
- OReilly Safari
- How to Contact Us
- Acknowledgments
I. SVG on the Web
1. Graphics from Vectors
- Defining an SVG in Code
- Simple Shapes
- Standalone SVG
- Style and Structure
- Repetition Without Redundancy
- Graduating to Gradients
- Activating Animation
- Talking with Text
- The SVG Advantage
- Summary: An Overview of SVG
2. The Big Picture
- SVG and the Web Platform
- The Changing Web
- JavaScript in SVG
- Embedding SVG in Web Pages
  - SVG as an HTML Image
  - Interactive Embedded SVG
- Using SVG in HTML5 Documents
- Using SVG with CSS3
- Summary: SVG and the Web
3. A Sense of Style
- CSS in SVG
  - Style Declarations
    - Presentation attributes
    - Inline styles
    - A <style> block
    - External stylesheets
  - Overriding Styles
  - Conditional Styles
    - Parser fallbacks
    - @supports tests
    - Media queries
- SVG in CSS
  - Using SVG Images Within CSS
  - Making Every File Count
  - Using SVG Effects Within CSS
- CSS Versus SVG
  - Styling Documents Versus Drawing Graphics
  - CSS as a Vector Graphics Language
  - Which to Choose?
- Summary: Working with CSS
4. Tools of the Trade
- Ready-to-Use SVG
- Click, Drag, Draw: Graphical SVG Editors
  - Adobe Illustrator
  - Adobe Photoshop
  - Sketch
  - Inkscape and Sodipodi
  - Draw SVG
  - Boxy SVG
- Bringing SVG Alive: SVG in the Web Browser
  - Gecko for Firefox
  - WebKit for Safari and iOS Devices
  - Blink for Newer Versions of Chrome, Opera, and Android Devices
  - Presto for Older Opera Versions and Opera Mini
  - Trident for Internet Explorer and Other Windows Programs
  - EdgeHTML for Microsoft Edge and Windows 10+ Programs
  - Servo
  - Other Dynamic SVG Viewers
- Markup Management: Code Editors
  - Atom Plus SVG Preview
  - Brackets Plus SVG Preview
  - Oxygen XML SVG Editor
  - Online Live Code Sites
- Ready-to-Use Code: JavaScript Libraries
  - Raphaël and Snap.svg
  - D3.js
  - GSAP
  - SVG.js
- Processing and Packaging
- Summary: Software and Sources to Make SVG Easier
II. Drawing with Markup
5. Building Blocks
- Drawing Lines, from Here to There
- Its Hip to Be Square (or Rectangular)
- Cutting Corners
- Circular Logic
- Summary: Basic Shapes
6. Following Your Own Path
- Giving Directions: The d Attribute
- Straight Shooters: The move-to and line-to Commands
- Finishing Touches: The close-path Command
- Hole-y Orders and Fill Rules
- Following the Grid: Horizontal and Vertical Lines
- Crunching Characters
- Short and Sweet Shapes: Polygons and Polylines
- Curve Balls: The Quadratic Bézier Command
- Smooth Operators: The Smooth Quadratic Command
- Wave Motion: The Cubic Bézier Commands
- Building the Arcs
- Summary: Custom Shapes
7. The Art of the Word
- When Text Isnt Text
- Working with Web Fonts
- Typewriter Text
- Colorful Language
- Responsive Text Scaling
- Anchors and Alignment
- Switching Styles with <tspan>
- Adjusting the Typewriter
- Full-Control Characters
- Twists and Turns: The <textPath> Element
- Sliding Text Along a Path with startOffset
- Measuring the Message
- Summary: Graphical Text Layout and Fonts
III. Putting Graphics in Their Place
8. Scaling Up
- Coordinated Efforts
- Framing the View, with viewBox
- Calibrating the Scales
- Scaling to Fit
- A Poor Fit (and How preserveAspectRatio Fixes It)
- Just-Right Sizing
  - Autosizing Embedded SVG
  - Resizing Inline SVG
  - Preserving Aspect Ratios, with CSS Padding
- Summary: Defining Coordinate Systems
9. A New Point of View
- Alternate Takes, with the <view> Element
- Rescaling on the Fly, with SVG View Fragments
- Interactive Views
- Packaged Deals
- Flat Pack Stacks
- Summary: Cropping Embedded SVG Files
10. Seeing Double
- Reduce, Reuse, Recycle
- Symbolic Usage
- File Management
- Picture Perfect: Raster Images in SVG
- Smooth Scaling Photographs
- Summary: Reusing Content
11. Transformative Changes
- A Simpler Scale
- Unbalanced Scales
- Reflecting on Transformations
- New Origins
- Turning Things Around
- Skewed Perspective
- Enter the Matrix
- Summary: Coordinate System Transformations
IV. Artistic Touches
12. Filling Up to Full
- Coloring Between the Lines
  - The Rainbow Connection
  - Coordinating Colors
  - Variables for Every Property
  - Water Colors
- Filling with More Than Solid Colors
  - Fallbacks for Fills
  - Picturing Paint
  - Scaling Paint Servers
  - The Boundaries of the Box
- Great Gradients
  - Shared Structures
  - Aligning Linear Gradients
  - Transforming Gradients
  - Radiating Radial Gradients
  - Switching Focus
- Patterns of Possibility
  - All the Units to Use
  - Dividing the Box
  - Picture Perfect
  - Patterned Prints
- Summary: The fill Property, Gradients, and Patterns
13. Drawing the Lines
- Different Strokes
  - A Simple Stroke to Start
  - Making the Connection with Line Joins
  - Capping It Off with Line Caps
- Adjusting Stroke Appearance
  - Anti-Anti-Aliasing for Crisp Lines
  - Swapping Stroke and Fill
  - Scaling Shapes Without Scaling Strokes
- A Dashing Design
  - A Wide Array of Dashes (and Gaps Between Them)
  - Turning Dashes into Dots
  - More Pleasing Dash Patterns, Made with Math
  - Starting Mid-Stride
- Painting Lines
- Summary: Stroke Effects
14. Marking the Way
- Emphasizing Points
- Scaling to Strokes
- Orienting Arrows
- Defining Dimensions
- Summary: Line Markers
15. Less Is More
- Fading Away with the opacity Property
- The Clean-Cut Clip
  - Creating a Custom Clipping Path
  - Intersecting Shapes
  - Clipping a clipPath
  - Stretch-to-Fit Clipping Effects
  - Shorthand Shapes
- Hiding Behind Masks
  - Who Was That Masked Graphic?
  - Making a Stencil
- Summary: Clipping and Masking
16. Playing with Pixels
- The Filter Framework
  - A Basic Blur
  - Fast Filters from CSS Alone
- Mixing Multiple Filter Operations
  - The Chain of Commands
  - Mixing and Merging
  - Building a Better Blur
  - Morphing Shapes into Strokes
- Drawing Out of Bounds
  - Were Going to Need a Bigger Boom
  - Half-and-Half Filter Effects
- Blending with the Backdrop
  - Blending Basics
  - Premade Mixes
  - Isolating the Blend Effect
- Summary: Filters and Blend Modes
V. SVG as an Application
17. Beyond the Visible
- Titles and Tips
- Linking Labels
- Roles and Relationships
- 1,000 Words Are Worth a Picture
- Machine-Readable Metadata
- Summary: Metadata for Accessibility and Added Functionality
18. Drawing on Demand
- Linking It All Together
- Interactive Style Switches
- A Better Image Map
- Getting the Point(er) Across
- Targeting the Interaction
- The Big Event
  - Counting Clicks
  - Bubbling Out of Shadows
  - Measuring Mouse Positions
  - Capturing the Keyboard with JavaScript-Enhanced Links
  - Controlling the Keyboard with tabindex and focus()
- Summary: Interactive SVG
19. Transitioning in Time
- Scalable Vector Animations
- Smoothly Switching Styles
  - CSS Transitions
  - CSS Keyframe Animations
  - Benefits and Limits of Animating SVG with CSS
- Animations as Document Elements
  - Animating Attributes, Declaratively
  - Complex Animations
  - Benefits and Limits of SVG/SMIL Animation Elements
- Scripting Every Frame
  - Triggering Regular Updates
  - Calculating the Current Value
- Summary: Animation
20. Good Manners
- Planning Your Project
  - Does Your Project Need SVG at All?
  - Identify Your Browser Support Requirements
  - Decide How SVG Will Integrate in Your Website
  - Design for All Users
- Working with Graphical Editors
  - Define Your Artboard or Drawing Size
  - Structure Your Graphic
  - Name Things
  - Set Up Color Preferences for Web Use
  - Simplify Paths
  - Test Text Fallbacks, or Convert to Paths
  - Consider the Backdrop
  - Unset Styles
  - Learn the Limits of Your Tools SVG Output
  - Learn the Limits of SVG, Compared to Your Tool
- Coordinating Code
  - Structuring Styles
  - Sharing SVG Assets
  - Selecting a JavaScript Library
- Test, Test, Test!
- Final Thoughts
Index