book

Using SVG with CSS3 and HTML5

by Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey

October 2017

Intermediate to advanced

842 pages

19h 14m

English

O'Reilly Media, Inc.

Read now

Unlock full access

A Winding PathThe Road AheadBefore You BeginAbout This BookConventions Used in This BookA Brief AsideSupplementary MaterialAbout the ExamplesO’Reilly SafariHow to Contact UsAcknowledgments
Defining an SVG in CodeSimple ShapesStandalone SVGStyle and StructureRepetition Without RedundancyGraduating to GradientsActivating AnimationTalking with TextThe SVG AdvantageSummary: An Overview of SVG
SVG and the Web PlatformThe Changing WebFuture Focus: A Crystal BallJavaScript in SVGEmbedding SVG in Web PagesSVG as an HTML ImageInteractive Embedded SVGUsing SVG in HTML5 DocumentsUsing SVG with CSS3CSS Versus SVG: Style Versus GraphicsSummary: SVG and the Web
CSS in SVGStyle DeclarationsOverriding StylesConditional StylesSVG in CSSUsing SVG Images Within CSSMaking Every File CountUsing SVG Effects Within CSSCSS Versus SVGStyling Documents Versus Drawing GraphicsCSS as a Vector Graphics LanguageWhich to Choose?Summary: Working with CSS
Ready-to-Use SVGClick, Drag, Draw: Graphical SVG EditorsAdobe IllustratorAdobe PhotoshopSketchInkscape and SodipodiDraw SVGBoxy SVGBringing SVG Alive: SVG in the Web BrowserGecko for FirefoxWebKit for Safari and iOS DevicesBlink for Newer Versions of Chrome, Opera, and Android DevicesPresto for Older Opera Versions and Opera MiniTrident for Internet Explorer and Other Windows ProgramsEdgeHTML for Microsoft Edge and Windows 10+ ProgramsServoOther Dynamic SVG ViewersMarkup Management: Code EditorsAtom Plus SVG PreviewBrackets Plus SVG PreviewOxygen XML SVG EditorOnline Live Code SitesReady-to-Use Code: JavaScript LibrariesRaphaël and Snap.svgD3.jsGSAPSVG.jsProcessing and PackagingSummary: Software and Sources to Make SVG Easier
Drawing Lines, from Here to ThereFuture Focus: More Measurements and CalculationsIt’s Hip to Be Square (or Rectangular)Future Focus: Geometry as StyleCutting CornersCSS Versus SVG: Curved CornersCircular LogicCSS Versus SVG: Shapes in StylesheetsSummary: Basic Shapes
Giving Directions: The d AttributeFuture Focus: Piecewise PathsStraight Shooters: The move-to and line-to CommandsFinishing Touches: The close-path CommandHole-y Orders and Fill RulesFollowing the Grid: Horizontal and Vertical LinesCrunching CharactersShort and Sweet Shapes: Polygons and PolylinesCSS Versus SVG: Polygon PointsCurve Balls: The Quadratic Bézier CommandFuture Focus: Beyond Simple CoordinatesSmooth Operators: The Smooth Quadratic CommandCSS Versus SVG: Paths Beyond SVGWave Motion: The Cubic Bézier CommandsFuture Focus: Closing CurvesBuilding the ArcsFuture Focus: New Directions in Path CommandsSummary: Custom Shapes
When Text Isn’t TextWorking with Web FontsTypewriter TextFuture Focus: Positioning Text with CSSColorful LanguageCSS Versus SVG: Filling and Stroking Non-SVG TextResponsive Text ScalingAnchors and AlignmentSwitching Styles with <tspan>Adjusting the TypewriterFuture Focus: Automatically Positioned Multiline SVG TextFull-Control CharactersTwists and Turns: The <textPath> ElementSliding Text Along a Path with startOffsetFuture Focus: More Flexible Text PathsMeasuring the MessageSummary: Graphical Text Layout and Fonts

