---
title: "Report - SVG"
description: "Displays SVG images on report pages."
---

# Report - SVG

> Displays SVG images on report pages.

The SVG component allows .svg image files to be placed, resized, and copy and pasted onto report pages. SVGs can be dragged from a local computer, shared drive, or the Image Management Tool onto reports. These files will fill an existing SVG component or be displayed in an SVG component when first added to a page. Other image file types will be contained in an [Image](../report-component-images/report-component-images.md) component.

![The placeholder image for an SVG component added to a report page.](imgs/report-svg.png)

**Report Design Component**

![The SVG component icon shown in the Report Components panel.](imgs/report-design-component-svg.png)

## Properties

Use the SVG properties in the Property Inspector to configure the SVG component.

### Stroke and Fill

|Property|Description|
|---|---|
|Opacity|How opaque the fill color is, between 0 and 1.|
|Stroke Style|What style of stroke or border to use, options include: HiddenShape OutlineBorderDoubleTo learn more about stroke styles, refer to the [Stroke and Fill Properties](ignition-modules/reporting/report-design/stroke-and-fill-properties-for-reports/stroke-and-fill-properties-for-reports.md) page.|
|Stroke|Details for the chosen stroke. Each Stroke has its own properties depending on the [Stroke Style](ignition-modules/reporting/report-design/stroke-and-fill-properties-for-reports/stroke-and-fill-properties-for-reports.md) chosen.|

### Basic Properties

|Property|Description|
|---|---|
|Roll| The number of degrees this shape is rotated clockwise. Default is 0. |
|Scale X |The amount to scale the width of the shape. A value of 1 results in scaling to 100 percent. Default is 1.|
|Scale Y| The amount to scale the height of the shape. A value of 1 results in scaling to 100 percent. Default is 1. |
|URL| A link to attach to this shape. It will be a clickable hyperlink if the report is exported as a PDF. Links can also be configured for internal navigation using the following values:**Page:Next**: Navigates to the next page. **Page:Back**: Navigates to the previous page.**Page:Number**: Replace `Number` with the specific page number to navigate to.  |
|Visible| If true, the shape will be visible. Default is true. |
|Width| The width of the shape in pixels. Default is 160.|
|Height| The height of the shape in pixels. Default is 100. |
|X| The horizontal distance in pixels between the left edge of this shape and the left edge of the page. |
|Y| The vertical distance in pixels between the upper edge of this shape and the top edge of the page. |

### Graphics

|Property|Description|
|---|---|
|Use Raster| If true, the component is displayed as a raster image. If false, the component is displayed as a vector. Default is false.|

## Example

The example below shows the property changes applied to a `sample-images/flags/` SVG dragged from the Image Management tool onto a report page.

![The Norwegian flag centered at the top of a report page.](imgs/example-flag.png)

|Property|Value|
|---|---|
|Stroke Style| Hidden|
|Width|300 |
|Height|220 |
|X|160 |
|Y|60 |