# Recommendations for svg editor

**URL:** <https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [October 22, 2019, 10:47pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303 "2019-10-22T22:47:07Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![heybales](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/heybales/32/3358_2.png) [@heybales](https://forum.inductiveautomation.com/u/heybales)\
**Post date:** [October 22, 2019, 10:47pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/1 "2019-10-22T22:47:07Z")

</div>

I realized today that there’s no way to construct a graphic object such as a pump in Perspective.

In the good old days of Vision, I could grab a triangle, circle, and rectangle, and make a pump in no time. I don’t see how to do this in Perspective.

Two questions:

1. Is that capability coming to Perspective, or is the plan that designers will use existing SVG editors to build those objects and then import them?

2. What external SVG editors are recommended for this sort of thing? I’m not interested in becoming proficient in Adobe Illustrator.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [October 22, 2019, 10:53pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/2 "2019-10-22T22:53:23Z")

</div>

I use Inkscape. Its a free software and fairly simple to use. I normally use it for converting whatever PNG icons we have created into SVG’s for use in Ignition.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [October 22, 2019, 11:06pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/3 "2019-10-22T23:06:37Z")

</div>

I personally find Gravit Designer to have a much less steep learning curve than Illustrator and even Inkscape. It has a free version that I have yet to hit the limitations of with the simple icon/graphics design I do. Your mileage may vary.

---

<div class="post-metadata">

**Author:** ![Paul.Scott](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul.scott/32/4578_2.png) [@Paul.Scott](https://forum.inductiveautomation.com/u/Paul.Scott)\
**Post date:** [October 22, 2019, 11:34pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/4 "2019-10-22T23:34:59Z")

</div>

> [@heybales](#):
>
> Is that capability coming to Perspective, or is the plan that designers will use existing SVG editors to build those objects and then import them?

The capability is planned: [Perspective - Drawing Tools | Voters | Inductive Automation](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/perspective-drawing-tools)

---

<div class="post-metadata">

**Author:** ![andytimc](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andytimc/32/11938_2.png) [@andytimc](https://forum.inductiveautomation.com/u/andytimc)\
**Post date:** [October 25, 2019, 12:35pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/5 "2019-10-25T12:35:27Z")

</div>

@ryan.white what format do you save the SVG file in to be able to drag and drop it into perspective. I am trying to follow the inductive university video for SVG importing and create a simple circle that I can change color on based on tag value, but when I drag it into perspective it brings it in as an image and I don’t have control over the fill. It appears they are saving as HTML file but inkscape will not let me do that even with a simple circle.

---

<div class="post-metadata">

**Author:** ![heybales](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/heybales/32/3358_2.png) [@heybales](https://forum.inductiveautomation.com/u/heybales)\
**Post date:** [October 25, 2019, 4:15pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/6 "2019-10-25T16:15:12Z")

</div>

Here are a couple of tips I learned from trying inkscape. Note, I’m using Ignition 8.0.5.

- when you finish creating your object, modify the size of the canvas under File/Document Properties  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4b5d3216487b295958d1b078c74994374aafacb8.png)

- when you drag the object into designer, select the embed option. Save and link is the default, but this doesn’t work.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/93cfdbee6863f82d63cf0fe5e3341b59b6891f2b.png)

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [October 25, 2019, 7:58pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/7 "2019-10-25T19:58:46Z")

</div>

@andytimc whenever I save an icon I’ve converted into an svg with Inkscape I do a save as “Plain SVG”.

---

<div class="post-metadata">

**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\
**Post date:** [October 28, 2019, 9:16pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/8 "2019-10-28T21:16:29Z")

</div>

I’ve been using “Optimized SVG” in Inkscape to preserve gradients, then use @heybales advice to resize and embed the image.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/2aa77e857bbbc562824957410867fece63ee4109.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/69c6e51e7f67c59cbab3338af26f84a4b87adfcc.png)

---

<div class="post-metadata">

**Author:** ![heybales](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/heybales/32/3358_2.png) [@heybales](https://forum.inductiveautomation.com/u/heybales)\
**Post date:** [October 29, 2019, 2:36pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/9 "2019-10-29T14:36:19Z")

</div>

Thanks for the details on options. I noticed the extraneous metadata, etc, but hadn’t found the settings to switch those off.

---

<div class="post-metadata">

**Author:** ![Bojacobsen](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@Bojacobsen](https://forum.inductiveautomation.com/u/Bojacobsen)\
**Post date:** [December 5, 2019, 6:39pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/10 "2019-12-05T18:39:00Z")

</div>

Yes, Gravit Designer was just what I needed. Simple, free and get the job done.

Inkscape is too hardcore (without google and videos) and overkill.

---

<div class="post-metadata">

**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\
**Post date:** [August 12, 2021, 4:13pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/11 "2021-08-12T16:13:08Z")

</div>

> [@Bojacobsen](#):
>
> Gravit Designer

Where are these options found? I have been searching inkscape and can't seem to find this dialog box.

---

<div class="post-metadata">

**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\
**Post date:** [August 12, 2021, 4:43pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/12 "2021-08-12T16:43:56Z")

</div>

For inkscape…

File-\>Save As…  
select ‘Optimized SVG’ as file type.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e549d6b2dd240c01712f6d8df311b21ff6b49d97.png)

---

<div class="post-metadata">

**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\
**Post date:** [August 12, 2021, 4:45pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/13 "2021-08-12T16:45:34Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [February 17, 2022, 1:42pm UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/14 "2022-02-17T13:42:56Z")

</div>

Hi guys!

I have been testing Perspective today by importing SVG images that were already made for other SCADAs.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/2415e1a5130eb442db95ba544f056d014f1faf1d.png)

Most of the time I’m getting errors. This image in particular has around 800 errors.

Stroke width and fill paint are the most common ones.

I followed the recommendations described above plus the ones from this website: [https://support.shapertools.com/hc/en-gb/articles/360043458934-SVG-files-out-of-Inkscape](https://support.shapertools.com/hc/en-gb/articles/360043458934-SVG-files-out-of-Inkscape)

Any ideas for me?

Thank you!

---

<div class="post-metadata">

**Author:** ![DSandy](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dsandy/32/29409_2.png) [@DSandy](https://forum.inductiveautomation.com/u/DSandy)\
**Post date:** [March 9, 2022, 2:47am UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/15 "2022-03-09T02:47:38Z")

</div>

I have found the same problem, in most cases it is Ignition reading a number as text. The most frequent is it doesn’t like “.7” unless there is a leading zero “0.7”. If you only have a few you can access them in the property editor, simply select the value and hit enter. Ignition re-parses the value and reads it as a number. In the property editor you’ll immediately see it change from green to orange (if I remember my text vs. number colors right) and your error count will reduce by one. Similar procedure for things not recognized as colors.

If you have as many as you do, I import into Ignition, close and save the view, then go into the JSON to correct the same things. Alternatively, you can also edit the SVG file to add the leading zero (or whatever is the issue).

Bottom line, it is a conflict in the way strings/numbers get parsed and you find a way that works for you to get it cleaned up. It’s not easy (and a peeve of mine), but once you see the exact problem in the property editor you can develop a pretty quick workflow for the specific issues that your SVG has.

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [March 9, 2022, 7:45am UTC](https://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/16 "2022-03-09T07:45:14Z")

</div>

> [@DSandy](#):
>
> The most frequent is it doesn’t like “.7” unless there is a leading zero “0.7”.

I wonder why 0.7 and not 7.0.

> [@DSandy](#):
>
> Alternatively, you can also edit the SVG file to add the leading zero (or whatever is the issue).

I have been doing that. There are many images so it will take some time. One image has 8 thousand errors 😄

> [@DSandy](#):
>
> Bottom line, it is a conflict in the way strings/numbers get parsed and you find a way that works for you to get it cleaned up.

Agreed. I wonder if in Vision it is the same. I haven't try it.
