Solved

My custom svg Icon for a new workspace is not displaying correctly (SVG file needs help)

  • 20 January 2023
  • 4 replies
  • 113 views
Joe Schmucker
Rank
Userlevel 6
Badge +3

I followed the topic and I was able to add an icon to a custom workspace.  YAY

 However, the svg icon looks pretty ugly.  If you open the svg file in Chrome, this is what it looks like:

I modeled my svg file that I placed on the web server to follow the formatting of one of the manufacturing icons already on the site.  My svg file has a bunch of paths whereas the manufacturing.svg file only has one path per symbol.

 

PRETTY UGLY.  

If anyone has any experience with svg files, I’ve uploaded the original file that looks great when viewed directly in a browser.  I also uploaded the file as I currently have on the site. Original file is merge_icon_Original.svg and the one I am using is merge_icon.svg.  I zipped them up so that I could upload them here.

Any help formatting this svg file to get it looking pretty would be greatly appreciated!

icon

Best answer by Naveen Boga 21 January 2023, 05:25

View original
2 Attachments
Joe Schmucker, CPA

4 replies

Naveen Boga
Rank
Userlevel 7
Badge +17

Hi @joe21  I have implemented custom icons for many projects by following the steps defined in the below link.

 

https://stackoverflow.com/questions/51086611/acumatica-how-we-can-add-our-own-icons-to-the-modern-ui

Resizing the icon will not work properly, have you covered to svg using some coversion tools?

I will check the above icon and let you know

Naveen B
Naveen Boga
Rank
Userlevel 7
Badge +17

Hi @joe21  I have re-sized this icon and verified it is showing very good now.

Please find the screenshot for reference and SVG code below.

 

Attached the SVG file in .zip format.

 

 

 

<svg xmlns="http://www.w3.org/2000/svg">

  <symbol id="JoeIcon.svg"   height="40" viewBox="0 0 40 40" width="40">
    <rect x="0" y="0" width="40" height="40" style="fill:rgb(100%,100%,100%);fill-opacity:0.0117647;stroke:none;"/>
    <path style="fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 20.001562 14.001563 L 20.001562 5.001562 C 20.001562 4.448437 19.551562 3.998437 18.998437 3.998437 L 5.001562 3.998437 C 4.448437 3.998437 3.998437 4.448437 3.998437 5.001562 L 3.998437 42.998438 C 3.998437 43.551562 4.448437 44.001562 5.001562 44.001562 L 18.998437 44.001562 C 19.551562 44.001562 20.001562 43.551562 20.001562 42.998438 L 20.001562 33.998438 " transform="matrix(0.833333,0,0,0.833333,0,0)"/>
    <path style="fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 27.998437 33.998438 L 27.998437 42.998438 C 27.998437 43.551562 28.448438 44.001562 29.001562 44.001562 L 42.998438 44.001562 C 43.551562 44.001562 44.001562 43.551562 44.001562 42.998438 L 44.001562 5.001562 C 44.001562 4.448437 43.551562 3.998437 42.998438 3.998437 L 29.001562 3.998437 C 28.448438 3.998437 27.998437 4.448437 27.998437 5.001562 L 27.998437 14.001563 " transform="matrix(0.833333,0,0,0.833333,0,0)"/>
    <path style="fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 27.998437 24 L 44.001562 24 " transform="matrix(0.833333,0,0,0.833333,0,0)"/>
    <path style="fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 5.001562 24 L 20.001562 24 " transform="matrix(0.833333,0,0,0.833333,0,0)"/>
    <path style="fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 32.746875 28.81875 L 27.975 24.046875 L 31.157812 20.864062 L 32.746875 19.270312 " transform="matrix(0.833333,0,0,0.833333,0,0)"/>
    <path style="fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 15.375 28.81875 L 20.146875 24.046875 L 16.964063 20.864062 L 15.375 19.270312 " transform="matrix(0.833333,0,0,0.833333,0,0)"/> </symbol>
</svg>

 

1 Attachment
Naveen B
Joe Schmucker
Rank
Userlevel 6
Badge +3

@Naveen Boga  THANK YOU!  Congrats on the MVP award too!  I’m going to compare my file to yours to see what magic you performed.  :-)

Joe Schmucker, CPA
Naveen Boga
Rank
Userlevel 7
Badge +17

@joe21  Thanks a lot and Congratulations to you as well for the Partner MVP award :) 

Naveen B

Reply


Terms & ConditionsCookie settings
About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved