SVG Attribute Reference

Table of contents

Overview
Supported Attributes

Overview

The SVG elements support a range of attributes to control their appearance and behaviour. Many of these attributes are shared with HTML elements, and some are specific to SVG.

Unsupported Attributes

When re-using existing content, there are a lot of attributes that can be on an SVG file that are not supported, or relevant to the library. By default these attributes will be skipped over and ignored. However if running in Strict conformance mode the library will raise an error each time it encounters an unknown attribute or attribute value.

CSS vs Attributes

CSS support within SVG is limited. The preferred approach for the library is to bind to and calculate from reference values in the data.

NOTE: CSS Support for properties will be added based on repeatable results from browsers.

Case sensitivity

By default All attributes are case sensitive.

Binding values to attributes

When included in the document either inline with the rest of the content or embedded into the content the attributes support binging to dynamic data. As an image the binding will be empty.

   <html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
      <title>SVG Attribute Binding</title>
    </head>
    <body>
       <!-- An inline SVG drawing --> 
       <svg xmlns='http://www.w3.org/2000/svg' viewport='0 0 30 30' 
          width='' height=''>
          <rect x='10' y='10' width='' height='' />
          <text fill=''></rect>
        </svg>

        <!-- An embedded SVG drawing will also receive the binding with model.logo --> 
        <embed source='./mydrawing.svg' />

        <!-- An referenced SVG drawing as a static image will NOT be bound --> 
        <img src='./mydrawing.svg' />

    </body>
   </html>

Supported Attributes

The following attributes, spilt into functional groups, are supported by the library.

Standard Html Attributes.

The html global attributes are also available on the svg elements.

Element	Attribute	Description
Element ID	`id`	The unique identifier for this element within the document. This can be used to reference the element from styles other elements inside and outside the svg for non-image content.
Class name(s)	`class`	Zero or more names of css classes that will be used to match against for styling the element.
Inline style values	`style`	The css style attribute for applying visual style to an element directly. See the Styles for more information.
Is Hidden	`hidden`	This mirrors the library implementation, as it is a fast and easy way to show and hide content dynamically.
Outline Title	`title`	This mirrors the library implementation of outline title attribute and is also available as a title inner element
Href	`href`	Specifies the remote location of an image data file, or inline image data, that should be drawn on the SVG canvas.

Scaling and View Attributes

The followning attributes alter the size., shape and aspect ratio of teh SVG canvas and elements within a canvas.

Element	Attribute	Description
View Box	`viewBox`	Defines the rectangular position and size of a proportion of the inner drawing content that will be shown in the parent content, or of the canvas as a whole within the document.
Preserve Aspect Ratio	`preserveAspectRatio`	Defines how the inner drawing content will be aligned and scaled to fit the parent content, or of the canvas as a whole within the document.
Element Transformation Operations	`transform`	Defines one or more transformation instrictions to be performed on the element for presentation within the canvas or as a whole within the document.
Element Transformation Origin	`transform-origin`	Defines the origin point within the element that is being transformed - the point at which the transformations will be set from.

Shape Position and Size Attributes

By default all the svg visual elements are absolutely positioned relative to their containing SVG canvas. Many have their own indivdual position and size properties, and should be confirmed with each of the elements.

Element	Attribute	Description
Centre X Position	`cx`	The x coordinate position of the centre of a circle or ellipse within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings.
Centre Y Position	`cy`	The y coordinate position of the centre of a circle or ellipse within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings.
X Position	`x`	The x coordinate position of the element within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings. Used by the svg, rect, use, text, tspan, image and pattern.
Y Position	`y`	The y coordinate position of the element within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings. Used by the svg, rect, use, text, tspan, image and pattern.
First X Position	`x1`	The x coordinate position of the start of a line within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings. Also defines the horizontal start point of the line a linear gradient will follow.
First Y Position	`y1`	The y coordinate position of the start of a line within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings. Also defines the vertical start point of the line a linear gradient will follow.
Second X Position	`x2`	The x coordinate position of the end of line within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings. Also defines the horizontal end point of the line a linear gradient will follow.
Y Position	`y2`	The y coordinate position of the end of a line within the svg canvas. This is usually relative to the top left corner of the canvas, but can be altered by groups, transforms and viewbox settings. Also defines the vertical end point of the line a linear gradient will follow.
Circle Radius	`r`	The radius of a circle element.
X Radius	`rx`	The horizontal (x) radius of an ellipse element, and also the corner x radius of a rectangle elements.
Y Radius	`ry`	The vertical (y) radius of an ellipse element, and also the corner y radius of a rectangle elements.
Element Width	`width`	The horizontal size of an svg canvas, or elements within a canvas.
Element Height	`height`	The vertical size of an svg canvas, or elements within a canvas.

Path Operation Attrbutes

The following attributes define the position of points, lines, arcs within complex shapes in the SVG canvas and specify the markers .

Element	Attribute	Description
Path Data	`d`	The vector drawing instructions for a complex path.
Poly Points	`points`	The set of points to draw for a poly-line or polygon.

Stroke and Fill Attributes

The following attributes control the visual appearance of elements around the edge and within the shape.

