# Import SVG and use elements in the picture

**URL:** <https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222>\
**Category:** Maker\
**Tags:** perspective\
**Created:** [April 30, 2021, 8:39pm UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222 "2021-04-30T20:39:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ekb](https://avatars.discourse-cdn.com/v4/letter/e/e79b87/32.png) [@ekb](https://forum.inductiveautomation.com/u/ekb)\
**Post date:** [April 30, 2021, 8:39pm UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/1 "2021-04-30T20:39:50Z")

</div>

Hello  
I'm trying to understand how to import a SVG image and use the elements to change color.

When I drag the svg image in to Perspective. The Image management pops up and I can save the image. And use it in the design.

But I can't see any elemnt list.

 ![bilde](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/36aa36e461377d7f950cb1b71edd0e74ca7193fe.png)

I tride to get the image from a local web server.

 ![bilde](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8d1e1ae5c57ca23106e5fb6e234047bc5806a21b.png)

I found a forum post here that said I could use "Save and Link" or "Embed image" in the Image Management. But I cant find it in version 8.1

> [@Creating animation-ready valve/pump SVGs](http://forum.inductiveautomation.com/t/creating-animation-ready-valve-pump-svgs/46172):
>
> Since there are no drawing tools in Perspective yet, my understanding is that I need to create SVGs for any drawn objects (pump, valve, etc). I’ve been able to create a basic valve SVG in [draw.io](https://draw.io) and import it into perspective. I can apply a tint to the entire object without issue. [image] [image] Ideally I want to color the valve head and body independently, like so: [image] I can’t figure out how to do this, but I’ve seen examples of it on the forum. Even the IA Perspective demo app seems …

 ![bilde](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2ad14af6283cefb930acc2233d056c7ad27f3926.png)

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 1, 2021, 12:08am UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/2 "2021-05-01T00:08:50Z")

</div>

Use embed image and then you’ll be able to access the SVG elements to style them how you want. You don’t want it going into the image management as then it’s fixed as is (you could use tinting, but it’s super dodgy)

---

<div class="post-metadata">

**Author:** ![Cory.grube](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cory.grube/32/20476_2.png) [@Cory.grube](https://forum.inductiveautomation.com/u/Cory.grube)\
**Post date:** [May 1, 2021, 4:44am UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/3 "2021-05-01T04:44:33Z")

</div>

It looks like you imported the SVG into the image management tool, and then used an image component to display it. The way I did it actually skips that step entirely.

You’ll want to drag the SVG from Windows Explorer directly into your view. You should then have the ‘Save and link’ and ‘Embed image’ options shown in my post. If you pick Embed image you should have access to the individual SVG elements.

For reference, ‘Save and link’ basically does what you’re seeing (and what my original post showed) - it inserts the image component which references the SVG file, rather than inserting a drawing component which lets you manipulate the SVG directly.

---

<div class="post-metadata">

**Author:** ![ekb](https://avatars.discourse-cdn.com/v4/letter/e/e79b87/32.png) [@ekb](https://forum.inductiveautomation.com/u/ekb)\
**Post date:** [May 1, 2021, 7:36pm UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/4 "2021-05-01T19:36:25Z")

</div>

Thanks.  
I did not see the “Embed image” the first time I drag it inn to the window from Explorer.

---

<div class="post-metadata">

**Author:** ![beckya](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@beckya](https://forum.inductiveautomation.com/u/beckya)\
**Post date:** [April 6, 2022, 2:25pm UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/5 "2022-04-06T14:25:47Z")

</div>

I am having a similar issue, I embed the svg from windows explorer and I have 0 elements and the svg does not display anything. What do you recommend to troubleshoot next?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9be84d2d056440174a16642c6f2b950de2705d1f.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 9, 2022, 1:54am UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/6 "2022-04-09T01:54:59Z")

</div>

Looks like you have 1 element? Have you tried expanding it?

---

<div class="post-metadata">

**Author:** ![beckya](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@beckya](https://forum.inductiveautomation.com/u/beckya)\
**Post date:** [April 12, 2022, 1:21pm UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/7 "2022-04-12T13:21:04Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8ca1c9075f44b012dcea0955a34df135847515d.png)

There isn’t anything when it is expanded

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 13, 2022, 1:49am UTC](https://forum.inductiveautomation.com/t/import-svg-and-use-elements-in-the-picture/46222/8 "2022-04-13T01:49:23Z")

</div>

Maybe post the SVG?
