# Getting your SVG ready

## How to get your own SVG

### Option 1: Use an existing SVG

Presumably, you already have an idea of the icon you want to use – maybe it's already an SVG. Follow the [steps below](#outline-vs.-non-outline) to make sure your SVG is formatted correctly. 

You can also convert your PNG logo to an SVG using [the steps below](#convert-your-png-to-an-svg). Or, maybe you want to [edit your SVG](#editing-your-svg).

### Option 2: Find one online

You can find a shape online that you can use. I recommend a website like [thenounproject.com](https://thenounproject.com/) - But make sure whatever you choose follows the [guidelines below](#outline-vs.-non-outline)!

### Option 3: Make your own!

{% embed url="<https://youtu.be/XwXOVrmeNfo>" %}

{% embed url="<https://vectorink.io/app/>" %}

## Outline vs. non-outline

In order to make the animation work, you'll need to make sure your SVG is formatted correctly – Here's how!

### Outline

{% hint style="info" %}
**Animations:** Draw spin, Draw, Jump draw, Draw sequence, Sequence draw spin
{% endhint %}

If you want to animate the outline of your SVG, you can use one of the drawing animations. This works best with solid shapes that will look good as an outline, such as the examples below.

<figure><img src="/files/TvIdDFfXt6CBfhO7qPKW" alt=""><figcaption></figcaption></figure>

You can also make some more complicated shapes to outline, but you'll need to make sure they're made correctly to show up as intended. In the example below, the image on the left is made of only lines using the pen tool. The shape on the right is already outlined, and will not show up like we want.&#x20;

<figure><img src="/files/f2nwa4c64dRQNetHxpru" alt=""><figcaption></figcaption></figure>

### Non-outined

{% hint style="info" %}
**Animations**: Spin, Pulse, Jump, Jump rotate
{% endhint %}

Non-outlined animations are much easier, and can be almost anything. If you have a more complicated logo that you want to use, this might be your best option.&#x20;

Below is a complicated shape - You probably won't want to use this as an outline, since it won't look too great. Instead, find a simpler shape, or use with one of the non-outline animations.

<figure><img src="/files/Y7FJlOyI54dUMFpEt8TG" alt=""><figcaption></figcaption></figure>

## Convert your PNG to an SVG

For a simple conversion, I like to use this free site here: <https://convertio.co/png-svg/>

{% embed url="<https://convertio.co/png-svg/>" %}

Or, for more complicated images, you can try your luck with Adobe's free converter: <https://express.adobe.com/tools/convert-to-svg>

{% embed url="<https://express.adobe.com/tools/convert-to-svg>" %}

## Editing your SVG

Option 1:

1. Upload your SVG to <https://vectorink.io/app/>
2. Follow the [video above](#option-3-make-your-own), and make edits to your own file!

### Option 2:

I've found this site to be useful to make some edits to your SVG: <https://boxy-svg.com/app>

1. Go to <https://boxy-svg.com/app>
2. File > Upload from Disk > Select your SVG file
3. Make any edits to your SVG if needed
4. Click the "elements" button at the bottom of the screen
5. Select the shape you would like to use, and copy the "path" or "polygon" code&#x20;
6. Go to <https://jakearchibald.github.io/svgomg/> and click "paste markup"
7. Download your SVG&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://devopanda.gitbook.io/svg-loader-progress-bar/getting-your-svg-ready.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.