Coordinated EffortsFraming the View, with viewBoxFuture Focus: Selective ScalingCalibrating the ScalesScaling to FitA Poor Fit (and How preserveAspectRatio Fixes It)CSS Versus SVG: Scaling to FitJust-Right SizingAutosizing Embedded SVGResizing Inline SVGPreserving Aspect Ratios, with CSS PaddingFuture Focus: Aspect-Ratio Control in CSSSummary: Defining Coordinate Systems
Alternate Takes, with the <view> ElementRescaling on the Fly, with SVG View FragmentsFuture Focus: Cropping Any Image in a URLInteractive ViewsPackaged DealsFlat Pack StacksSummary: Cropping Embedded SVG Files
Reduce, Reuse, RecycleFuture Focus: The <use> Element Shadow DOMSymbolic UsageFuture Focus: Pinpointing a SymbolFile ManagementFuture Focus: Enabling Cross-Origin SVG AssetsPicture Perfect: Raster Images in SVGSmooth Scaling PhotographsFuture Focus: Easier Embedded ContentSummary: Reusing Content
A Simpler ScaleUnbalanced ScalesReflecting on TransformationsFuture Focus: Transforming the transform AttributeNew OriginsFuture Focus: Transformations with UnitsTurning Things AroundFuture Focus: Rotation Units and Adaptable OriginsSkewed PerspectiveEnter the MatrixSummary: Coordinate System Transformations
Coloring Between the LinesThe Rainbow ConnectionFuture Focus: Controlling Colors, ConsistentlyCoordinating ColorsVariables for Every PropertyWater ColorsFuture Focus: Percentage AlphaFilling with More Than Solid ColorsFuture Focus: Serving Up New PaintFallbacks for FillsFuture Focus: New Fill EffectsPicturing PaintScaling Paint ServersThe Boundaries of the BoxGreat GradientsShared StructuresAligning Linear GradientsTransforming GradientsRadiating Radial GradientsSwitching FocusCSS Versus SVG: CSS GradientsPatterns of PossibilityAll the Units to UseDividing the BoxPicture PerfectPatterned PrintsSummary: The fill Property, Gradients, and Patterns
Different StrokesA Simple Stroke to StartFuture Focus: Layered LinesMaking the Connection with Line JoinsFuture Focus: New Line-Join OptionsCapping It Off with Line CapsAdjusting Stroke AppearanceAnti-Anti-Aliasing for Crisp LinesSwapping Stroke and FillFuture Focus: Controlling Stroke PositionScaling Shapes Without Scaling StrokesA Dashing DesignA Wide Array of Dashes (and Gaps Between Them)Future Focus: Better References for Dash LengthsTurning Dashes into DotsCSS Versus SVG: Dashed Borders Versus Dashed StrokesMore Pleasing Dash Patterns, Made with MathFuture Focus: Greater Control of Dash PositionStarting Mid-StridePainting LinesFuture Focus: Painting in a Stroke Bounding BoxSummary: Stroke Effects
Emphasizing PointsScaling to StrokesOrienting ArrowsFuture Focus: Automatically Coordinating Markers with Their ShapesDefining DimensionsFuture Focus: Expanded Marker Position OptionsSummary: Line Markers
Fading Away with the opacity PropertyThe Clean-Cut ClipFuture Focus: Clipping Paths EverywhereCreating a Custom Clipping PathIntersecting ShapesClipping a clipPathStretch-to-Fit Clipping EffectsShorthand ShapesCSS Versus SVG: clip Versus clip-pathHiding Behind MasksFuture Focus: More Masks for More ContentWho Was That Masked Graphic?Making a StencilFuture Focus: Easier Image MasksSummary: Clipping and Masking
The Filter FrameworkA Basic BlurCSS Versus SVG: Blurred Elements Versus Blurred ShadowsFast Filters from CSS AloneFuture Focus: Filtering Images Within CSSMixing Multiple Filter OperationsThe Chain of CommandsMixing and MergingBuilding a Better BlurMorphing Shapes into StrokesDrawing Out of BoundsWe’re Going to Need a Bigger BoomHalf-and-Half Filter EffectsBlending with the BackdropBlending BasicsPremade MixesIsolating the Blend EffectFuture Focus: Filtering the BackdropSummary: Filters and Blend Modes
Titles and TipsFuture Focus: Multilingual TitlesLinking LabelsRoles and RelationshipsFuture Focus: Roles for Graphical Documents1,000 Words Are Worth a PictureMachine-Readable MetadataSummary: Metadata for Accessibility and Added Functionality
Linking It All TogetherInteractive Style SwitchesA Better Image MapGetting the Point(er) AcrossTargeting the InteractionThe Big EventCounting ClicksBubbling Out of ShadowsMeasuring Mouse PositionsCapturing the Keyboard with JavaScript-Enhanced LinksControlling the Keyboard with tabindex and focus()Summary: Interactive SVG
Scalable Vector AnimationsSmoothly Switching StylesCSS TransitionsCSS Keyframe AnimationsBenefits and Limits of Animating SVG with CSSFuture Focus: Additive CSS DeclarationsAnimations as Document ElementsAnimating Attributes, DeclarativelyComplex AnimationsCSS Versus SVG: Motion Paths in CSSBenefits and Limits of SVG/SMIL Animation ElementsScripting Every FrameFuture Focus: Declarative Scripted AnimationsTriggering Regular UpdatesCalculating the Current ValueSummary: Animation
Planning Your ProjectDoes Your Project Need SVG at All?Identify Your Browser Support RequirementsDecide How SVG Will Integrate in Your WebsiteDesign for All UsersWorking with Graphical EditorsDefine Your Artboard or Drawing SizeStructure Your GraphicName ThingsSet Up Color Preferences for Web UseSimplify PathsTest Text Fallbacks, or Convert to PathsConsider the Backdrop“Unset” StylesLearn the Limits of Your Tool’s SVG OutputLearn the Limits of SVG, Compared to Your ToolCoordinating CodeStructuring StylesSharing SVG AssetsSelecting a JavaScript LibraryTest, Test, Test!Final Thoughts

Overview

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