Publisher References
Charts
While Publisher boasts many powerful features in order to add objects from the User Interface (UI), it can be challenging to know and locate the exact features in back-end, necessary to format your chart the way you picture it in your mind.
| Pie Chart | Column Chart | Line Chart | Area Chart | Doughnut Chart |
Pie Chart
Pie Charts are circular diagrams divided into sectors. These charts are useful when demonstrating proportions. For example, it can demonstrate the usage to effectively provide a visual representation of the percentage of retail sales by each sales territory.
xc:root
This is the top node in an xChart document. Typically, this element contains the declaration of 'xChart' namespace xmlns:xc="http://www.ecrion.com/2018/xc". A document can range from an empty fragment (no content inside xc:root) to a complex, deeply nested collection of xChart, XSL-FO and SVG elements. It can be inserted in XSL-FO via the fo:instream-foreign-object tag.
Content of xc:root
xc:pie- Element describing the pie chart.xc:legend- Element describing the chart legend.
Attributes for xc:root
Content of xc:legend
xc:legend-item: - Element describing an entry in the chart legend.
Content of xc:pie
xc:slice: - This element describes a slice in a pie chart.
Attributes for xc:slice
| fill | value | caption |
| stroke | stroke-width | stroke-dasharray |
Attributes for xc:pie
xc:pie - Element used to describe a pie/doughnut chart.
Column Chart
Column charts are useful for comparing data points in one or more data series. This type of chart is also known as bar chart. You can use a clustered column chart when you want to compare values across X-axis (the Category Axis) or stacked column charts when you have multiple data series and you want to emphasize the total.
xc:root
This is the top node in an xChart document. Typically, this element contains the declaration of 'xChart' namespace xmlns:xc="http://www.ecrion.com/2008/xc ". A document can range from an empty fragment (no content inside xc:root) to a complex, deeply nested collection of xChart, XSL-FO and SVG elements.
It can be inserted in XSL-FO via the fo:instream-foreign-object tag. Top node in an XChart document. Typically, this element contains the declaration of the 'XChart' namespace xmlns:xc="http://www.ecrion.com/2008/xc".
Content of a xc:root
- xc:plot-area - Element describing a chart in a two coordinate system. This includes line charts, bar charts and area charts.
- xc:legend - d - Element describing the chart legend.
- xc:title - Element displaying the chart title.
- xc:defs - Element containing definitions for complex graphical objects such as gradients.
Attributes for xc-title
xc:title - Element displaying the chart title.
| x | y | width | height | value |
Content of xc-defs
- xc:linear-gradient - Element describing a linear gradient.
- xc:stop - Element describing a stop point in the gradient.
Attributes for xc-stop
| x1 | y1 | x2 | y2 | href | gradientUnits | spreadMethod |
Attributes for xc-grid-lines
Attributes for 3D Elements
| aspect-3d-view | aspect-3d-chart-depth |
| aspect-3d-scene-depth | aspect-3d-shading |
Content of a xc:bar-chart
xc:bar-chart - Element describing a column/bar chart.
Attributes for a xc-bar-chart
| cluster-spacing | bar-shape | grouping |
Content of xc-serie
xc:serie - A data serie containing one or more data points.
Attributes for xc-data-point
| value | category | wWidth | caption |
| caption-color | caption-placement | marker | marker-width |
Line Chart
A line chart is a chart that displays a series of data points which are connected by straight line segments. These charts are useful for examining trends among data and also displaying comparisons of trends over different data groups. For example, both Internet Sales and Retail Sales are displayed over the span of four years to capture trends and spikes in sales totals.
Content
| xc:legend | xc:plot-area | xc:value-axis | xc:category-axis | xfd:serie |
Attributes for xfd:chart
Attributes for xfd-serie
| description | base-xpath | value | caption | category |
Area Chart
An area chart displays graphically quantitative data. It is based on the line chart and it continues with the area between axis and line, emphasized with colors, textures and hatchings. For example, two or more quantities can be compared using an area chart.
xfd-chart
This is the top node in an xChart document. Typically, this element contains the declaration of 'xChart' namespace xmlns:xc="http://www.ecrion.com/2008/xc". A document can range from an empty fragment (no content inside xc:root) to a complex, deeply nested collection of xChart, XSL-FO and SVG elements. It can be inserted in XSL-FO via the fo:instream-foreign-object tag.
Attributes for xfd:chart
Content of xfd:chart
| xc:legend | xc:plot-area |
| xc:value-axis | xc:category-axis |
Attributes for xc-plot-area
xc:plot-area - Element describing one or more data series in a two-dimensional coordinate system.
| x | y | width | height | show-captions |
Attributes for xc-value-axis
xc:value-axis - Element that determines the scale values of the vertical axis, also known as the y-axis.
| caption | caption-color | caption-offset | orientation | stroke | draw-axis | intersection |
| unit | max | min | font-family | font-size | font-style | font-color |
Content of xc:value-axis
| xc:tick-marks | xc:display-values | xc:grid-lines |
Attributes for xc-tick-marks
| tick-mark-style | tick-mark-length |
Attributes for xc-display-values
| unit-frequency | draw-values | draw-at-min | offset | min | replace-value |
| max | placement | orientation | format | caption-color | adjust-values |
Content of xc:display-values
xc:value- Element describing a chart value on an axis.
Attributes for xc-category-axis
xc:category-axis - Element that determines the scale values of the horizontal axis, also known as the x-axis.
| caption | caption-color | caption-offset | orientation | intersection |
| unit | min | max | font-family | font-size |
| font-style | font-color | data-type | stroke | draw-axis |
Content of xc:category-axis
| xc:tick-marks | xc:display-values | xc:grid-lines |
Doughnut Chart
Doughnut is very similar to the Pie Chart, both divided into segments such that the arc of each segment represents a proportional value of each piece of data. For example, you could use a doughnut chart to plot survey questions with a small number of answers or other data where categories are limited.
xfd:chart
This is the top node in an xChart document. Typically, this element contains the declaration of 'xChart' namespace xmlns:xc="http://www.ecrion.com/2008/xc".
A document can range from an empty fragment (no content inside xc:root) to a complex, deeply nested collection of xChart, XSL-FO and SVG elements. It can be inserted in XSL-FO via the fo:instream-foreign-object tag.
Content of xfd:chart
| xc:legend | xc:pie |
Attributes for xc-legend
xc:legend - The element describes the chart legend and it is a direct child of xfd:chart element.
| label | label-width | label-spacing | legend-placement | x | y |
| width | stroke | stroke-width | fill | font-size | font-weight |
| font-style | font-family | font-color | caption | caption-color | show-captions |
Attributes for xc-pie
xc:pie - Element used to describe a pie/doughnut chart.
Common Attributes
Size & Positioning Attributes
| x-axis coordinate | |
|---|---|
| Type | length |
| Initial Value | 0 |
| Applies to | xc:plot-area, xc:legend, xc:root, xc:title |
| y-axis coordinate | |
|---|---|
| Type | length |
| Initial Value | 0 |
| Applies to | xc:plot-area, xc:legend, xc:root, xc:title |
| width | Intrinsic width of an element |
|---|---|
| Type | length |
| Initial Value | 0 |
| Applies to | xc:plot-area, xc:legend, xc:root, xc:title, xc:data-point |
| height | Intrinsic height of an element |
|---|---|
| Type | length |
| Initial Value | 0 |
| Applies to | xc:plot-area, xc:legend, xc:root, xc:title, xc:data-point |
| viewBox | Element view box |
|---|---|
| Type | Rectangle defined as "x y width height", mapping the internal coordinates to the external viewport |
| Initial Value | 0 0 1 1 |
| Applies to | xc:root |
| offset | Specifies the distance to current viewport origin |
|---|---|
| Type | length |
| Initial Value | 0 |
| Applies to | xc:stop, xc:display-values |
Stroke Attributes
Stroke attributes represent a set of attributes used to paint the outline of an element.
| stroke | The color used to paint the outline |
|---|---|
| Type | color |
| Initial Value | black |
| Applies to | any element |
| stroke-width | The width of the stroke on the current object. |
|---|---|
| Type | length |
| Initial Value | 1pt |
| Applies to | any element |
Note
A zero value causes no stroke to be painted, while a negative value generates an error.
| stroke-linecap | The line cap type for the stroke. |
|---|---|
| Type | butt, round or square |
| Initial Value | butt |
| Applies to | any element |
| stroke-linejoin | The line join style for the stroke. |
|---|---|
| Type | miter, round or bevel |
| Initial Value | miter |
| Applies to | any element |
| stroke-miterlimit | The miter limit for the stroke. |
|---|---|
| Type | length |
| Initial Value | 2px |
| Applies to | any element |
| stroke-dasharray | Controls the pattern of dashes and gaps used to stroke paths. |
|---|---|
| Type | none or 'dash array' |
| Initial Value | none |
| Applies to | any element |
Note
'dash array' contains a list of comma-separated (with optional white space) lengths that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2.
| stroke-dashoffset | The offset (in the right direction) of the dash array. |
|---|---|
| Type | length |
| Initial Value | 0px |
| Applies to | any element |
Fill Attributes
Fill Attributes represent a set of attributes used to paint the background of an element.
| fill | The color used to paint the background. |
|---|---|
| Type | color |
| Initial Value | transparent |
| Applies to | any element |
Value Attributes
| value | Specifies the data type of the value axis (y). |
|---|---|
| Type | number, date or string |
| Initial Value | Not applicable. This attribute is always required. |
| Applies to | xc:slice, xc:data-point, xc:spider-data-point, xc:display-values, xc:title, xc:value |
| category | Specifies the data type of the category axis (x). |
|---|---|
| Type | number, date or string |
| Initial Value | Not applicable. This attribute is always required. |
| Applies to | xc:data-point |
| orientation | Specifies if an axis is vertical or horizontal. |
|---|---|
| Type | vertical or horizontal |
| Initial Value | Not applicable. This attribute is always required. |
| Applies to | xc:value-axis, xc:category-axis |
| intersection | Specifies the intersection point of an axis with the opposite one. |
|---|---|
| Type | auto, min or max |
| Initial Value | auto |
| Applies to | xc:value-axis, xc:category-axis |
| min | Overrides the automatically calculated minimum value for an axis. |
|---|---|
| Type | number, date or string |
| Initial Value | nothing |
| Applies to | xc:value-axis, xc:category-axis |
| max | Overrides the automatically calculated maximum value for an axis. |
|---|---|
| Type | number, date or string |
| Initial Value | nothing |
| Applies to | xc:value-axis, xc:category-axis |
| unit | Overrides the automatically calculated unit value for an axis. |
|---|---|
| Type | auto, days, months, years or number |
| Initial Value | auto |
| Applies to | xc:value-axis, xc:category-axis |
The Type values have the following meaning:
- auto - the units are calculated automatically based on the min-max range of the axis.
- days | months | years - applicable when the axis displays dates.
- number - applicable when the axis displays numbers.
| placement | Specifies the placement method for xc:axis-labels elements in rapport with the xc:major-tick-marks. |
|---|---|
| Type | auto, center or between |
| Initial Value | auto |
| Applies to | xc:display-values |
Other Attributes
Label
Sets the label type for the chart item: square, circle, line, triangle.
Label width
Sets the label width.
Label spacing
Sets the spacing around the label.
Legend placement
Specifies the position of the legend with respect to the xc:legend element (e.g. legend-placement="right").
X coordinate
Sets the x-coordinate.
Y coordinate
Sets the y-coordinate.
Width
Represents the intrinsic width of an element.
Height
Represents the intrinsic height of an element.
Stroke
Sets the border of the xc:legend element, defining the color of the outline (e.g. stroke="LightGreen").
Stroke width
Sets the stroke's width (e.g. stroke-width="2").
Fill
Specifies the background color of the legend box limited by the stroke (e.g. fill="Yellow").
Font size
Specifies the font size of the text.
Font color
Specifies the font color of the text (e.g. font-color="Red").
Font style
Specify the font style of the text (e.g. font-style="bold").
Font family
Specifies the font family of the text.
Font weight
Specify the font weight of the text.
Caption
Specifies the caption text.
Caption placement
Sets the placement for the caption. The available values are "outside-end", "center", "insideend", "inside-base", and the default value is "auto".
Caption color
Specifies the color of the caption text (e.g. caption-color="Green").
Caption offset
Specifies the category axis caption offset from axis.
Show captions
Turns the captions on or off from the plot area. The available values are "true" and "false".
Category
Specifies the category on the x axis of the line in the chart.
Value
Specifies the value on the y axis of the line in the chart.
Base xpath
Specifies the XPath expression string of the chart line.
Description
Specifies the description of the line in the chart.
Min
Overrides the automatically calculated minimum value for an axis.
Max
Overrides the automatically calculated maximum value for an axis.
Unit
Overrides the automatically calculated unit value for an axis.
Intersection
Specifies the intersection point of an axis with the opposite one.
Orientation
Specifies the orientation of the axis. (e.g. orientation="vertical")
Unit frequency
Sets the frequency of the units.
Draw values
Defines if ticks on the axis must be drawn for the specified values. The default value is "true".
Draw at min
Defines if labels must be drawn next to the minimum value of the axis (only affects when chart has negative values). The default value is "true".
Offset
Specifies the distance to the current viewport origin.
Placement
Specifies the placement method for example, xc:axis-labels elements in rapport with the xc:major-tick-marks. (e.g. placement="")
Tick mark style
Specifies the visual appearance of a xc:major-tick-marks or a xc:minor-tick-marks.
Tick mark length
Intrinsic size of an xc:tick-marks element.
Data type
Sets the type of data used. Available values are "number", "string" and "date".
Draw axis
Specifies if the axis element will be drawn. Available values are "true" and "false".
Marker
Sets marker on the data point. Available values are "square", "circle", "line" and "rhombus".
Marker width
Sets the marker width value. (e.g. marker-width="5px")
wWidth
Sets the bar width for the data point (applies only to bar chart).
Cluster spacing
Sets the spacing between two bars in the same cluster (applies when multiple series are used). (e.g. cluster-spacing="1px")
Bar shape
Specifies types of bar used. Available values are: "bar" and "cylinder" (3D only).
Grouping
Defines how to group multiple series. Possible values are "overlapped” and "clustered". The default value is "overlapped".
Aspect 3D view
Applies a 3D transformation to an element. Available values are "true" and "false".
Aspect 3D chart depth
Sets the depth for a 3D chart. (e.g. aspect-3d-chart-depth="1in")
Aspect 3d scene depth
Sets the depth for a chart’s scene. (e.g. aspect-3d-scene-depth="14pt")
Aspect 3d shading
Sets the scene shade for a 3D chart. Available values are between 0 and 1. (e.g. aspect-3d-shading="0.75")
Adjust values
Specifies if a value will be replaced. Available values are "true" and "false".
Replace value
Specifies if the initial value will not be displayed anymore. Available values are "true" and "false".
Format
Specifies the format in which the values are written. (e.g. format="####0.## th: dec:.")
x1
Sets the start point for x-axis coordinate. (e.g. x1="20pt")
x2
Sets the end point for x-axis coordinate.
y1
Sets the start point for y-axis coordinate.
y2
Sets the end point for y-axis coordinate.
Href
Represents an URI reference to a different linear gradient element within the current document fragment. (e.g. fill="url(#Red)")
Gradient units
Defines the coordinate system for x1, y1, x2, y2.
Spread method
Specifies the behavior, if the gradient starts and ends in the bounds where it is being painted. The values are: "pad", "reflect", "repeat".
Show connectors
Enables connections between the chart and the captions. The available values are "true" and "false".
Slice orientation
Defines the orientation for drawing the slices. The available values are "clockwise" and "counterclockwise".
Start angle
Specifies the angle (in degrees) from which to start drawing the slices. For example, it is equivalent to rotating the whole pie.
Stroke dasharray
Controls the pattern of dashes and gaps used to stroke paths.
CSS
Publisher supports CSS (Cascading Style Sheets) for customizing your template documents. The styling is done similar to HTML, elements assign IDs via "id" attribute and classes via "class" attribute. The difference between the two attributes is that while there cannot exist duplicated IDs in the same document, the same class can be applied to multiple elements.
The XML view of your document template allows expressing external stylesheets, insofar the available CSS attributes are limited. XSL Stylesheet processor accepts an XML document and adds to it a stylesheet (CSS file) to express users' intentions about how the structured content should be presented.
Common Absolute Position Properties
| top | right | left | bottom |
Common Border, Padding & Background Properties
Common Font Properties
| font-family | font-size | font-stretch | font-size-adjust |
| font-style | font-variant | font-weight |
Common Margin Properties Block
| margin-top | margin-bottom | margin-right | margin-left |
Area Dimension Properties
| height | max-height | min-height |
| width | max-width | min-width |
Block and Line-related Properties
| line-height | text-align | text-indent |
Character Properties
| letter-spacing | text-decoration | text-shadow |
| text-transform | word-spacing | color |
Table Properties
| border-collapse | caption-side | empty-cells | table-layout |
Writing-mode-related Properties
| direction | unicode-bidi |
Miscellaneous Properties
| visibility | z-index |
CSS Attributes
background-attachment
If a background-image is specified, this property specifies whether it is fixed with regard to the viewport (fixed) or scrolls along with the document (scroll).
background-color
This property sets the background color of an element, either a color value or the keyword transparent, to make the underlying colors shine through.
background-image
This property sets the background image of an element.
background-repeat
If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content and padding areas of a box.
border-top-color
This property sets the color of the top-border.
border-top-style
This property specifies the line style of the top-box's border (solid, double, dashed, etc.).
border-top-width
Specifies the width of the top-border area.
border-bottom-color
Specifies the border color for the bottom-edge.
border-bottom-style
Specifies the border style for the bottom-edge.
border-bottom-width
Specifies the border width for the bottom-edge.
border-left-color
Specifies the border color for the left-edge.
border-left-style
Specifies the border style for the left-edge.
border-left-width
Specifies the border width for the left-edge.
border-right-color
Specifies the border color for the right-edge.
border-right-style
Specifies the border style for the right-edge.
border-right-width
Specifies the border width for the right-edge.
padding-top
Specifies the width of the padding on the top-edge of a block-area or inline-area.
padding-bottom
Specifies the width of the padding on the bottom-edge of a block-area or inline-area.
padding-left
Specifies the width of the padding on the left-edge of a block-area or inline-area.
padding-right
Specifies the width of the padding on the right-edge of a block-area or inline-area.
font-size
This property describes the size of the font when set solid.
font-size-adjust
This property allows you to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font. For example, the popular font Verdana has an aspect value of 0.58.
font-stretch
This property selects a normal, condensed, or expanded face from a font family.
font-style
This property requests normal, italic, bold and oblique faces within a font family.
font-variant
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
font-weight
This property specifies the weight of the font.
font-family
This property specifies a prioritized list of font family names and/or generic family names.
margin-top
Sets the top margin of a box.
margin-bottom
Sets the bottom margin of a box.
margin-left
Sets the left margin of a box.
margin-right
Sets the right margin of a box.
height
This property specifies the content height of boxes generated by block-level and replaced elements.
max-height
These two properties ["max-height" and "min-height"] allow you to constrain box heights to a certain range.
min-height
These two properties ["max-height" and "min-height"] allow you to constrain box heights to a certain range.
width
This property specifies the content width of boxes generated by block-level and replaced elements.
max-width
These two properties ["max-width" and "min-width"] allow authors to constrain box widths to a certain range.
min-width
These two properties ["max-width" and "min-width"] allow authors to constrain box widths to a certain range.
line-height
If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of each generated inline box.
If the property is set on an inline-level element, it specifies the exact height of each box generated by the element. (Except for inline replaced elements, where the height of the box is given by the height property.)
text-align
This property describes how inline content of a block is aligned.
text-indent
This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box.
letter-spacing
This property specifies spacing behavior between text characters.
text-decoration
This property describes decorations that are added to the text of an element. If the property is specified for a block-level element, it affects all inline-level descendants of the element. If it is specified for (or affects) an inline-level element, it affects all boxes generated by the element.
text-shadow
This property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself.
text-transform
This property controls capitalization effects of an element's text.
word-spacing
This property specifies spacing behavior between words.
color
This property describes the foreground color of an element's text content.
visibility
property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).
z-index
For a positioned box, the "z-index" property specifies the stack level of the box in the current stacking context or whether the box establishes a local stacking context.
direction
This property specifies the base writing direction of blocks and the direction of embeddings and overrides for the Unicode BIDI algorithm. In addition, it specifies the direction of table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block in case of 'text-align: justify'.
unicode-bidi
Because the Unicode algorithm has a limit of 61 levels of embedding, care should be taken not to use 'unicode-bidi' with a value other than 'normal' unless appropriate. In particular, a value of 'inherit' should be used with extreme caution. However, for elements that are, in general, intended to be displayed as blocks, a setting of 'unicode-bidi: embed' is preferred to keep the element together in case display is changed to inline
border-collapse
This property selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.
caption-side
This property specifies the position of the caption box with respect to the table box.
table-layout
This property controls the algorithm used to lay out the table cells, rows, and columns.
empty-cells
This property controls the rendering of borders and backgrounds around cells that have no visible content.
top
This property specifies how far a box's top margin edge is offset below the top edge of the box's containing block.
right
This property specifies how far a box's right margin edge is offset to the left of the right edge of the box's containing block.
left
This property specifies how far a box's left margin edge is offset to the right of the left edge of the box's containing block.
bottom
This property specifies how far a box's bottom margin edge is offset above the bottom edge of the box's containing block.
SVG
Scalable Vector Graphics (SVG) is the most popular open image format for vector graphics. You can use SVG to add shapes or gradients to your template documents.
General Properties
Please find in the table below the list of general properties applied both to SVG and all child elements.
Particular Properties
The SVG element supports the following particular attributes:
| x | y | width |
| height | viewBox | preserveAspectRatio |
SVG Attributes
Please find below details about each SVG attribute.
href
The attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
cx
The attribute defines the x-axis coordinate of a center point.
cy
The attribute defines the y-axis coordinate of a center point.
r
The attribute defines the radius of a circle.
filter
The attribute defines the filter effects defined by the <filter> element that shall be applied to its element.
rx
The attribute defines a radius on the x-axis.
ry
The attribute defines a radius on the y-axis.
stop-color
The attribute indicates what color to use at that gradient stop.
stop-opacity
The attribute defines the opacity of a given gradient stop.
offset
The attribute moves an image relative to its current position.
x
The attribute defines a x-axis coordinate in the user coordinate system.
y
The attribute defines a y-axis coordinate in the user coordinate system.
width
The attribute defines the horizontal length of an element in the user coordinate system.
height
The attribute defines the vertical length of an element in the user coordinate system.
preserveAspectRatio
The attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
x1
The attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.
x2
The attribute is used to specify the second x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.
y1
The attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead.
y2
The attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead.
gradientTransform
The attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system. This allows for things such as skewing the gradient.
gradientUnits
The attribute defines the coordinate system for attributes x1, y1, x2 and y2 on the linearGradient element or for attributes cx, cy, r, fx, and fy on the radialGradient.
spreadMethod
The attribute applies to gradient paint elements: linearGradient and radialGradient. It determines how a shape is filled beyond the defined edges of the gradient.
maskUnits
The attribute indicates which coordinate system to use for the geometry properties of the mask element.
maskContentUnits
The attribute indicates which coordinate system to use for the contents of the mask element.
d
The attribute defines a path to be drawn.
patternTransform
The attribute defines a list of transform definitions that are applied to a pattern tile.
patternUnits
The attribute indicates which coordinate system to use for the geometry properties of the pattern element.
patternContentUnits
The attribute indicates which coordinate system to use for the contents of the pattern element.
viewBox
The attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated element.
points
The attribute defines a list of points. Each point is defined by a pair of number representing a X and a Y coordinate in the user coordinate system.
fx
For the radialGradient element, this attribute defines the x-axis coordinate of the focal point for radial gradient. If the attribute is not specified, it's assumed to be at the same place as the center point.
fy
For the radialGradient element, this attribute defines the y-axis coordinate of the focal point for the radial gradient. If the attribute is not specified, it's assumed to be at the same place as the center point.
dx
The attribute indicates a shift along the x-axis on the position of an element or its content.
dy
The attribute indicates a shift along the y-axis on the position of an element or its content.
dominant-baseline
The attribute is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table and a baseline-table font-size.
startOffset
The attribute sets the initial current text position from the start of the <path>. The default value is '0' and it cannot be negative.
mask
The attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to.
fill
The attribute for shapes and text is a presentation attribute that lets define the color (or any SVG paint servers like gradients or patterns) used to paint the element.
fill-opacity
The attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to a shape.
fill-rule
The attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.
stroke
The attribute is a presentation attribute defining the color (or any SVG paint servers like gradients or patterns) used to paint the outline of the shape.
stroke-opacity
The attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to the stroke of a shape.
stroke-width
The attribute is a presentation attribute defining the width of the stroke to be applied to the shape.
stroke-linecap
The attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
stroke-linejoin
The attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.
stroke-miterlimit
The attribute is a presentation attribute defining a limit on the ratio of the miter length to the stroke-width used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel.
stroke-dasharray
The attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
stroke-dashoffset
The attribute is a presentation attribute defining an offset on the rendering of the associated dash array.
opacity
The attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.
font-family
The attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.
font-size
The attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment.
font-weight
The attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.
font-style
The attribute specifies whether the text is to be rendered using a normal, italic or oblique face.
font-selection-strategy
This attribute specifies the strategy to be followed for selecting a font based on these specified criteria.
text-anchor
The attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.
letter-spacing
The attribute controls spacing between text characters, in addition to any spacing from other attributes.
text-decoration
The attribute works exactly like the CSS text decoration property except that it is an attribute. It sets the appearance of decorative lines on text.
text-shadow
The property adds shadows to text.
visibility
The attribute lets you control the visibility of graphical elements. With a value of "hidden" or "collapse" the current graphics element is invisible.
display
The attribute lets you control the rendering of graphical or container elements. It only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements.
For example, setting "display: none" on a <path> element will prevent that element from getting rendered directly onto the canvas, but the <path> element can still be referenced by a <textPath> element.
baseline-shift
The attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.
clip-path
The presentation attribute defines or associates a clipping path with the element it is related to.
transform
The attribute defines a list of transform definitions that are applied to an element and the element's children.
Child Elements of SVG
The SVG element can enclose the following children:
| a | circle | clipPath | defs | ellipse |
| stop | g | image | line | linearGradient |
| mask | path | pattern | polygon | polyline |
| radialGradient | rect | svg | style | switch |
| symbol | text | textPath | tspan | use |
SVG Elements Definitions
<a>
The SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
Attributes for <a>
| href |
<circle>
The element is an SVG basic shape, used to create circles based on a center point and a radius.
Attributes for <circle>
| cx | cy | r | filter |
<clipPath>
The element defines a clipping path. A clipping path is used/referenced using the clip-path property.
<defs>
The element is used to store graphical objects that will be used at a later time. Objects created inside this element are not rendered directly. To display them you have to reference them (with a <use> element, for example).
<ellipse>
The element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
Attributes for <ellipse>
| cx | cy | rx | ry | filter |
<stop>
The element defines the ramp of colors to use on a gradient, which is a child element to either the <linearGradient> or the <radialGradient> element.
Attributes for <stop>
| stop-color | stop-opacity | offset |
<g>
The element is a container used to group other SVG elements.
<image>
The element includes images inside SVG documents. It can display raster image (bitmaps) files or other SVG files.
Attributes for <image>
| x | y | width | height | href | filter | preserveAspectRatio |
<line>
The element is an SVG basic shape used to create a line connecting two points.
Attributes for <line>
| x1 | y1 | x2 | y2 | filter |
<linearGradient>
The element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
Attributes for <linearGradient>
| gradientTransform | x1 | y1 | x2 |
| y2 | href | gradientUnits | spreadMethod |
<mask>
The element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.
Attributes for <mask>
| maskUnits | maskContentUnits | x |
| y | width | height |
<path>
The element is the generic element to define a shape. All the basic shapes can be created with a path element.
Attributes for <path>
| d | filter |
<pattern>
The element defines a graphics object which can be redrawn at repeated x and y-coordinate intervals to cover an area.
Attributes for <pattern>
| x | y | width | height | patternTransform |
| patternUnits | patternContentUnits | preserveAspectRatio | href | viewBox |
<polygon>
The element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point. For open shapes see the polyline element.
Attributes for <polygon>
| points | filter |
<polyline>
The element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the polygon element.
Attributes for <polyline>
| points | filter |
<radialGradient>
The element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
Attributes for <radialGradient>
| gradientTransform | cx | cy |
| fx | fy | r |
| href | gradientUnits | spreadMethod |
<rect>
The element is a basic SVG shape that creates rectangles, defined by their corner's position, their width, and their height. The rectangles may have their corners rounded.
Attributes for <rect>
| x | y | width | height | rx | ry | filter |
<svg>
The <svg> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of any SVG document but it can also be used to embed a SVG fragment inside any SVG.
<style>
The element allows style sheets to be embedded directly within SVG content. SVG's style element has the same attributes as the corresponding element in HTML.
<switch>
The element evaluates the attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered.
<symbol>
The element is used to define graphical template objects which can be instantiated by a use element.
Attributes for <symbol>
| viewBox | preserveAspectRatio |
<text>
The element defines a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, just like any other SVG graphics element.
Attributes for <text>
| x | y | dx |
| dy | dominant-baseline | filter |
<textPath>
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a path element. To specify that a block of text is to be rendered along the shape of a <path>, enclose the given text in a <textPath> element which includes an href attribute with a reference to a <path> element.
Attributes for <textPath>
| href | startOffset |
<tspan>
Within a text element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.
Attributes for <tspan>
| x | y | dx | dy |
<use>
The element takes nodes from within the SVG document, and duplicates them somewhere else.
Attributes for <use>
| href | mask | x | y | width | height | filter |
Translations
In the Publisher tool, you can set up multiple language translations for your document template. This means that during the rendering process, a specific translation can be applied and all of the static text in your document will be replaced using the translation that you set up in the Publisher.
Supported Languages
Please find below all the available translation languages for your document template:
| Language Name | Language ID | Translation File Name |
|---|---|---|
| Afrikaans | af_ZA | TranslationFile.Afrikaans.xml |
| Danish | da_DK | TranslationFile.Danish.xml |
| Dutch | nl_NL | TranslationFile.Dutch.xml |
| English (Canada) | en_CA | TranslationFile.English (Canada).xml |
| English (South Africa) | en_ZA | TranslationFile.English (South Africa).xml |
| English (United Kingdom) | en_GB | TranslationFile.English (United Kingdom).xml |
| Estonian | et_EE | TranslationFile.Estonian.xml |
| French (Canada) | fr_CA | TranslationFile.French (Canada).xml |
| French | fr_FR | TranslationFile.French.xml |
| German (Austria) | de_AT | TranslationFile.German (Austria).xml |
| German (Germany) | de_DE | TranslationFile.German (Germany).xml |
| German (Switzerland) | de_CH | TranslationFile.German (Switzerland).xml |
| Hungarian | hu_HU | TranslationFile.Hungarian.xml |
| Italian | it_IT | TranslationFile.Italian.xml |
| Lithuanian | lt_LT | TranslationFile.Lithuanian.xml |
| Nepali | ne_NP | TranslationFile.Nepali.xml |
| Norwegian (Bokmål) | nb_NO | TranslationFile.Norwegian (Bokmål).xml |
| Norwegian (Nynorsk) | nn_NO | TranslationFile.Norwegian (Nynorsk).xml |
| Polish | pl_PL | TranslationFile.Polish.xml |
| Portuguese | pt_BR | TranslationFile.Portuguese.xml |
| Romanian | ro_RO | TranslationFile.Romanian.xml |
| Slovak | sk_SK | TranslationFile.Slovak.xml |
| Slovenian | sl_SI | TranslationFile.Slovenian.xml |
| Spanish (Mexico) | es_MX | TranslationFile.Spanish (Mexico).xml |
| Spanish | es_ES | TranslationFile.Spanish.xml |
| Swahili | sw_TZ | TranslationFile.Swahili.xml |
| Swedish | sv_SE | TranslationFile.Swedish.xml |
| Thai | th_TH | TranslationFile.Thai.xml |