book

SVG Essentials, 2nd Edition

by J. David Eisenberg, Amelia Bellamy-Royds

October 2014

Beginner

366 pages

8h 29m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Related skills

Who Should Read This Book?Who Should Not Read This Book?If You’re Still Reading This…About the ExamplesOrganization of This BookConventions Used in This BookSafari® Books OnlineHow to Contact UsAcknowledgments for the First EditionAcknowledgments for the Second Edition
Graphics SystemsRaster GraphicsVector GraphicsUses of Raster GraphicsUses of Vector GraphicsScalabilitySVG’s RoleCreating an SVG GraphicDocument StructureBasic ShapesSpecifying Styles as AttributesGrouping Graphic ObjectsTransforming the Coordinate SystemOther Basic ShapesPathsText
SVG as an ImageIncluding SVG in an <img> ElementIncluding SVG in CSSSVG as an ApplicationSVG Markup in a Mixed DocumentForeign Objects in SVGInline SVG in XHTML or HTML5SVG in Other XML Applications
The ViewportUsing Default User CoordinatesSpecifying User Coordinates for a ViewportPreserving Aspect RatioSpecifying Alignment for preserveAspectRatioUsing the meet SpecifierUsing the slice SpecifierUsing the none SpecifierNested Systems of Coordinates
LinesStroke Characteristicsstroke-widthStroke Colorstroke-opacitystroke-dasharray AttributeRectanglesRounded RectanglesCircles and EllipsesThe <polygon> ElementFilling Polygons That Have Intersecting LinesThe <polyline> ElementLine Caps and JoinsBasic Shapes Reference SummaryShape ElementsSpecifying ColorsStroke and Fill Characteristics
Structure and PresentationUsing Styles with SVGInline StylesInternal StylesheetsExternal StylesheetsPresentation AttributesGrouping and Referencing ObjectsThe <g> ElementThe <use> ElementThe <defs> ElementThe <symbol> ElementThe <image> Element
The translate TransformationThe scale TransformationSequences of TransformationsTechnique: Converting from Cartesian CoordinatesThe rotate TransformationTechnique: Scaling Around a Center PointThe skewX and skewY TransformationsTransformation Reference SummaryCSS Transformations and SVG
moveto, lineto, and closepathRelative moveto and linetoPath ShortcutsThe Horizontal lineto and Vertical lineto CommandsNotational Shortcuts for a PathElliptical ArcConverting from Other Arc FormatsBézier CurvesQuadratic Bézier CurvesCubic Bézier CurvesPath Reference SummaryPaths and FillingThe <marker> elementMarker Miscellanea

PatternspatternUnitspatternContentUnitsNested PatternsGradientsThe linearGradient ElementThe <stop> elementEstablishing a transition line for a linear gradientThe spreadMethod attributeThe radialGradient ElementEstablishing transition limits for a radial gradientThe spreadMethod attribute for radial gradientsGradient Reference SummaryTransforming Patterns and Gradients
Text TerminologySimple Attributes and Properties of the <text> ElementText AlignmentThe <tspan> ElementSetting textLengthVertical TextInternationalization and TextUnicode and BidirectionalityThe <switch> ElementUsing a Custom FontText on a PathWhitespace and TextCase Study: Adding Text to a Graphic
Clipping to a PathMaskingCase Study: Masking a Graphic
How Filters WorkCreating a Drop ShadowEstablishing the Filter’s BoundsUsing <feGaussianBlur> for a Drop ShadowStoring, Chaining, and Merging Filter ResultsCreating a Glowing ShadowThe <feColorMatrix> ElementMore About the <feColorMatrix> ElementThe <feImage> FilterThe <feComponentTransfer> FilterThe <feComposite> FilterThe <feBlend> FilterThe <feFlood> and <feTile> FiltersLighting EffectsDiffuse LightingSpecular LightingAccessing the BackgroundThe <feMorphology> ElementThe <feConvolveMatrix> ElementThe <feDisplacementMap> ElementThe <feTurbulence> ElementFilter Reference Summary
Animation BasicsHow Time Is MeasuredSynchronizing AnimationRepeated ActionAnimating Complex AttributesSpecifying Multiple ValuesTiming of Multistage AnimationsThe <set> ElementThe <animateTransform> ElementThe <animateMotion> ElementSpecifying Key Points and Times for MotionAnimating SVG with CSSAnimation PropertiesSetting Animation Key FramesAnimating Movement with CSS
Using Links in SVGControlling CSS AnimationsUser-Triggered SMIL AnimationsScripting SVGEvents: An OverviewListening for and Responding to EventsChanging Attributes of Multiple ObjectsDragging ObjectsInteracting with an HTML PageCreating New Elements
Determining the Value of Element AttributesSVG Interface MethodsConstructing SVG with ECMAScript/JavaScriptAnimation via ScriptingUsing JavaScript LibrariesEvent Handling in SnapClicking ObjectsDragging Objects
Converting Custom Data to SVGUsing XSLT to Convert XML Data to SVGDefining the TaskHow XSLT WorksDeveloping an XSL Stylesheet
What Is XML?Anatomy of an XML DocumentElements and AttributesName SyntaxWell-FormedCommentsEntity ReferencesCharacter ReferencesCharacter EncodingsUnicode Encoding SchemesOther Character EncodingsValidityDocument Type Definitions (DTDs)Putting It TogetherXML NamespacesTools for Processing XMLSelecting a ParserXSLT Processors
Anatomy of a StyleInline Styles: The style AttributeInternal StylesheetsStyle Selector ClassesUsing CSS with SVG
ConstantsVariablesAssignment and OperatorsArraysCommentsConditional StatementsRepeated ActionsFunctionsObjects, Properties, and MethodsWhat, Not How
Matrix TerminologyMatrix AdditionMatrix MultiplicationHow SVG Uses Matrix Algebra for Transformations
The ttf2svg Utility
Converting from Center and Angles to SVGConverting from SVG to Center and Angles

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.