SVG: Primitives and Attributes

Table of contents

• SVG Concepts
• SVG
• Specification of Coordinates
• Coordinates
• Embedding SVG into HTML
• Initial Coordinate System
• Initial Coordinate System
• Initial Coordinate System: Percentage
• viewBox
• Painters Model
• Primitives Supported by SVG
• Predefined Graphics Objects
• Basic Shapes
• Rectangles
• Circles
• Ellipses
• Polygons
• Polygons - filled
• Paths
• Path Examples
• Text
• Text
• tspan
• tspan: simple example
• Tspan: adjust position
• Tspan: absolute positioning
• Embedded text
• Text on a Path
• Text on a Path using tspan
• Text on a Path: startOffset
• Text on a Path: Layout Rules
• Primitive Attributes
• Styling vs. Attribute Setting
• Digression: the defs element
• Attaching Style Sheets
• Attributes: g, path, text
• SVG Paint
• Fill Properties
• Fill Colour
• Fill-rules
• Fill-opacity
• Opacity
• Fill Opacity
• Example fill-opacity
• Gradients
• Linear Gradient
• Radial Gradient
• Gradient Example
• Fill Examples
• Patterns
• Stroke Properties
• Dash Example
• Dashed Lines: linecap
• Standard Colours by Name
• Some Additional Colours
• Complete Set of SVG Colours
• Line Colour
• Text Attributes
• Fonts