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!
Best answer by Naveen Boga
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.
<svgxmlns="http://www.w3.org/2000/svg"><symbolid="JoeIcon.svg"height="40"viewBox="0 0 40 40"width="40"><rectx="0"y="0"width="40"height="40"style="fill:rgb(100%,100%,100%);fill-opacity:0.0117647;stroke:none;"/><pathstyle="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)"/><pathstyle="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)"/><pathstyle="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)"/><pathstyle="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)"/><pathstyle="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)"/><pathstyle="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>
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