Element	Attribute	Description
Element Fill	`fill`	A known color or a url reference to a defined pattern or gradient to use to flood fill the elements shape.
Element Fill Opacity	`fill-opacity`	Defines the visibility of content underneath the elements shape and how transparent the flood fill will be.
Element Fill Rule	`fill-rule`	Defines how a point within the shape will be considered as ‘inside’ and hence whether it will be filled.
Element Opacity	`opacity`	Specifies the transparency of an complete object or of a group of objects, that is, the degree to which the background behind the element is visible behind.
Element Stroke	`stroke`	A known color or a url reference (TBC) to a defined pattern or gradient to use to render an edge around the elements shape or characters.
Element Stroke Dash Spacing	`stroke-dasharray`	A series of numbers defining the repeating dashes and gaps used to render the border of a shape or character
Element Stroke Opacity	`stroke-opacity`	Defines the visibility of the border around the elements shape or characters and how transparent the stroke will be.
Element Stroke Width	`stroke-width`	Defines the width of the stroke around the elements shape or characters.
Element Stroke Line Cap	`stroke-linecap`	Defines the type of ending to be rendered for an open shape or character.
Element Stroke Line Join	`stroke-linejoin`	Defines the type of join to be rendered at corners within a shape or character.

Text Layout Attributes

The following attributes control the way textual content will be shown within the canvas or group, or on individual text and tspan elements. All fonts sould be available to the SVG drawing, including their varients for weight and style. If they are not found then the library will fall back to an available weight, style, family or mono-space.

Element	Attribute	Description
Dominant Basline	`dominant-baseline`	Aligns the characters to the top, middle, bottom, etc. of their point location.
Delta (offset) X Position	`dx`	Adjusts the x co-ordinate position of a text block or text span, relative to is parent.
Delta (offset) Y Position	`dy`	Adjusts the y co-ordinate position of a text block or text span, relative to is parent.
Font Family	`font-family`	Specifies a font or a priority list of fonts that inner text should be rendered with.
Font Size	`font-size`	Specifies the explicit or relative size that inner text should be rendered with.
Font Style	`font-style`	Specifies the style - italic or regular, that any inner text should be rendered with.
Font Weight	`font-weight`	Specifies the explicit or relative thickness, that any inner text should be rendered with.
Length Adjust	`lengthAdjust`	Alters the mechanism for how characters in the text are spaced and or stretched.
Letter Spacing	`letter-spacing`	Alters the spacing between characters for any inner text.
Text Anchor	`text-anchor`	Aligns the characters to the start, middle or end of their point location.
Text Decoration	`text-decoration`	Specifies whether the inner text should be rendered with underlines, strike throughs and/or overlines.
Text Length	`textLength`	Specifies the actual width of the space into which the inner text characters should be drawn.
Word Spacing	`word-spacing`	Alters the relative spacing between the end of one word and the beginning of the next for any inner text, independent of the letter spacing.

Marker Attributes

The following attributes control how markers are presented and rendered on shapes and lines on the SVG canvas.

Element	Attribute	Description
Path Start Marker Reference	`marker-start`	Specifies the identifier of a marker element that should be used at the start of the shape or path the attribute is specified.
Path Mid Marker Reference	`marker-mid`	Specifies the identifier of a marker element that should be used at vertex points on the shape or path the attribute is specified.
Path Start Marker Reference	`marker-start`	Specifies the identifier of a marker element that should be used at the end of the shape or path the attribute is specified.
X Reference Point	`refX`	The horizontal (x) position of the referernce point for a marker.
Y Reference Point	`refY`	The vertical (y) position of the reference point for a marker.
Marker Width	`width`	The horizontal size of a marker, when rendered onto the canvas.
Marker Height	`height`	The vertical size of a marker, when rendered onto the canvas.
Marker Orientation	`orient`	Specifies the way a marker should be rendered, either following the angle of the shape or reversed at the start, or at a specific angle.

Patterns and Gradient Attributes

The following attributes control how patterns, linear and radial gradients ar presented and rendered within shapes and characters on the SVG canvas.

Element	Attribute	Description
First X Position	`x1`	Specifies the horizontal start point of the line a linear gradient will follow.
First Y Position	`y1`	Specifies the vertical start point of the line a linear gradient will follow.
Second X Position	`x2`	Specifies the horizontal end point of the line a linear gradient will follow.
Second Y Position	`y2`	Specifies the vertical end point of the line a linear gradient will follow.
Radial Gradient Radius	`fr`	Specifies the radius of the focus point of a radial gradient.
Radial Gradient Focus X Position	`fx`	Adjusts the horizontal (x) co-ordinate position of the focal point of a radial gradient.
Radial Gradient Focus Y Position	`fy`	Adjusts the vertical (y) co-ordinate position of the focal point of a radial gradient.
Gradient Unit Type	`gradientUnits`	Sets the user space or bounding box co-ordinate system for linear and radial gradients.
Gradient Stop Color	`stop-color`	Sets the boundary colour for a specific stop within a linear or radial gradient.
Gradient Stop Opacity	`stop-opacity`	Sets the boundary opacity for a specific stop within a linear or radial gradient. Not currently supported in PDF output.
Gradient Stop Offset	`offset`	Sets the boundary offset for a specific stop within a linear or radial gradient.
Gradient Spread Method	`spreadMethod`	Specifies the wad a linear or radial gradient should display beyond the boundaries of the definition - pad, reflect or repeat.
Pattern Render Units	`patternUnits`	Specifies the user or bounding box option for a pattern, for the rendering within the elements that have the pattern applied.
Pattern Content Units	`patternContentUnits`	Specifies the user or bounding box option for a pattern, for the rendering of the inner pattern content elements.
Href	`href`	Specifies the location of an ‘template’ gradient or pattern that can be used by the current element as a building block for further definition.