SVG Essentials: Producing Scalable Vector Graphics with XML
366SVG Essentials: Producing Scalable Vector Graphics with XML
366eBook
Available on Compatible NOOK devices, the free NOOK App and in My Digital Library.
Related collections and offers
Overview
Learn the essentials of Scalable Vector Graphics, the mark-up language used by most vector drawing programs and interactive web graphics tools. SVG Essentials takes you through SVG’s capabilities, beginning with simple line drawings and moving through complicated features such as filters, transformations, gradients, and patterns.
This thoroughly updated edition includes expanded coverage of animation, interactive graphics, and scripting SVG. Interactive examples online make it easy for you to experiment with SVG features in your web browser. Geared toward experienced designers, this book also includes appendices that explain basic concepts such as XML markup and CSS styling, so even if you have no web design experience, you can start learning SVG.
- Create and style graphics to match your web design in a way that looks great when printed or displayed on high-resolution screens
- Make your charts and decorative headings accessible to search engines and assistive technologies
- Add artistic effects to your graphics, text, and photographs using SVG masks, filters, and transformations
- Animate graphics with SVG markup, or add interactivity with CSS and JavaScript
- Create SVG from existing vector data or XML data, using programming languages and XSLT
Product Details
ISBN-13: | 9781491945322 |
---|---|
Publisher: | O'Reilly Media, Incorporated |
Publication date: | 10/22/2014 |
Sold by: | Barnes & Noble |
Format: | eBook |
Pages: | 366 |
File size: | 3 MB |
About the Author
J. David Eisenberg is a programmer and instructor living in San Jose, California. David has a talent for teaching and explaining. He has developed courses for CSS, JavaScript, CGI, and beginning XML. He also teaches C and Perl at De Anza Community College in Cupertino. David has written articles for xml.com and alisapart.com on topics such as Javascript and the Document Object Model, XML validation, XSL Transformations and Formatting Objects, and (surprise) SVG. His on-line courses provide introductory tutorials for Korean, Modern Greek, and Russian. David has also been developing education software since 1975, when he worked with the Modern Foreign Language project at the University of Illinois to develop computer-assisted instruction on the PLATO system. He co-authored several of the in-box tutorials shipped with the venerable Apple II computer. David did the programming for the multimedia CD-ROM version of a series of children's stories, and the programming for beginning Algebra and Spanish discs. When not programming, David enjoys digital photography, reading science fiction, and riding his bicycle.
Amelia Bellamy-Royds is a freelance writer specializing in scientific and technical communication. She helps promote web standards and design through participation in online communities such as Web Platform Docs, Stack Exchange and Codepen. Her interest in SVG stems from work in data visualization, and builds upon the programming fundamentals she learned while earning a B.Sc. in bioinformatics. A policy research job for the Canadian Library of Parliament convinced her that she was more interested in discussing the big-picture applications of scientific research than doing the laboratory work herself, leading to graduate studies in journalism. She currently lives in Edmonton, Alberta. If she isn't at a computer, she's probably digging in her vegetable garden or out enjoying live music.
Table of Contents
Preface | xi | |
1. | Getting Started | 1 |
Graphics Systems | 1 | |
Scalability | 4 | |
SVG's Role | 6 | |
Creating an SVG Graphic | 7 | |
2. | Coordinates | 15 |
The Viewport | 15 | |
Using Default User Coordinates | 16 | |
Specifying User Coordinates for a Viewport | 17 | |
Preserving Aspect Ratio | 20 | |
Nested Systems of Coordinates | 24 | |
3. | Basic Shapes | 27 |
Lines | 27 | |
Stroke Characteristics | 28 | |
Rectangles | 32 | |
Circles and Ellipses | 35 | |
The polygon Element | 36 | |
The polyline Element | 38 | |
Line Caps and Joins | 39 | |
Basic Shapes Reference Summary | 41 | |
4. | Document Structure | 44 |
Structure and Presentation | 44 | |
Using Styles with SVG | 45 | |
Document Structure--Grouping and Referencing Objects | 49 | |
5. | Transforming the Coordinate System | 57 |
The translate Transformation | 57 | |
The scale Transformation | 59 | |
Sequences of Transformations | 63 | |
Technique: Converting from Cartesian Coordinates | 65 | |
The rotate Transformation | 68 | |
Technique: Scaling Around a Center Point | 70 | |
The skewX and skewY Transformations | 71 | |
Transformation Reference Summary | 72 | |
6. | Paths | 74 |
Moveto, lineto, and closepath | 74 | |
Relative moveto and lineto | 76 | |
Path Shortcuts | 77 | |
Elliptical Arc | 79 | |
Technique: Converting from Other Arc Formats | 81 | |
Bezier Curves | 87 | |
Path Reference Summary | 93 | |
Paths and Filling | 94 | |
The marker element | 95 | |
Marker Miscellanea | 99 | |
7. | Patterns and Gradients | 101 |
Patterns | 101 | |
Gradients | 107 | |
Transforming Gradients and Patterns | 116 | |
8. | Text | 118 |
Text Terminology | 118 | |
Simple Attributes and Properties of the text Element | 119 | |
Text Alignment | 122 | |
The tspan element | 122 | |
Setting textLength | 126 | |
Vertical Text | 126 | |
Internationalization and Text | 128 | |
Text on a Path | 131 | |
Whitespace and Text | 134 | |
Case Study--Adding Text to a Graphic | 135 | |
9. | Clipping and Masking | 137 |
Clipping to a Path | 137 | |
Masking | 141 | |
Case Study--Masking a Graphic | 145 | |
10. | Filters | 147 |
How Filters Work | 148 | |
Creating a Drop Shadow | 148 | |
Creating a Glowing Shadow | 151 | |
The feImage Filter | 155 | |
The feComponentTransfer Filter | 156 | |
The feComposite Filter | 161 | |
The feBlend Filter | 164 | |
The feFlood and feTile Filters | 165 | |
Lighting Effects | 167 | |
Accessing the Background | 172 | |
The feMorphology Element | 173 | |
The feConvolveMatrix Element | 174 | |
The feDisplacementMap Element | 176 | |
The feTurbulence Element | 178 | |
Filter Reference Summary | 180 | |
11. | Animating and Scripting SVG | 183 |
Animation Basics | 183 | |
How Time Is Measured | 186 | |
Repeated Action | 188 | |
The set Element | 189 | |
The animateColor Element | 190 | |
The animateTransform Element | 190 | |
The animateMotion Element | 192 | |
Using Links in SVG | 194 | |
Scripting SVG | 195 | |
12. | Generating SVG | 217 |
Using Perl to Convert Custom Data to SVG | 218 | |
Using Java to Convert XML to SVG | 223 | |
Using XSLT to Convert XML Data to SVG | 241 | |
13. | Serving SVG Files | 258 |
Serving Web Files--The Task at Hand | 258 | |
Partitioning the Task | 259 | |
Setting up the Server | 275 | |
A. | The XML You Need for SVG | 277 |
B. | Introduction to Stylesheets | 291 |
C. | Programming Concepts | 299 |
D. | Matrix Algebra | 309 |
E. | Creating Fonts | 317 |
F. | Using SVG with Other XML Applications | 320 |
Index | 327 |