# Conversion of png/jpeg to svg

**URL:** <https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 29, 2022, 8:07am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637 "2022-09-29T08:07:03Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ANWESHA\_GUPTA1](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@ANWESHA\_GUPTA1](https://forum.inductiveautomation.com/u/ANWESHA_GUPTA1)\
**Post date:** [September 29, 2022, 8:07am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/1 "2022-09-29T08:07:03Z")

</div>

I am trying to create a few realistic looking HMI screens for my employer. The idea is to get images of the screens and convert them to svg files and use them in perspective so that i can change colours of different elements based on their status.

I am able to only get png/jpeg files and need to convert them to svg.

I am unable to get a real/proper conversion tool to help me do that.  
Tried many of them (Pixillion/nch/inkscape/adobe illustrator). But cannot manage to get a good conversion.  
The converted images either cannot be seen when embedded or if seen, the elements cannot be accessed to change colour.

Anyone had any experience on converting png files to svg?  
Please suggest a tool which can do that.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 29, 2022, 8:13am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/2 "2022-09-29T08:13:00Z")

</div>

PNG and JPEG are pixel-based images. SVGs are vector images. There isn’t a simple conversion method. I suspect that you are going to have to redraw.

Post an image file and we can have a look.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 29, 2022, 9:01am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/3 "2022-09-29T09:01:34Z")

</div>

Yeah seems unlikely you will ever get a good conversion where it will be easy to modify the colors.  
Unless maybe you have a source of what the image made. if it came from a photo, then its probably never gonna happen

---

<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:** [September 29, 2022, 9:04am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/4 "2022-09-29T09:04:25Z")

</div>

The only way you can do this is to use a trace bitmap function. They can produce nice results depending on your image. Inkscape has this function. Have a play with the settings and hopefully you can achieve the outcome you want. Just be aware that you may have to post process the resulting vector paths

I use this all the time for adding logos into ignition from a png, as non-vector sucks

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 29, 2022, 9:08am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/5 "2022-09-29T09:08:07Z")

</div>

> [@ANWESHA\_GUPTA1](#):
>
> The converted images either cannot be seen when embedded

However in the new nightly build there are updates to the svg importer, so maybe you should try updating to that first to test out your conversions

> [@Improved SVG Importing & Rendering, and Convert To Drawing](https://forum.inductiveautomation.com/t/improved-svg-importing-rendering-and-convert-to-drawing/64504):
>
> Improved SVG Importing & Rendering In the next nightly, the SVG Importer and Drawing Component renderer have been greatly improved. These changes are foundational for the upcoming drawing editor. SVGs that didn’t work previously will likely work, so long as they’re imported and rendered with the latest nightly. SVGs imported using a previous version of Ignition will render the same as they did before. This isn’t a guarantee that all SVG elements will import and render correctly, but most sh…

---

<div class="post-metadata">

**Author:** ![ANWESHA\_GUPTA1](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@ANWESHA\_GUPTA1](https://forum.inductiveautomation.com/u/ANWESHA_GUPTA1)\
**Post date:** [September 29, 2022, 9:49am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/6 "2022-09-29T09:49:12Z")

</div>

Hi,  
Yeah have the source of the image. It is generated from an app called the Inventor. This is used by the mechanical team for their design. This app can export the images into png/jpeg and a few other components but unfortunately cannot export as an svg.  
Hence looking for a solution to convert into svg.

---

<div class="post-metadata">

**Author:** ![ANWESHA\_GUPTA1](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@ANWESHA\_GUPTA1](https://forum.inductiveautomation.com/u/ANWESHA_GUPTA1)\
**Post date:** [September 29, 2022, 9:50am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/7 "2022-09-29T09:50:08Z")

</div>

Thank you. Will try out the tracing option on inkscape.

---

<div class="post-metadata">

**Author:** ![ANWESHA\_GUPTA1](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@ANWESHA\_GUPTA1](https://forum.inductiveautomation.com/u/ANWESHA_GUPTA1)\
**Post date:** [September 29, 2022, 9:52am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/8 "2022-09-29T09:52:19Z")

</div>

Hi Victor,  
Sorry which version of Ignition is this one? with the new update to svg importer?  
I can try.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 29, 2022, 10:47am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/9 "2022-09-29T10:47:09Z")

</div>

Seems that inventor can export dxf files that inkscape seems to be able to pass to svg  
Its from 2016 tho

> **[SaveAs/Export to SVG format](https://forums.autodesk.com/t5/inventor-forum/saveas-export-to-svg-format/td-p/6702316)**
>
> We are working w/ 2 different companies to do web based parts pages for our customers, and both require an SVG format.  To this point we're struggling to get an IDW to SVG workflow.  Only success we've found is via DWG which would be OK,...

version 8.1.22

> **[Current Ignition Release | Inductive Automation](https://inductiveautomation.com/downloads/ignition/8.1.22-SNAPSHOT)**
>
> Download and start using the world's most powerful SCADA software in just minutes. Cross-platform, with installers
> available for multiple operating systems.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 29, 2022, 10:53am UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/10 "2022-09-29T10:53:28Z")

</div>

> [@ANWESHA\_GUPTA1](#):
>
> Inventor ... cannot export as an SVG.

An alternative is ...

- Create a drawing of the view in Inventor.
- Print to PDF.
- Import to Inkscape.
- Strip out the stuff you don't need.
- Save as _Plain SVG_.

The Inventor drawing may have options on rendering - shaded or not. Try shaded first and see if they are output as true SVG objects.

---

<div class="post-metadata">

**Author:** ![ANWESHA\_GUPTA1](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@ANWESHA\_GUPTA1](https://forum.inductiveautomation.com/u/ANWESHA_GUPTA1)\
**Post date:** [October 18, 2022, 12:39pm UTC](https://forum.inductiveautomation.com/t/conversion-of-png-jpeg-to-svg/64637/11 "2022-10-18T12:39:05Z")

</div>

Update: Used Inventor to export the image as a png file. Then used it in Inkscape to convert (using bitmap tracing) and exported it as svg. Works perfectly fine. Thanks all for the suggestions.
