# SVG

SVGs or Scalable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. The SVG component provides more control to style and animate the image and its vector parts. It injects the image into the markup as an inline SVG including all attributes, like IDs, classes, width and height, so that they can easily be targeted using CSS.

## Usage

To apply this component, add the `data-z-svg` attribute to an `<img>` element.

```html
<img src="" width="" height="" data-z-svg />
```

Using the `data-z-svg` attribute also allows you to inject a symbol from the SVG file. Just append the symbol's ID to the image path as you would in any fragmented URL.

```html
<!-- Targets the SVG image -->
<img src="/images/cloud-download.svg" width="40" height="40" data-z-svg />

<!-- Targets a symbol inside the SVG image -->
<img src="/images/icons.svg#cloud-upload" width="40" height="40" data-z-svg />
```

<span class="z-label z-label-primary">Note</span> SVGs will adapt the current
color for their stroke and fill color. To prevent this behavior, add the
`.z-preserve` class to the SVG itself or the elements inside the SVG.

<span class="z-label z-label-primary">Note</span> The `loading="lazy"` attribute for `<img>` elements is taken into account, and SVG images will be injected as inline SVG as they enter the viewport.

## Stroke Animation

There are two ways to animate SVG strokes. First by using the [Animation component](/docs/latest/kit/animation#svg-strokes) and `data-z-svg="stroke-animation: true"`, and second by using the [Parallax component](/docs/latest/kit/parallax#svg-strokes).

## Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. [Learn more](/docs/latest/kit/javascript#component-configuration)

| Option             | Value   | Default | Description                                                                                                   |
| ------------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------- |
| `src`              | String  |         | The SVG source URL. If a location hash is present, only the `<symbol>` of the SVG with the given ID is shown. |
| `stroke-animation` | Boolean | `false` | Animate all elements with the `stroke` attribute in the SVG.                                                  |

## JavaScript

Learn more about [JavaScript components](/docs/latest/kit/javascript#programmatic-use).

### Initialization

```javascript
zUIkit.svg(element, options);
```

### Properties

#### svg

A JavaScript Promise that will resolve with the added SVG Node.

```javascript
zUIkit.svg(element).svg.then(function (svg) {
  svg.querySelector("path").style.stroke = "red";
});
```